CSS布局(不完全)总结
实现水平居中布局的几种方式
方法一：
水平居中
通过以下CSS代码实现水平居中布局
.parent{
text-align:center;
}
.son{
display:inline-block;
}
方法二：
水平居中
通过以下CSS代码实现水平居中布局
.son{
display:table;
margin:0 auto;
}
方法三：
水平居中
通过以下CSS代码实现水平居中布局
.parent{
position:relative;
}
.son{
position:absolute;
left:50%;
transform:translateX(-50%);
}
实现垂直居中布局的几种方式
方法一：
垂直居中
通过以下CSS代码实现垂直居中布局
.parent{
display:table-cell;
vertical-align:middle;
}
方法二：
垂直居中
通过以下CSS代码实现垂直居中布局
.parent{
position:relative;
}
.son{
position:absolute;
top:50%;
transform:translateY(-50%);
}
实现居中布局（水平+垂直）的几种方式
方法一：
垂直居中
通过以下CSS代码实现居中布局
.parent{
position:relative;
}
.son{
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%)
transform:translateY(-50%);
}
方法二：
垂直居中
通过以下CSS代码实现居中布局
.parent{
display:table-cell;
vertical-align:middle
}
.son{
display:block;
margin:0 auto;
}
实现两列布局（定宽+自适应）的几种方式
方法一：
left
right
通过以下CSS代码实现居中布局
.left{
height:500px
width:300px;
float:left;
}
.right{
height:500px;
margin-left:300px;
}
方法二：
left
right
通过以下CSS代码实现居中布局
.left{
height:500px
width:300px;
float:left;
}
.right{
height:500px;
overflow:hidden;
}
方法三：
left
right
通过以下CSS代码实现居中布局
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left,.right{
display:table-cell;
height:500px;
}
.left{
width:300px;
}
实现三列布局的几种方式
圣杯布局：
center
left
right
通过以下CSS代码实现圣杯布局
*{
margin: 0;
}
.center,.left,.right{
float: left;
height: 500px;
position: relative;
}
.clear{
clear: both;
}
.parent{
margin:0 250px;
}
.center{
width: 100%;
background-color: silver;
}
.left,.right{
width: 250px;
background-color: slategrey;
}
.left{
margin-left: -100%;
left: -250px;
}
.right{
margin-left: -250px;
left:250px
}
双飞翼布局：
center
left
right
通过以下CSS代码实现双飞翼布局
*{
margin: 0;
}
.center,.left,.right{
float: left;
height: 500px;
}
.clear{
clear: both;
}
.center{
width: 100%;
background-color: silver;
}
.center-inner{
margin: 0 250px;
}
.left,.right{
width: 250px;
background-color: slategrey;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -250px;
}
实现等分布局的几种方式
方法一：
1
2
3
4
.parent{
width: 100%;
}
.column{
width: 25%;
float: left;
height:300px;
}
方法二：
1
2
3
4
.parent{
width: 100%;
display:table;
}
.column{
height:300px;
display:table-cell;
}
实现等高布局的几种方式
方法一：
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quibusdam dolores dicta placeat porro, earum ea numquam,
odio cupiditate ipsam repudiandae ut consequatur enim
delectus expedita ratione temporibus sequi!
Impedit, veritatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
*{
margin: 0;
padding: 0;
}
.parent{
width: 100%;
display: table;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 50%;
background-color: turquoise;
}
.right{
ackground-color: violet;
}
方法二：
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quibusdam dolores dicta placeat porro, earum ea numquam,
odio cupiditate ipsam repudiandae ut consequatur enim
delectus expedita ratione temporibus sequi!
Impedit, veritatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
*{
margin: 0;
padding: 0;
}
.parent{
overflow:hidden;
}
.left,.right{
margin-bottom:-9999px;
padding-bottom:9999px;
}
.left{
width: 300px;
float:left;
background-color: turquoise;;
}
.right{
width:500px;
background-color: violet;
}
CSS3实现多列布局
利用columns属性
*{
margin: 0;
padding: 0;
}
.parent{
columns: 4 300px;
}
.col1,.col2,.col3,.col4{
height: 300px;
}
.col1{
background-color: violet;
}
.col2{
background-color: yellow;
}
.col3{
background-color: yellowgreen;
}
.col4{
background-color: teal;
}
总结
这里总结的布局并不是很完全，只是总结了一些基础或者比较经典的布局，实际应用中还会遇到很多布局，布局应灵活运用，没有哪种布局是最好的，只有最合适的。