摘要：例一個(gè)高的，里面的文字垂直居中使該元素變大倍動(dòng)畫(huà)過(guò)渡效果

左右布局

一欄定寬，一欄自適應(yīng)

    
    
定寬
    
自適應(yīng)
    
    .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;
    }

利用絕對(duì)定位實(shí)現(xiàn)

    
    

    
    

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

左中右布局

利用絕對(duì)定位實(shí)現(xiàn)

    
    

    
    

    
    

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

利用浮動(dòng)定位實(shí)現(xiàn)

    
    

    

    

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

圣杯布局，兩邊定寬，中間自適應(yīng)

    
    

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

水平居中

對(duì)于行內(nèi)元素(inline)：text-align: center;

    
    

       kaka
    
    
    div {
        text-align:center
    }

對(duì)于塊級(jí)元素(block)：
1.給此塊級(jí)元素設(shè)置寬度
2.margin:0 auto;

    
    

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

垂直居中

行高與高度一致使其居中，適用于只有一行文字的情況

    
    

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

父元素高度不寫(xiě)（推薦寫(xiě)法）

    
    

        
kaka
    
    
    .parent {
        padding:10px 0;
    }

水平垂直均居中

已知寬高，給負(fù)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%);
    }

flex布局

    
    

        
kaka
    
    
    .parent {
      display: flex;
      justify-content:center;//子元素水平居中
      align-items:center;//子元素垂直居中
    }

請(qǐng)寫(xiě)出「姓名」與「聯(lián)系方式」兩端對(duì)齊的例子

姓名
聯(lián)系方式

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

文本內(nèi)容過(guò)長(zhǎng)如何變成省略號(hào)？
1 一行文本過(guò)長(zhǎng),只需要對(duì)該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補(bǔ)全高度。這種寫(xiě)法的好處是在文字增減過(guò)程中不會(huì)出現(xiàn)bug。
例：一個(gè)高 40px 的 div，里面的文字垂直居中

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

使該元素變大1.2倍

    transform: scale(1.2);

動(dòng)畫(huà)過(guò)渡效果

    transition: all 0.3s;