前端面试题之CSS布局问题

垂直居中DIV

HTML部分

 <div class="father"> <div class="son">我是垂直居中的div</div> </div> 

 .father { 
    position: relative; width: 500px; height: 500px; background-color: red; } .son { 
    position: absolute; left: 50%; top: 50%; margin-left: -150px;（-盒子一半宽度） margin-top: -150px;（-盒子一半高度） width: 300px; height:300px; background-color: blue; } 

2.绝对定位（宽高已知）

 .father { 
    position: relative; width: 500px; height: 500px; background-color: red; } .son{ 
    position:absolute; margin:auto; top:0; left:0; bottom:0;right:0; width: 300px; height:300px; background-color: blue; } 

3.定位 （宽高未知）

 .son { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: blue; } 

4.grid布局（父元素设置，宽高未知）（兼容性ie 10以上支持）

 .father { 
    display: grid; align-items: center; justify-content: center; width: 500px; height: 500px; background-color: red; } 

5.flex布局（父元素设置，宽高未知）（兼容性ie 11以上支持）

 .father { 
    display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; background-color: red; } 

6.表格布局（父元素设置，宽高未知）（兼容性较好）

 .father { 
    display:table-cell text-align: center; vertical-align: middle width: 500px; height: 500px; background-color: red; } .son { 
    display: inline-block; } 

两栏布局左边固定右边自适应

这与右边固定左边自适应，上固定下自适应是一个道理。

HTML部分

 <div class="father"> <div class="left"></div> <div class="right"></div> </div> 

1.float布局

 .left { 
    width: 200px; height: 200px; float: left; background-color: blue; } .right { 
    margin-left: 200px; height: 200px; background-color: red; } 

2.绝对定位

 .father { 
    position: relative; height: 200px; } .left { 
    position:absolute; width: 200px; height: 100%; float: left; background-color: blue; } .right { 
    position:absolute; height: 100%; left:200px; right: 0; background-color: red; } 

3.flex布局

 .father { 
    height: 300px; width: 100%; display: flex; } .left { 
    width: 300px; height: 100%; background-color: blue; } .right { 
    flex: 1; height: 100%; background-color: red; } 

三栏布局左右固定中自适应

这与左中固定右边自适应，中右固定左边自适应，以及上下固定中间自适应是一个道理

HTML部分

 <div class="father"> <div class="left"></div> <div class="right"></div> <div class="main"> </div> </div> 

1.float布局

 .father{ 
    height: 50px; div{ 
    height: 100%; } } .left { 
    width: 200px; float: left; background-color: red } .main { 
    margin-left: 200px; margin-right: 200px; background-color: blue } .right { 
    float: right; width: 200px; background-color: yellow } 

2.绝对定位

 .father{ 
    position: relative; height: 50px; div{ 
    position: absolute; height: 100%; } } .left { 
    left: 0; width: 200px; background-color: red } .main { 
    left: 200px; right: 200px; background-color: blue } .right { 
    right: 0; width: 200px; background-color: yellow } 

3.flex布局
HTML部分

 <div class="father"> <div class="left"></div> <div class="main"> </div> <div class="right"></div> </div> 

CSS部分

 .father { 
    display: flex; height: 50px; div{ 
    height: 100%; } } .left { 
    width: 200px; background-color: red } .main { 
    flex: 1; background-color: blue } .right { 
    width: 200px; background-color: yellow } 

总结