• 一栏定宽，一栏自适应

  <!-- html -->
  <div class="left">定宽</div>
  <div class="right">自适应</div>
  <!-- css -->
  .left{
    width: 200px;
    height: 600px;
    float: left;
    display: table;
    text-align: center;
    line-height: 600px;
  }
  .right{
    margin-left: 210px;
    height: 600px;
    background: yellow;
    text-align: center;
    line-height: 600px;
  }

---

• 利用绝对定位实现

  <!-- html -->
  <div class= "left">
  </div>
  <div class= "right">
  </div>
  <!-- css-->
  .left{
      position:absolute;
      left:0;
      width:200px;
  }
  .right{
      margin-left:200px;
  }

---

• 利用绝对定位实现

  <!-- html-->
  <div class= "left">
  </div>
  <div class= "main">
  </div>
  <div class= "right">
  </div>
  <!-- css-->
  .left{
    width:200px;
    background-color:yellow;
    position:absolute;
    top:0;
    left:0;
  }
  .main{
    margin-left:200px;
    margin-right:300px;
  }
  .right{
    width:300px;
    background-color:orange;
    position:absolute;
    top:0;
    right:0;
  }

---

• 利用浮动定位实现

  <!-- html-->
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
  <!-- css-->
  .left{
    width:300px;
    background-color:yellow;
    float:left;
  }
  .right{
    width:200px;
    background-color:orange;
    float:right;
  }
  .main{
    margin-left:300px;
    margin-right:200px;

  }

---

• 圣杯布局，两边定宽，中间自适应

  <!-- html-->
  <div class="container">
      <div class="main col">Main</div>
      <div class="left col">Left</div>
      <div class="right col">Right</div>
  </div>
  <!-- css-->
      .col{
          float: left;
          position:relative;
      }
      .container{
          padding:0 200px 0 100px;
      }
      .left{
          left:-100px;
          width: 100px;
          height:100%;
          margin-left: -100%;
          background: red;
      }
      .main{
          width:100%;
          height: 100%;
      }
      .right{
          right:-200px;
          width:200px;
          height:100%;
          margin-left: -200px;
          background: yellow;
      }

---

• 双飞翼布局

  <!-- html-->
   <div class="container">
      <div class="left col ">Left</div>
      <div class="main col ">
          <div class="main_inner">Main</div>
      </div>
      <div class="right col ">Right</div>
  </div>
  <!-- css-->
   .col{
          float: left;
      }
      .main{
          width:100%;
          height:100%;
      }
      .main_inner{
          margin:0 200px 0 100px;
      }
      .left{
          width: 100px;
          height: 100%;
          margin-left: -100%;
          background: red;
      }
      .right{
          height:100%;
          width:200px;
          margin-left: -200px;
          background: yellow;
      }

---

• 对于行内元素(inline)：text-align: center;

  <!-- html -->
  <div>
     <span >kaka</span>
  </div>
  <!-- css -->
  div {
      text-align:center
  }

---

• 对于块级元素(block)：
  1.给此块级元素设置宽度
  2.margin:0 auto;

  <!-- html -->
  <div class="parent">
      <div class="child">kaka</div>
  </div>
  <!-- css -->
  .parent {
      width:1002px;
  }
  .child {
      width:50%;//也可以是固定像素
      margin:0 auto;
  }

---

• 行高与高度一致使其居中，适用于只有一行文字的情况

  <!-- html -->
  <div class="parent">
      <div class="child">kaka</div>
  </div>
  <!-- css -->
  .parent {
      height:1002px;
      line-height:1002px;
  }

---

• 已知宽高，给负margin

  <!-- html -->
  <div class="parent">
      <div class="child">kaka</div>
  </div>
  <!-- css -->
  .parent {
      position: relative;
  }
  .child {
    position: absolute;
    width:1002px;
    height:828px;
    top: 50%;
    left: 50%;
    margin-top:-414px;
    margin-left:-501px;
  }

---

• 未知宽高，transform方案

  <!-- html -->
  <div class="parent">
      <div class="child">kaka</div>
  </div>
  <!-- css -->
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

---

• 请写出「姓名」与「联系方式」两端对齐的例子

  姓名
  联系方式

  span{
  line-height:20px;
  font-size:20px;
  height:20px;
  overflow:hidden;
  }
  span::after{
  content: '';
  display: inline-block;
  width: 100%;
  }

• 文本内容过长如何变成省略号？
  1 一行文本过长,只需要对该div作以下操作：

  div{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }

  2 多行文本超出,如：在第二行后省略：

  div{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  }

• 如何使固定高度的div里面的文字垂直居中？

1.先确定行高 2.再用padding补全高度。这种写法的好处是在文字增减过程中不会出现bug。
例：一个高 40px 的 div，里面的文字垂直居中

<!-- css -->
div{
    line-height:20px;
    padding:10px 0;
}

• 使该元素变大1.2倍

  transform: scale(1.2);

• 动画过渡效果

  transition: all 0.3s;