CSS布局（长期更新）
css15 分钟 读完 (大约 2297 个字)

CSS布局（长期更新）

长期总结css布局相关内容。

居中布局

水平居中布局

  1. inline-block + text-align

通过设置内容元素为inline-block，并且给父元素设置text-align: center;使内容元素具有文本对齐居中的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container {
        width: 100%;
        height: 200px;
        background-color: blue;
        text-align: center;
    }

    .content {
        width: 200px;
        height: 200px;
        background-color: red;
        display: inline-block;
    }
</style>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

  1. absolute + transform

父元素设置relative，子元素设置absolute并left: 50%。这个时候再将自身transform: translateX(-50%);完成居中。

这里使用到transform属性，这个属性为CSS3属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .container {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: blue;
    }

    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

  1. block + margin

对子元素设置display: block,margin: 0 auto;就可以水平居中。

table也可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container {
        width: 100%;
        height: 200px;
        background-color: blue;
    }

    .content {
        width: 200px;
        height: 200px;
        background-color: red;
        display: table;
        margin: 0 auto;
    }
</style>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

垂直居中布局

  1. 定位 + transform

容器设置position: relative;，内容设置position: absolute;并且top: 50%;再transform: translateY(-50%);完成垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .container {
        position: relative;
        width: 200px;
        height: 600px;
        background-color: blue;
    }

    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

  1. display: table-cell + vertical-align

table-cell的元素有td元素的行为，其子元素布局类似文本元素。

故而父元素display: table-cell;+vertical-align: middle;即可让其子元素垂直居中。

