面试题-css布局2

主要有以下问题：

BFC 理解和应用
float 布局的问题，以及 clearfix
flex 画色子

问题一：BFC 理解与应用

BFC，Block Formatting Context，块级格式化上下文
是页面上用于渲染 css 的一个区域，相当于一个小型的布局，块级元素和浮动元素会根据这块区域进行布局，内部元素的渲染不会影响边界以外的元素

形成 BFC 的常见元素

float 不是 none
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex inline-block 等

BFC 的常见应用

清除浮动

 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
      .container {
        background-color: #f1f1f1;
      }
      .left {
        float: left;
      }
      .bfc {
        overflow: hidden; /* 触发元素 BFC */
      }
    </style>
  </head>
  <body>
    <div class="container bfc">
      <img
        src="https://www.imooc.com/static/img/index/logo.png"
        class="left"
        style="magin-right: 10px;"
      />
      <p class="bfc">某一段文字……</p>
    </div>
  </body>
</html>

问题二：float 布局

如何实现圣杯布局和双飞翼布局（PC 经典布局场景）
手写 clearfix

圣杯布局和双飞翼布局的目的

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于 PC 网页

圣杯布局和双飞翼布局的总结

使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用 padding 一个用 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>圣杯布局</title>
    <style type="text/css">
      body {
        min-width: 550px;
      }
      #header {
        text-align: center;
        background-color: #f1f1f1;
      }

      #container {
        padding-left: 200px;
        padding-right: 150px;
      }
      #container .column {
        float: left;
      }

      #center {
        background-color: #ccc;
        width: 100%;
      }
      #left {
        position: relative;
        background-color: yellow;
        width: 200px;
        margin-left: -100%;
        right: 200px;
      }
      #right {
        background-color: red;
        width: 150px;
        margin-right: -150px;
      }

      #footer {
        text-align: center;
        background-color: #f1f1f1;
      }

      /* 手写 clearfix */
      .clearfix:after {
        content: "";
        display: table;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
      <div id="center" class="column">this is center</div>
      <div id="left" class="column">this is left</div>
      <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style type="text/css">
      body {
        min-width: 550px;
      }
      .col {
        float: left;
      }

      #main {
        width: 100%;
        height: 200px;
        background-color: #ccc;
      }
      #main-wrap {
        margin: 0 190px 0 190px;
      }

      #left {
        width: 190px;
        height: 200px;
        background-color: #0000ff;
        margin-left: -100%;
      }
      #right {
        width: 190px;
        height: 200px;
        background-color: #ff0000;
        margin-left: -190px;
      }
    </style>
  </head>
  <body>
    <div id="main" class="col">
      <div id="main-wrap">this is main</div>
    </div>
    <div id="left" class="col">this is left</div>
    <div id="right" class="col">this is right</div>
  </body>
</html>

问题三：flex 布局

flex 实现一个三点的色子

常见语法回顾

flex-direction 主轴方向横向或者纵向
justify-content 主轴对齐方式左边、中间、右边对齐
align-items 交叉轴对齐方式
flex-wrap 是否换行
align-self 子元素交叉轴对齐方式开始对齐，居中对齐，结尾对齐

 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>flex 画骰子</title>
    <style type="text/css">
      .box {
        width: 200px;
        height: 200px;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 20px;

        display: flex;
        justify-content: space-between;
      }
      .item {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
      }
      .item:nth-child(2) {
        align-self: center;
      }
      .item:nth-child(3) {
        align-self: flex-end;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </body>
</html>