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;    }

---

• 利用绝对定位实现

        
    
    
    
    
    
    
    
    
        .left{        position:absolute;        left:0;        width:200px;    }    .right{        margin-left:200px;    }

---

• 左中右布局

• 利用绝对定位实现

        
    
    
    
    
    
    
    
    
    
    
    
    
        .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;    }

---

• 利用浮动定位实现

        
    
    
    
    
    
    
        .left{      width:300px;      background-color:yellow;      float:left;    }    .right{      width:200px;      background-color:orange;      float:right;    }    .main{      margin-left:300px;      margin-right:200px;}

---

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

        
    
        
     
      Main
     
        
     
      Left
     
        
     
      Right
     
    
    
    
            .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;        }

---

• 双飞翼布局

         
    
         
     
      Left
     
        
     
            
      
       Main
      
        
     
        
     
      Right
     
    
    
    
         .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;        }

---

CSS居中问题

• 水平居中

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

        
    
       
     kaka    
    
    
        div {        text-align:center    }

---

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

        
    
        
     
      kaka
     
    
    
    
        .parent {        width:1002px;    }    .child {        width:50%;//也可以是固定像素        margin:0 auto;    }

---

• 垂直居中

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

        
    
        
     
      kaka
     
    
    
    
        .parent {        height:1002px;        line-height:1002px;    }

---

• 水平垂直均居中

• 已知宽高，给负margin

        
    
        
     
      kaka
     
    
    
    
        .parent {        position: relative;    }    .child {      position: absolute;      width:1002px;      height:828px;      top: 50%;      left: 50%;      margin-top:-414px;      margin-left:-501px;    }

---

• 未知宽高，transform方案

        
    
        
     
      kaka
     
    
    
    
        .parent {      position: relative;    }    .child {      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);    }

---

CSS的一些小技巧

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

    姓名联系方式
    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，里面的文字垂直居中

    div{    line-height:20px;    padding:10px 0;}

• 使该元素变大1.2倍

transform: scale(1.2);

• 动画过渡效果

transition: all 0.3s;