# CSS基础知识

# css盒模型

# css选择器

# css哪些属性可以继承

# css的伪类和伪元素有哪些

# 水平垂直居中的方案

# position属性

# relative：

相对于正常位置进行定位

# absolute：

相对于第一个position的值是 relative,absolute, fixed,sticky，会脱离文档流

# fixed

相对于viewport 视口，会脱离文档流。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

# sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。



在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

<style>
* {
  box-sizing: border-box;
}

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
  height: 500px;
}

dd + dd {
  border-top: 1px solid #CCC
}
</style>
<body>
<div>
  <dl>
    <dt>A</dt>
    <dd>AAAAAAAAAAA</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>CCCCCCCCCC</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>EEEEEEEEEEE</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>TTTTTTTTTT</dd>
  </dl>
</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
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

# BFC是啥

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC 是Block Formatting Context 的简写，翻译为块级格式上下文。它会创建一个特殊的区域，在这个区域中，只有block box 参与布局。而BFC的一套特点和规则就规定了在这个特殊的区域中如何尽心布局，如何进行定位，区域内元素的相互关系和相互作用。这个特殊的区域不受外界影响。上面提到了block box 的概念，block box 是指 display属性为 block、list-item、table 的元素。相应地，我们有inline block ，它是指 display 属性为inline,inline,inline-table 的元素。css3 规范中又加入了 run in box。

# 如何形成BFC

根元素（<html>）
浮动元素（元素的 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 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）

# BFC的规则

内部的box将会独占宽度，且在垂直方向，一个接一个排列 box垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻box的margin 会出现边距折叠现象每个box水平方向上左边缘，与BFC左边缘相对齐，即使存在浮动也是如此 BFC 区域不会与浮动元素重叠，而是会依次排列 BFC区域内是一个独立的渲染容器，容器内元素和BFC区域外元素不会形成任何干扰浮动元素的高度也参与到BFC高度的计算当中

# CSS实现常见动画，如渐变、移动、旋转、缩放

# PostCSS、 Sass、 Less的异同，以及使用配置，至少掌握一种

# 掌握一套完整的响应式布局方案

# BEM (opens new window)

# 常用的CSS命名规范大总结 (opens new window)

# 网易NEC 命名规则

布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。

CSS内部的分类及其顺序

重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！

统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式！

布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！

模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！

元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！

功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！

皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！

状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）。

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

# 回流与重绘 (opens new window)

# 回流

我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。

# 重绘

我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。

# 怎样会引起回流

删除或添加可见的dom
元素的位置发生变化
元素的尺寸（margin padding border width height）
内容发生变化
浏览器窗口变化
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect

# 怎样会引起重绘

元素的外观改变
visibility: visible;
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘

# 优化

# 双飞翼与圣杯

# 双飞翼

DETAILS

<div class="双飞翼">
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .双飞翼{
        min-width: 500px;
      }
      #container2 {
        width: 100%;
      }
      .column2 {
        float: left;
      }
      #container2 #center2 {
        margin-left: 200px;
        margin-right: 150px;
        background: #000;
        color: blueviolet;
      }
      #left2 {
        width: 200px; 
        background: red;
        margin-left: -100%;
    margin-top:5px;

      }
      #right2 {
        width: 150px; 
        background: blue;
        margin-left: -150px;
    margin-top:5px;

      }
    </style>
    <div id="container2"  class="column2">
      <div id="center2">内容</div>
    </div>
    <div id="left2" class="column2">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left </div>
    <div id="right2" class="column2">right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right</div>
  </div>

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

# 圣杯

DETAILS

<div id="flex">
    <style>
      #flex {
          display: flex;
          width: 100%;
      }
      #flex #center {
          flex: 1;
          background: #000;
          color: red;
      }
      #flex #left {
          flex: 0 0 200px;
          order: -1;
          background: burlywood;
      }
      #flex #right {
          flex: 0 0 150px;
          background: rebeccapurple;
      }
    </style>
    <div id="flex">
      <div id="center">center</div>
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
  </div>

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

