0%

CSS布局指南

前言

在前端开发中,css页面布局部分是书写样式代码的重点和难点,这篇文章总结了一些页面布局的实现方案。

居中相关

水平居中

示例:

方案一:inline-block + text-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <style>
.wrapper{
width: 400px;
height: 100px;
background-color: #bfa;
text-align: center;
}
.inner {
width: 50px;
height: 50px;
background-color: orange;
display: inline-block;
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

分析:子元素设置display为inline-block,其具有文本元素的性质,其父元素可以通过设置文本对齐属性text-align来控制其在行内的对齐方式,text-align: center即为水平对齐。

注意:text-align属性是具有继承性的,会导致自己元素内部的文本也是居中显示的,需要自身设置text-align覆盖。

方案二:定位 + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.wrapper{
width: 400px;
height: 100px;
background-color: #bfa;
position: relative;
}
.inner {
width: 50px;
height: 50px;
background-color: orange;
position: absolute;
left: 50%;top: 0;
transform: translateX(-50%);
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

分析:父元素开启定位(relative,absolute,fixed都可以)后,子元素设置绝对定位absolute后,left设置为50%,再使用transform: translateX(-50%)将子元素往反方向移动自身宽度的50%,便完成水平居中。

注意:父级元素是否脱离文档流,不影响子元素水平居中效果,但是transform是CSS3属性,存在浏览器兼容问题。

方案三:display: block + margin: 0 auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.wrapper{
width: 400px;
height: 100px;
background-color: #bfa;
}
.inner {
width: 50px;
height: 50px;
background-color: orange;
display: block;
margin: 0 auto;
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

分析:这个方法只需要对子元素进行设置就可以实现水平居中,margin设置auto表示浏览器会自动分配,实现内外边距等分效果。

注意:这里子元素设置display为block或者table都是可以的,如果子元素脱离文档流(浮动,定位),会导致margin属性的值无效。

垂直居中

示例:

方案一: 定位 + transform

这种方案和之前水平居中布局的方案二是同样的原理,不在赘述 。

方案二:display: table-cell + vertical-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.wrapper{
width: 100px;
height: 400px;
background-color: #bfa;
display: table-cell;
vertical-align: middle;
}
.inner {
width: 50px;
height: 50px;
background-color: orange;
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

分析:设置display: table-cell的元素具有 td元素 的行为,它的子元素布局方式类似文本元素,可以在父元素使用vertical-align: middle实现子元素的垂直居中。

注意:vertical-align属性具有继承性,导致父元素内文本也是垂直居中显示的。

水平垂直居中

示例:

方案一:定位 + transform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.wrapper{
width: 400px;
height: 400px;
background-color: #bfa;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

方案二: 结合水平布局方案三,垂直布局方案二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <style>
.wrapper{
width: 400px;
height: 400px;
background-color: #bfa;
display: table-cell;
vertical-align: middle;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
margin: 0 auto;
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

方案三:使用绝对定位盒子的特性

绝对定位盒子的特性: 高宽由其内容撑开

  • 水平方向: left + right + width + padding + margin = 包含块padding区域的尺寸
  • 垂直方向: top + bottom + height + padding + margin = 包含块padding区域的尺寸
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <style>
.wrapper{
width: 400px;
height: 400px;
background-color: #bfa;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

方案四:使用flex进行居中布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.wrapper{
width: 400px;
height: 400px;
background-color: #bfa;
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
</body>

分析:使用flex,水平垂直居中会变得非常容易,默认情况下,align-items: center垂直居中(交叉轴排列方式),justify-content: center水平居中(主轴排列方式)注意:需要考虑浏览器兼容性问题。

N栏布局

两栏布局

其中一列是定宽元素,另一列元素宽度自适应。比如,我们实现左列定宽,右列自适应的布局。

方案一:左边元素浮动,定宽,右边元素设置overflow:hidden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <style>
.box1 {
width: 200px;
height: 300px;
background-color: orange;
float: left;
}
.box2 {
height: 300px;
background-color: #bfa;
overflow: hidden;
}
</style>
<body>
<div class="box1">定宽</div>
<div class="box2">自适应</div>
</body>

分析:右边元素由于设置overflow: hidden开启BFC,与外界隔离,所以能实现效果。

注意overflow: hidden的设置也使得右边元素内容超出隐藏。这里如果不设置overflow: hidden,右边元素的宽度是100%,有一部分被左边浮动元素盖住,不是我们要的结果,虽然看起来没什么区别。

方案二:左边元素浮动,定宽,右边元素设置margin-left

分析:一个最简单的做法,左边元素设置浮动,定宽,右边元素的margin-left设置为左边元素宽度大小。

方案三:flex布局

分析:父容器采用flex布局,左边元素定宽之后,右边元素,因为只有一个,所以flex属性设置为不是0的正值(也就是设置flex-grow),都会占满剩余空间。

三栏布局

这里的三栏布局,主要分三种情况介绍,第一种是普通三列布局,还有两种是比较有名的圣杯布局和双飞翼布局(两者都是实现一个两侧宽度固定,中间宽度自适应的三列布局,区别在于双飞翼布局比起圣杯布局,中间元素会多一个子元素,而左右元素需要定位relative)

普通三栏布局

左中两列定宽,右边一列自适应的布局,实际上和前面的两栏布局是类似的。

-------------本文结束感谢您的阅读-------------