CSS布局
左右布局
利用浮动
html1
2
3
4<div class="main clearfix"> <!-- 父元素需要清除浮动 -->
<div class="left">left</div>
<div class="right">right</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.clearfix::after{
content:'';
display:block;
clear:both;
}
.left{
float:left;
width:50%;
background-color:red;
}
.right{
float:right;
width:50%;
background-color:green;
}利用绝对定位
html1
2
3
4<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.main{
position:relative;
}
.left{
position:absolute;
width:50%;
left:0;
background-color:red;
}
.right{
position:absolute;
width:50%;
right:0;
background-color:green;
}利用行内块元素
html1
2
3
4<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18*{
padding: 0;
margin: 0;
}
.left{
display:inline-block; <!-- 中间会有间隙,我们用负margin清除间隙-->
width:50%;
margin-right: -6px;
background-color:red;
vertical-align: top;
}
.right{
display:inline-block;
width:50%;
margin-right: -6px;
background-color:green;
vertical-align: top;
}
左中右布局
利用浮动
html1
2
3
4
5<div class="main clearfix"> <!-- 父元素需要清除浮动 -->
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.clearfix::after{
content:'';
display:block;
clear:both;
}
.left{
float:left;
width:33%;
background-color:red;
}
.middle{
float:left;
width:33%;
background-color:blue;
}
.right{
float:left;
width:33%;
background-color:green;
}利用绝对定位
html1
2
3
4
5<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24.main{
position:relative;
}
.left{
position:absolute;
top:0;
left:0;
width:33%;
background-color:red;
}
.middle{
position:absolute;
top:0;
left:33%;
width:34%;
background-color:blue;
}
.right{
position:absolute;
top:0;
right:0;
width:33%;
background-color:green;
}利用行内块元素
html1
2
3
4
5<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//行内块元素元素间会有间隙
.left{
display:inline-block;
width:33%;
background-color:red;
}
.middle{
display:inline-block;
width:33%;
background-color:blue;
}
.right{
display:inline-block;
width:33%;
background-color:green;
}
水平居中
行内元素(inline)水平居中
html1
2
3<div class="main">
<span class="center">居中</span>
</div>css
1
2
3
4
5
6
7//行内元素的父元素添加text-align:center;
.main{
width:100px;
height:100px;
text-align:center;
border:1px solid red;
}块元素水平(block)水平居中
利用margin居中
html
1
2
3<div class="main">
<div class="center">居中</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12//块元素添加宽高,并设置`margin:0 auto`;水平居中
.main{
width:100px;
height:100px;
border:1px solid green;
}
.center{
width:50px;
height:50px;
margin:0 auto;
border:1px solid red;
}利用绝对定位
html
1
2
3<div class="main">
<div class="center">居中</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//块元素添加宽高,left设置(离左边的距离-本身的宽度/2)
.main{
width:100px;
height:100px;
border:1px solid green;
position:relative;
}
.center{
width:50px;
height:50px;
border:1px solid red;
position:absolute;
top:0;
left:25px;
}
垂直居中
行内元素(inline)垂直居中
利用line-height
html1
2
3<div class="main">
<span class="center">居中</span>
</div>css
1
2
3
4
5
6
7//设置行内元素的父元素的height和line-height相同
.main{
width:100px;
height:100px;
line-height:100px;
border:1px solid red;
}
块元素(block)垂直居中
利用父元素padding上下相等
html1
2
3<div class="main">
<span class="center">居中</span>
</div>css
1
2
3
4
5
6.main{
background:red;
font-size:16px;
padding-top:50px;
padding-bottom:50px;
}利用绝对定位
html1
2
3<div class="main">
<div class="center">居中</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.main{
border:1px solid red;
position:relative;
width:100px;
height:100px;
}
.center{
position:absolute;
width:50px;
height:50px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}利用负margin
html1
2
3<div class="main">
<div class="center">居中</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//top&right设置为父元素的一半,块元素的负margin设置为其宽高的一半
.main{
background:red;
position:relative;
width:100px;
height:100px;
}
.center{
position:absolute;
width:60px;
height:60px;
top:50px;
right:50px;
margin-top:-30px;
margin-right:-30px;
}
其他小技巧
待补坑......