前端面试题之CSS布局问题

垂直居中DIV
HTML部分

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

这里简单给出几种
1.绝对定位（盒子宽高已知）

.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
}
原文链接：https://blog.csdn.net/Jet_Lover/article/details/115646489