注意父元素的所有子元素都会继承居中显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .container {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: blue;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

水平垂直居中布局

  1. 定位 + transform

也就是上面两个的集合。

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>
    .container {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: blue;
    }

    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

  1. 水平block + margin，垂直display: table-cell + vertical-align
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .container {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: blue;
    }
    .content {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

使用flex居中布局

水平居中：justify-content: center;

垂直居中：align-items: center;

需要考虑浏览器兼容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1200px;
        height: 800px;
        background-color: blue;
    }

    .content {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>

多列布局

两列布局

这里是一列定宽，一列自适应。

  1. 左列左浮动，右列设置margin-left
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .left,
    .right {
        height: 600px;
    }

    .left {
        width: 400px;
        background-color: blue;
        float: left;
    }

    .right {
        background-color: red;
        margin-left: 400px;
    }
</style>

<body>
    <div class="left">定宽元素</div>
    <div class="right">自适应元素</div>
</body>

  1. 左列左浮动，右列overflow: hidden

右列设置overflow: hidden;开启BFC，与外界隔离，所以能实现效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .left,
    .right {
        height: 600px;
    }

    .left {
        width: 400px;
        background-color: blue;
        float: left;
    }

    .right {
        background-color: red;
        overflow: hidden;
    }
</style>

<body>
    <div class="left">定宽元素</div>
    <div class="right">自适应元素</div>
</body>

  1. 父元素display: table，左右列display: table-cell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
    .container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    
    .left,
    .right {
        display: table-cell;
        height: 600px;
    }
    
    .left {
        width: 400px;
        background-color: blue;
    }
    
    .right {
        background-color: red;
    }
</style>

<body>
    <div class="container">
        <div class="left">定宽元素</div>
        <div class="right">自适应元素</div>
    </div>
</body>

  1. flex两列布局

父元素设置为flex，左列定宽，右列flex: 1;。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .container {
        display: flex;
        height: 600px;
    }

    .left {
        background-color: blue;
        width: 400px;
    }

    .right {
        flex: 1;
        background-color: red;
    }
</style>

<body>
    <div class="container">
        <div class="left">定宽</div>
        <div class="right">自适应</div>
    </div>
</body>

三列布局

普通三列布局

左中定宽，右边自适应。

  1. 定宽 + overflow: hidden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
    .left,
    .center,
    .right {
        height: 600px;
    }

    .left {
        width: 400px;
        background-color: blue;
        float: left;
    }

    .center {
        width: 400px;
        background-color: yellow;
        float: left;
    }

    .right {
        background-color: red;
        overflow: hidden;
    }
</style>

<body>
    <div class="left">定宽</div>
    <div class="center">定宽</div>
    <div class="right">自适应</div>
</body>

  1. flex三列布局

与两列flex相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
    .container {
        display: flex;
        height: 600px;
    }

    .left {
        width: 400px;
        background-color: blue;
    }

    .center {
        width: 400px;
        background-color: yellow;
    }

    .right {
        flex: 1;
        background-color: red;
    }
</style>

<body>
    <div class="container">
        <div class="left">定宽</div>
        <div class="center">定宽</div>
        <div class="right">自适应</div>
    </div>
</body>

圣杯布局

两侧定宽，中间自适应的三列布局。

  1. 左边定宽左浮动，右边定宽右浮动，中间设置margin

需要将右边元素放在中间元素的前面，否则右边元素会下沉。但是不利于中间元素的SEO。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
    .left,
    .center,
    .right {
        height: 600px;
    }

    .left {
        width: 400px;
        background-color: blue;
        float: left;
    }

    .center {
        background-color: yellow;
        margin-left: 400px;
        margin-right: 400px;
    }

    .right {
        width: 400px;
        background-color: red;
        float: right;
    }
</style>

<body>
    <div class="left">定宽</div>
    <div class="right">定宽</div>
    <div class="center">自适应</div>
</body>

  1. 父元素设置margin，左中右都浮动，利用定位和margin布局

center在最前面，有利于SEO。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
    .container {
        /* margin-left对应左边元素left的宽度，margin-right对应右边元素right的宽度 */
        margin-left: 400px;
        margin-right: 400px;
    }

    .left,
    .center,
    .right {
        height: 600px;
        float: left;
    }

    .left {
        width: 400px;
        background-color: blue;
        position: relative;
        /* 为了让left元素从当前行移动到第一行同一位置*/
        margin-left: -100%;
        /* 移动到中间元素左侧正确位置 */
        left: -400px;
    }

    .center {
        width: 100%;
        background-color: yellow;
    }

    .right {
        width: 400px;
        background-color: red;
        position: relative;
        /* 为了让left元素从当前行移动到上一行*/
        margin-left: -400px;
        right: -400px;
    }
</style>

<body>
    <div class="container">
        <div class="center">自适应</div>
        <div class="left">定宽</div>
        <div class="right">定宽</div>
    </div>
</body>

双飞翼布局

左右定宽，中间自适应。

中间元素增加子元素用来放置内容。

  1. 中间元素设置margin，左中右设置浮动，左右margin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style>
    .left,
    .center,
    .right {
        height: 600px;
        float: left;
    }

    .left {
        width: 400px;
        background-color: aqua;
        /* 为了让l元素从当前行移动到第一行同一位置*/
        margin-left: -100%;
    }

    .center {
        width: 100%;
        background-color: blue;
    }

    .i {
        height: 600px;
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }

    .right {
        width: 400px;
        background-color: brown;
        /* 为了让r元素移动到第一行*/
        margin-left: -400px;
    }
</style>

<body>
    <div class="center">
        <div class="i">自适应</div>
    </div>
    <div class="left">定宽</div>
    <div class="right">定宽</div>
</body>

  1. flex三列布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
    .container {
        display: flex;
        height: 600px;
    }

    .left {
        width: 400px;
        background-color: blue;
    }

    .center {
        flex: 1;
        background-color: red;
    }

    .right {
        width: 400px;
        background-color: yellow;
    }
</style>

<body>
    <div class="container">
        <div class="left">定宽</div>
        <div class="center">自适应</div>
        <div class="right">定宽</div>
    </div>
</body>

多列等分布局

  1. 浮动 + 百分数进行多列等分布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
    .col {
        float: left;
        width: 20%;
        height: 300px;
    }

    .col1 {
        background-color: #111;
    }

    .col2 {
        background-color: #222;
    }

    .col3 {
        background-color: #333;
    }

    .col4 {
        background-color: #444;
    }

    .col5 {
        background-color: #555;
    }
</style>

<body>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

  1. table多列等分布局

父元素display: table;，设置布局行为table-layout: fixed，指定每个表格等宽。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
    .container {
        display: table;
        /* 列宽由表格宽度和列宽度设定 */
        table-layout: fixed;
        width: 100%;
    }

    .col {
        display: table-cell;
        height: 300px;
    }

    .col1 {
        background-color: #111;
    }

    .col2 {
        background-color: #222;
    }

    .col3 {
        background-color: #333;
    }

    .col4 {
        background-color: #444;
    }

    .col5 {
        background-color: #555;
    }
</style>

<body>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

  1. column多列等分布局

指定内容区域为5列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style>
    .container {
        /* 指定列数 */
        column-count: 5;
        /* 指定列与列之间的间隙，默认1em */
        column-gap: 0;
    }

    .col {
        height: 300px;
    }

    .col1 {
        background-color: #111;
    }

    .col2 {
        background-color: #222;
    }

    .col3 {
        background-color: #333;
    }

    .col4 {
        background-color: #444;
    }

    .col5 {
        background-color: #555;
    }
</style>

<body>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

  1. flex多列等分布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style>
    .container {
        display: flex;
    }

    .col {
        height: 300px;
        flex: 1;
    }

    .col1 {
        background-color: #111;
    }

    .col2 {
        background-color: #222;
    }

    .col3 {
        background-color: #333;
    }

    .col4 {
        background-color: #444;
    }

    .col5 {
        background-color: #555;
    }
</style>

<body>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

</html>

多列等高布局

意思是每一列高度相等。

  1. table多列等高布局

父元素设置为table，子元素table-cell，这样就使得子元素等高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
    .container {
        display: table;
    }

    .col {
        display: table-cell;
        width: 20%;
    }

    .col1 {
        background-color: #111;
    }

    .col2 {
        background-color: #222;
    }

    .col3 {
        background-color: #333;
    }

    .col4 {
        background-color: #444;
    }

    .col5 {
        background-color: #555;
    }
</style>

<body>
    <div class="container">
        <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div class="col col3">
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div class="col col4"></div>
        <div class="col col5">
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        </div>
    </div>
</body>

  1. flex多列等高布局

align-items设置为auto或者不设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style>
    .container {
        display: flex;
    }

    .col {
        flex: 1;
    }

    .col1 {
        background-color: #111;
    }

    .col2 {
        background-color: #222;
    }

    .col3 {
        background-color: #333;
    }

    .col4 {
        background-color: #444;
    }

    .col5 {
        background-color: #555;
    }
</style>

<body>
    <div class="container">
        <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div class="col col3">
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
        <div class="col col4"></div>
        <div class="col col5">
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        </div>
    </div>
</body>

全屏布局

全屏布局就是头部、内容区域、底部组成的。

这里采用头部底部fixed，中间内容区域两列布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<style>
    html,
    body {
        margin: 0;
        overflow: hidden;
    }

    header {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        height: 100px;
        background-color: salmon;
    }

    .container {
        position: fixed;
        left: 0;
        right: 0;
        top: 100px;
        bottom: 100px;
        overflow: auto;
        background-color: palevioletred;
    }

    .container .left {
        width: 400px;
        /* height: 100%; */
        position: fixed;
        left: 0;
        top: 100px;
        bottom: 100px;
        background-color: greenyellow;
    }

    .container .right {
        position: fixed;
        left: 400px;
        right: 0;
        top: 100px;
        bottom: 100px;
        background-color: blueviolet;
    }

    footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100px;
        background-color: goldenrod;
    }
</style>

<body>
	<header></header>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
	<footer></footer>
</body>

持续挖掘中…

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

二分查找1
二叉树1
二维数组1
动态规划2
双指针1
字符串1
排序1
数学1
数组3
树1
递归2
链表2

订阅更新

×