BFC

BFC 全称为 块格式化上下文 (Block Formatting Context) .

使BFC 内部的浮动元素不会到处乱跑.

  • 根元素()
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

圣杯布局和双飞翼布局

  • 使用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
<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 {
          min-width: 550px;
      }
      #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;
      }
      /* 手写 clearfix */
      .clearfix:after {
          content: '';
          display: table;
          clear: both;
      }

双飞翼布局

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
<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>
     <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>

clearfix

.clearfix:after {
content: ‘’;
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}

flex布局

  • flex-direction
  • justift-content
  • align-items
  • flex-wrap nowrap wrap wrap-reverse
  • align-self

画个三点的色子

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    display: flex;
    justify-content: space-between;
}
.item {
    /* 背景色, 大小, 边框等 */
}
.item:nth-child(2) {
    align-self: center;
}
.item:nth-child(3) {
    align-self: flex-end;
}

定位

absolute 和 relative 定位

  • relative 依据自身定位
  • absolute 依据最近一层的定位元素定位
    1. 如果有relative和fixed
      1. body

水平居中

  • inline元素: text-align: center
  • block元素: margin: auto
  • absolute元素: left: 50% + margin-left: 负值
  • absolute: top, left, bottom, right = 0 + margin: auto

垂直居中

  • inline 元素: line-height的值等于height值
  • absolute 元素: top: 50% + margin-top负值
  • absolute 元素: transform(-50%, -50%)
  • absolute 元素: top, left, bottom, right = 0 + margin: auto

line-height如何继承

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    body {
        font-size: 20px;
        line-height: 200%;
    }
    p {
        font-size: 16px;
    }
</style>
<body>
    <p>AAA</p>
</body>
  • 写具体数值,如30px,则继承该值
  • 写比例,如2或1.5,则继承该比例
  • 写百分比,如200%,则继承计算出来的值

响应式

rem

  • px 绝对长度单位
  • em 相对长度单位,相对于父元素,不常用
  • rem 相对长度单位,相对于根元素,常用于响应式布局

响应式布局常用方案

  • media-query,根据不同的屏幕宽度设置根元素font-size
  • rem,基于根元素的相对单位