12-企业级布局实战套路

码路教育 6/20/2022

# 什么是布局

简单来说就是HTML页面的整体结构或骨架，类似于传统的报纸或杂志中的排版；布局不是某个技术内容，而是一种设计思想；CSS知识体系的重中之重，早期以table为主(简单)，后来以技巧性布局为主(难)，现在有flexbox/grid(偏简单)。

# table布局(out了，了解)

父级容器—display: table

子级容器—display:table-cell

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            display: table;
            width: 100%;
            height: 100px;
        }
        .left{
            display: table-cell;
            height: 100px;
            background-color: blue;
        }
        .right{
            display: table-cell;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

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

# float布局

特点:

元素"浮动"
脱离文档流
但不脱离文本流

对自身的影响: 形成"块"(BFC，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素)、位置尽量靠上、位置尽量靠左(右)，无法满足会靠下

对兄弟的影响: 上面贴非float元素、旁边贴float元素、不影响其它块级元素位置、影响其它块级元素内部文本

对父级的影响: 从布局上"消失"、高度塌陷(可以通过overflow:hidden | clearfix)

# float 布局实战

两列布局解决方案(一边固定，另外一边动态变化)

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .left{
            width: 400px;
            height: 300px;
            background-color:gold;
            float: left;
        }
        .right{
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right">ABC</div>
</body>
</html>

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

三列布局解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left {
            width: 200px;
            /* 定宽 */
            height: 300px;
            background-color: #c9394a;
            float: left;
        }

        #center {
            width: 200px;
            /* 定宽 */
            height: 300px;
            background-color: green;
            float: left;
        }

        #right {
            height: 300px;
            background-color: pink;
            margin-left: 400px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

</html>

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

# 清除浮动的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>清除浮动</title>
    <style>
      .clearfix::after {
        content: '';
        display: block;
        clear: both;
      }
      .float {
        float: left;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="clearfix">
      <div class="float" style="background-color: pink;"></div>
      <div class="float" style="background-color: silver;"></div>
    </div>
    <div style="width: 500px; height: 300px; background-color: orange;"></div>
  </body>
</html>

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

# inline-block 布局 (了解)

inline-block 在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。

因为现在使用的是 inline-block 元素，为了方便理解，可以将 inline-block 元素看成是两个文字，文字与文字之间不可能是连在一起的，肯定是有间隙的。

既然知道了是文字的问题，那我们就将父元素 container 的字体大小设置为 0，可是这个时候会发现 left 和 right 这两个单词也没有了，这是因为 left 和 right 元素继承了父级元素的字体大小，这时候我们只需要分别设置 left 和 right 元素的字体大小即可。

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 800px;
        height: 200px;
        font-size: 0;
      }
      .left {
        font-size: 14px;
        background-color: red;
        display: inline-block;
        width: 200px;
        height: 200px;
      }
      .right {
        font-size: 14px;
        background-color: blue;
        display: inline-block;
        width: 500px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
  </body>
</html>

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

# flexbox布局 (opens new window)

布局的传统解决方案，基于盒状模型 (opens new window)，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中 (opens new window)就不容易实现；2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性；任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局; webkit内核的浏览器，必须加上-webkit-前缀。

弹性盒子
盒子本来就是并列的
指定宽度即可

# 水平竖直居中 flex 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

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

# 两列布局flex的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
            width: 100%;
            height: 200px;
            display: flex;
        }
        .left{
            background-color: gold;
            width: 200px;
            height: 100%;
        }
        .right{
            flex: 1;
            background-color: blue;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 
        一侧固定，另一个侧自适应
     -->
     <div class="container">
         <div class="left">
             左
         </div>
         <div class="right">
            右
        </div>
     </div>
</body>
</html>

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

# Grid布局（了解） (opens new window)

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的CSS框架达到的效果，现在浏览器内置了;Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比Flex布局强大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* https://blog.csdn.net/ancartoon/article/details/121514585 */
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            display: grid;
            grid-template-columns: repeat(3,1fr);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>
</html>

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

# columns布局（了解） (opens new window)

CSS属性 columns 用来设置元素的列宽和列数。

例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{
            columns: 3 auto;
        }
    </style>
</head>
<body>
    <div class="content">
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 水平居中

文本 .parent{text-align:center}
单个块级元素 .son{width:1000px(定宽)，margin:0 auto}
多个块级元素 .parent{text-align:center} .son{display:inline-block}
使用绝对定位: 父相子绝，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的;
任意个元素(flex): #parent{display: flex; justify-content: center; }

# 文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">我是文本</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 单个块级元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
        }
        .child{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
    </div>
</body>
</html>

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

# 多个块级元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
            text-align: center;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
        <div class="child">居中布局</div>
        <div class="child">居中布局</div>
    </div>
</body>
</html>

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

# 使用绝对定位（已知父子宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 800px;
            height: 200px;
            background-color: gold;
        }
        .child{
            position: absolute;
            left: 300px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

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

# 父知道宽高，子不知道（使用transform）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 800px;
            height: 200px;
            background-color: gold;
        }
        .child{
            position: absolute;
            /* 50%是指父宽度的50% */
            left: 50%;
            height: 200px;
            background-color: skyblue;
            /* 50%是指父宽度的50% 不行 */
            /* margin-left: -50%; */

            /* -50% 是子宽度的50% */
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">123456789</div>
    </div>
</body>
</html>

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

# 水平竖直居中布局解决方案-flex+justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
            display: flex;
            justify-content: center;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
    </div>
</body>
</html>

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

# 竖直居中方法

单行文本 .parent{height:150px;line-height:150px;} 高度等于行高的值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        Hello，CSS~
    </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

多行文本 .parent{height:150px;line-height:30px;} 行高等于height/行数；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50px;
            height: 150px;
            background-color: gold;
            text-align: center;
            margin: 0 auto;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        Hello Hello Hello
    </div>
</body>
</html>

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

图片元素: .parent{height:200px;line-height:200px;font-size:0;} .son{vertical-align:middle}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            text-align: center;
            line-height: 200px;
        }
        /* 让一张图片垂直居中：父中写 line-height=height; 子中写vertical-align: middle; */
        .son{
            /* vertical-align设置垂直对齐 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <img width="100px" class="son" src="./images/02.webp" alt="">
    </div>
</body>
</html>

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

单个块级元素:
- 使用table-cell实现: .parent{display:table-cell;vertical-align:middle}
- 使用position实现: 子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到垂直居中的目的；
- 利用flex实现 .parent{display:flex; align-items: center;}
任意个元素：.parent{display:flex; align-items: center;} 或者 .parent{display:flex;flex-direction: column;justify-content: center;}

<!-- flex -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            display: flex;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

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

<!-- table-cell -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            /* 两个属性都要写 */
            display: table-cell;
            vertical-align: middle;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

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

<!-- 定位 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            position: relative;
            height: 200px;
            background-color: gold;
        }
        .son{
            position: absolute;
            top: 50%;
            /* margin-top: -50px; */
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

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

<!-- 多个盒子 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 600px;
            background-color: gold;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .son{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

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

# 居中布局(水平+垂直)

table + margin实现水平方向居中，table-cell + vertical-align实现垂直方向居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 1000px;
            height: 600px;
            background-color: gold;
            display: table-cell;
            vertical-align: middle;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

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

postion + transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 1000px;
            height: 600px;
            background-color: gold;
        }
        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

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

flex + align-items + justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 1000px;
            height: 600px;
            background-color: gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

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

# 圣杯布局

圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是指三行三列布局；圣杯布局核心：主要是实现中间主体部分中的左右定宽+中间自适应的布局效果；

这里为什么center 要放在前面呢？这样做并不是说为了让主内容先渲染出来，而是说在样式加载慢或无样式的时候先向用户呈现主要内容。但最主要的还是因为SEO和无障碍方面做出的考虑。

<!-- 使用浮动实现圣杯布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            /* 新的盒子模型 */
            box-sizing: border-box;
        }
        .box{
            height: 300px;
            padding: 0 300px;
        }
        .left, .center, .right{
            height: 300px;
            float: left;
        }
        .left, .right{
            width: 300px;
        }
        .center{
            width: 100%;
            background-color: gold;
        }
        .left{
            background-color: red;
            /* % 是相对于父的宽的% */
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        .right{
            background-color: blue;
            margin-left: -300px;
            position: relative;
            right: -300px
        }
    </style>
</head>
<body>
    <!-- 
        圣杯布局：三行三列    左右定宽   中间自适应
        特点：center写在前面
     -->
    <div class="box">
        <div class="center">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

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

<!-- 使用flex实现圣杯布局 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            display: flex;
            flex-direction: column;
            /* 100vh表示整个页面的高度 视口高度的100% */
            height: 100vh;
        }

        .content {
            flex: 1;
            display: flex;
        }

        .content-left {
            background: blue;
            /* flex  第一个参数是放大因了了 第二个参数是缩小因子  第三个参数是flex-base */
            flex: 0 0 100px;
        }
        .content-mid {
            background: yellow;
            flex: 1;
        }
        .content-right {
            background: red;
            flex: 0 0 100px;
        }
    </style>
</head>

<body>
    <!-- header标签，section标签，footer标签是有语义化的div -->
    <div class="container">
        <header>
            头部
        </header>
        <section class="content">
            <div class="content-left">左左左左左左</div>
            <div class="content-mid">中中中中中中</div>
            <div class="content-right">右右右右右右</div>
        </section>
        <footer>
            底部
        </footer>
    </div>
</body>

</html>

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

# 双飞翼布局

双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。主要是优化了圣杯布局中开启定位的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 500px;
        }
        .left, .right, .center{
            float: left;
        }
        .left, .right{
            width: 300px;
            height: 300px;
        }
        .center{
            width: 100%;
            background-color: green;
        }
        .left{
            background-color: red;
            margin-left: -100%;
        }
        .right{
            background-color: blue;
            margin-left: -300px;
        }
        .inner{
            margin-left: 300px;
            margin-right: 300px;
            background-color: pink;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="center">
            <div class="inner">中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

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

# 全屏布局

全屏布局就是指HTML页面铺满整个浏览器窗口，并且没有滚动条。而且还可以跟着浏览器的大小变化而变化；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        header{
            height: 100px;
            background-color: gold;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        footer{
            height: 100px;
            background-color: pink;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .content{
            background-color: blue;
            position: fixed;
            top: 100px;
            bottom: 100px;
            left: 0;
            right: 0;
        }
        .content .left{
            width: 300px;
            height: 100%;
            background-color: red;
            position: fixed;
            top: 100px;
            bottom: 100px;
            left: 0;
        }
        .content .right{
            background-color: skyblue;
            position: fixed;
            left: 300px;
            right: 0px;
            bottom: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <header>Header</header>
    <div class="content">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <footer>Footer</footer>
</body>
</html>

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

11-Flex布局 13-CSS3