<style>
    #container1 {
      padding-left: 200px; 
      padding-right: 150px;
      min-width: 550px;
    }
    #container1 .column {
      float: left;
      height: 100px;
    }
    #container1  #center{
      background: green;
      width: 100%;
      color: #000;
    }
    #container1 #left{
      width: 200px;
      margin-left: -100%;
      background: red;
      position: relative;
      right: 200px;
      top: 10px;
    }
    #container1 #right{
      width: 150px;
      background: blue;
      margin-right: -150px; 
      margin-top: 10px;

    }
    
  </style>
  <div id="container1">

  <div id="center" class="column"> 
    中间容器width:100%,
    通过padding流出左右的位置，
    让中间和左右的元素都浮动。
    左边元素margin-left:100%；left自己的宽度，
    右边元素margin-right:自己的宽度</div>
  <div id="left" class="column">
    left
  </div>
  <div id="right" class="column">
   right
    </div>
  </div>

</div>

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

# 局中布局

DETAILS

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

<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>CSS 水平垂直居中</title>
 <style>
   .box {
     width: 358px;
     height: 358px;
     border: 2px solid blue;
     margin: 0 auto;
   }

   .main {
     width: 156px;
     height: 156px;
     background: red;
   }
 </style>
</head>

<body>
 <div class="box1 box">
   <style>
     .box1 {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
     }
   </style>
   <div class="main">
     内容
   </div>
 </div>
 <div class="box2 box">
   <style>
     .box2 .main {
       margin: 0 auto;
       transform: translateY(calc((358px - 156px)/2)); 
     }
   </style>
   <div class="main">
     内容
   </div>
 </div>

 <div class="box3 box">
   <style>
      .box3 {
        position: relative;
      }
     .box3 .main {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%)
     }
   </style>
   <div class="main">
     内容
   </div>
 </div>
 <div class="box4 box">
     <style>
        .box4 {
          position: relative;
        }
       .box4 .main {
         position: absolute;
         left: 50%;
         top: 50%;
         margin-top: -78px;
         margin-left: -78px;
       }
     </style>
     <div class="main">
       内容
     </div>
 </div>
 <style>
     .box5{
       width: 300px;
       height: 300px;
       background: blue;
       margin: 0 auto;
       display: flex;
     }
     .box5 .child{
       width: 150px;
       height: 150px;
       background: red;
       margin:auto;
     }
 </style>
 <div class="box5">
   <div class="child">
       测试position和 margin
   </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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

# 两栏布局

flex 布局

DETAILS

<title>两栏布局</title>
<style>
    .container{
        display: flex;
    }
    .left{
        width: 200px;
        height: 100px;
        background: red;
    }
    .right{
        flex:1;
        height:100px;
        background: green;
    }
</style>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

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

相对定位和绝对定位

DETAILS

<title>两栏布局</title>
<style>
    .container{
        position: relative;
    }
   
    .left{
        width: 200px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0;
        top: 10px;
    }
    .right{
        height:100px;
        background: green;
        margin-left: 200px;
    }
</style>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

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

float布局

DETAILS

<title>两栏布局</title>
<style>
    .container{
        display: flow-root;
    }
   
    .left{
        width: 200px;
        height: 100px;
        background: red;
        float: left;
        margin-top: 10px;
    }
    .right{
        height:100px;
        background: green;
        overflow: auto;
    }
</style>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

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

# 三栏布局

flex布局

DETAILS

<div class="box6">
  <style>
    .box6 {
      display: flex;
    }
    .box6 .left, .box6 .right {
      width: 300px;
      height: 200px;
    }
    .box6 .middle{
      flex: 1;
      height: 200px;
      background: red;
    }
  </style>
  <div class='left'>left</div>
  <div class='middle'>middle</div>
  <div class='right'>right</div>
</div>

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

定位布局

DETAILS


<style>
    .container{
        position: relative;
    }
    .left,.right{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 10px;
    }
    .left{
        left: 0;
        background: #000;
    }
    .right{
        right: 0;

        background: #f00;
    }
    .middle{
        margin: 0 200px;
        height: 100px;
        background: yellow;

    }
</style>
<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

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

float布局

DETAILS

<style>
     * {
      margin: 0;
      padding: 0;
    }
    .container{
        display: flow-root;
    }
    .left,
    .right{
        width: 200px;
        height: 200px;
        margin-top: 10px;
    }
    .left{
        background: #000;
        float: left;
    }
    .right{
        float: right;
        background: #f00;
    }
    .middle{
        height: 100px;
        background: yellow;
        overflow: auto;
    }
</style>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

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

← Git 概念 CSS3 图形绘制 →