前端面试题之CSS布局问题
前端CSS布局问题
-
- 垂直居中DIV
- 两栏布局左边固定右边自适应
- 三栏布局左右固定中自适应
- 总结
垂直居中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
}
总结
这里列出的是一些我比较常用的方法，
其他的像table布局，网格布局可以看阮一峰——网格布局教程
想了解更多关于flex布局可以看阮一峰——Flex 布局教程
如有不足之处，请指出。
