1.盒模型

（1）.什么是CSS 盒模型?

块级盒子（Block box）和内联盒子（inline box）完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。

（2）块级盒子的组成

CSS中组成一个块级盒子需要:

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

（3）标准盒模型

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。

margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

(4)替代（IE）盒模型

使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。codepen

2.BFC

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

根元素
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible

position值（5个）：static | relative | absolute | sticky | fixed

应用:

阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

3.层叠上下文

个人理解，元素渲染出来后层级（前后）顺序，参考z-index

触发条件

根层叠上下文(html)
position
css3属性
flex
transform
opacity
filter
will-change
-webkit-overflow-scrolling

4.居中布局

（1）水平居中

块级元素：margin:0 auto
行内元素：text-align
absolute + transform
flex + justify-content: center 例子

（2）垂直居中

line-height:height
absolute + transform
flex + align-items: center
table

（3）水平垂直居中

absolute + transform
flex + justify-content + align-items

absolute + transform垂直居中原理：

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


.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

实现原理：

设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。
然后设置 .content 元素为绝对定位 position: absolute; 并设置 top: 50%;、left: 50%;，这样.content 元素的左上角就位于 .main 元素的中心了。
最后设置 .content 元素 transform: translate(-50%, -50%); 将自身左移及上移宽高的一半，这样 .content 元素的中心处于 .main 元素的中心处，自然就实现了居中效果。
这种方法的好处就是不需要固定 .content 元素的宽高。

5.选择器优先级

!important > 内联样式 > ID选择器 > class选择器 > 标签选择器 > 通配符选择器 > 继承 > 默认

6.link 与 @import 的区别

- link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
@import需要 IE5 以上才能使用
link可以使用 js 动态引入，@import不行

7.CSS动画

transition
animation / keyframes

CSS基础

目录