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

水平居中

对于行内元素(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;
    }

父元素高度不写（推荐写法）

    
    

        
kaka
    
    
    .parent {
        padding:10px 0;
    }

水平垂直均居中

已知宽高，给负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;//子元素垂直居中
    }

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

姓名
联系方式

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;