如何实现两栏布局,三栏布局,水平/垂直居中
两栏布局
先写一下样式
"box">
"left">左
"right">右
使用float + margin方式实现
还可以使用position实现
div {
height: 200px;
color:red;
}
.left {
position: absolute;
left: 0;
width: 300px;
background-color: green;
}
.right {
width: 100%;
margin-left: 300px;
background-color: black;
}
也可以使用flex实现
div {
height: 200px;
color: red;
}
.box {
display: flex;
}
.left {
flex: 0 0 300px;
background-color: green;
}
.right {
flex: 1 1;
background-color: black;
}
三栏布局
先写样式
"box">
"left">左
"right">右
"center">中
使用float + margin方式实现
div {
height: 200px;
color: red;
}
.center {
width: 100%;
margin-left: 300px;
margin-right: 100px;
background-color: green;
}
.left {
float: left;
width: 300px;
background-color: black;
}
.right {
float: right;
width: 100px;
background-color: blue;
}
使用position实现
div {
height: 200px;
color: red;
}
.center {
width: 100%;
margin-left: 300px;
margin-right: 100px;
background-color: black;
}
.left {
position: absolute;
left: 0px;
width: 300px;
background-color: green;
}
.right {
position: absolute;
right: 0px;
width: 100px;
background-color: blue;
}
使用flex布局
.box{
display:flex;
}
.left{
background-color: red;
width: 100px;
height: 100px;
flex:0 1 auto;
order:-1;
}
.right{
background-color: blue;
width: 100px;
height: 100px;
flex:0 1 auto;
}
.center{
background-color:yellow;
flex:1 0 auto;
height: 100px;
}
圣杯布局
三列布局，左列和右列都是固定宽度，中间自适应
2
3
4
31
32
33 "main">
34
35 "middle">
36 "content">
37 middle-content
38
39
40 "left">left
41
42 "right">right
43
44
45
双飞翼布局
三栏布局，两边的盒子宽度固定，中间盒子自适应
"header">#header
"container">
"center" class="column">
"content">#center
"left" class="column">#left
"right" class="column">#right
"footer">#footer
双飞翼布局和圣杯布局的区别:
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同的地方在于解决中间div内容不被遮挡的思路上面:
1.圣杯布局的为了中间内容不被修改，是通过包裹元素的padding-left和padding-right来使得内容div置于中间，然后再通过相对定位position:relative，配合right或left属性让左右两栏不遮挡中间内容。
2.双飞翼布局的解决方案是：通过在中间元素的内部新增一个div用于放置内容，然后通过左右外边距margin-left和margin-right为左右两栏留出位置。
垂直居中
position + margin实现
flex实现
水平居中
通过text-align: center 实现;
前提是看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
1111
如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
.box {
display: block;
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
.box1{
width: 100px;
height: 100px;
}
可以使用margin: 0 auto实现
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}
#son {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
还可以使用定位实现
.box {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -50px;
}
使用flexbox布局
.box {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
}
.box1 {
width: 100px;
height: 100px;
background-color: green;
}