1、CSS3的新特性
1、新添加了盒子模型，box-sizing属性来指定盒子模型，有两个：border-box（默认）、content-box，borde-box的大小为wdith，content-box的盒子大小为width+padding+border。
2、新添加了选择器，如伪类选择器、伪元素选择器等。
3、添加了布局，flex弹性盒子布局和grid网格布局。
4、新添加了transform转换效果，translate位移、scale缩放、rotate旋转
5、新添加了transition过渡效果，transition:css属性 花费时间 效果曲线（默认为ease）延迟时间（默认为0）
6、新添加了animation动画效果@keyframes myfirst{from{} to{}}
2、CSS选择器及优先级
CSS常见的选择器有id选择器（#id）、类选择器（.class）、标签选择器（h1）、通配符选择器（*）、子选择器（ul>li）、后代选择器（div p）、伪类选择器（a:hover）、伪元素选择器（a::before）
CSS选择器优先级：！important>内联样式（1000）>id选择器（100）>类选择器（10）>标签选择器（1）>通配符选择器（0）
权重相加判断优先级，如果权重相同就选最后的那个样式为准
可以继承的样式有字体、颜色，不可以继承的有宽高、内外边距
3、Flex弹性盒子布局
flex弹性盒子布局是ES6新添加的网页布局，它的作用就是可以随着页面的大小改变自适应页面布局。
flex的常见属性：
1、flex-direction：指定flex主轴的方向，默认是row（水平方向）。column是垂直方向。
2、justify-content：主轴方向上的元素对齐方式，默认为flex-start，起始位置对齐。
3、align-items：侧轴方向上的元素对齐方式，默认为stretch，高度占满整个容器。center：垂直居中。
4、flex-warp：是否换行，默认nowrap不换行，可能会溢出。wrap换行，溢出的Flex子项会自动放到下一行。
5、aligin-content：多行的对齐方式，默认为stretch，高度占满整个容器。
6、align-self：：单独指定某flex子项的对齐方式
7、flex：复合属性，flex:flex-grow(扩展比率),flex-shrink((伸缩比率),flex-basis(伸缩基准值)。常用flex:1，就元素平均布局
4、BFC（块级格式化上下文）
BFC是Block-Formatting-Context的简写，叫块级格式化上下文。
简单来说，BFC是一个完全独立的空间，它的作用就是不让空间内部的元素影响到外面的布局。
如何触发BFC？
1、overfloew:hidden，只要不为visible
2、float:left/right，只要不为none
3、postion:absolute/fixed
4、display:flex/inline-block
BFC解决的问题：
1、防止float脱离文档流，高度塌陷。
2、解决margain边框重叠
3、防止元素被浮动元素遮盖
5、postion定位
1、static（默认为静止的），没有定位
2、relative（相对定位），相对于自身的位置定位
3、postion（绝对定位），相对于相近的relative父元素进行定位。
4、fixed（固定定位），相对于浏览器窗口进行固定定位，适合于顶部导航栏。
aboslute与relative的区别：
(1)realtive不脱离文档流，absolute脱离文档流。所以realtive适合做absolute的容器
(2)relative只有两个值（left、right、top、bottom）如果同时存在，left会取代right，top取代bottom。而absolute可以取四个值。
6、display元素类型属性
1、inline（默认值）：转为内联元素，不独立成行，不可以设置宽高，只能由字体或图片大小来撑起。
2、block：转为块级元素，独立成行，可设置宽高，内外边距。
3、inline-block：内联块级元素，不独立成行，但可以设置宽高，内外边距。
4、none：隐藏元素，不占位。跟visibility:hidden不一样，它是占位的。
5、flex：转为弹性布局。
6、grid：转为网格布局。
7、display:none与visibility:hidden的区别
它们的相同点都是隐藏元素
不同点有两个：
1、display:none，它是不占位的。visibility:hidden是占位的。因为display:none，它第一次是不绘制的，第二次才绘制，已经没有位置了，所以不占位。visibility:hidden第一次就绘制了，所以占位。
2、display:none，触发回流和重绘。visibility:hidden触发重绘。
回流就是：修改盒子大小或者位置，就会触发回流。
重绘就是：修改元素的字体大小、颜色，就会触发重绘。
触发回流一定会触发重绘，而触发重绘不一定会触发回流。
因为浏览器渲染的过程就是将HTML解析器解析成JS解析器+DOM+CSS解析器，
然后下一步render（把DOM和CSSDOM结合在一起），
然后下一步layout（㮂计算确定DOM的位置），只要你修改的盒子大小或位置，就会触发回流。
最后一步就是渲染到页面上，只要你修改字体大小或颜色，就会触发重绘。
所以触发回流一定会触发重绘，而触发重绘不一定会触发回流。
所以display:none，不占位，修改了盒子位置，触发回流，然后下一步触发重绘。而visibility:hidden占位，没有触发回流，只是渲染，触发了重绘。
8、伪类和伪元素的区别
- 伪类就是在已有的元素的某个状态中，为其添加样式。LVHA
- 伪元素就是创建一些不存在于DOM文档树中的元素，为其添加样式。
- 区别：
- 1、伪类存在于DOM树中，而伪元素不存在于DOM树中
- 2、声明区分，伪类用一个分号，而伪元素用两个分号
- 3、伪类可以同时使用多个，而伪元素只能同时使用一个
9、CSS元素单位
- 1、px：像素单位
- 2、em：相对于父元素，进行伸缩
- 3、rem：相对于根元素（HTML），进行伸缩
- 4、vw：相对于浏览器的宽度，默认为100vw
- 5、vh：相对于浏览器的高度，默认为100vh
- 6、vm：相对于浏览器的高度/宽度，看哪个最小
10、垂直居中的方法
1、flex布局：justify-content：主轴（水平方向）居中，align-items：垂直方向居中
2、父元素定位为relative，子元素为absolute，left:50%，top:50%,transform:translate(-50%,-50%);
11、清除浮动的方法
1、在浮动元素后面添加一个空的标签，属性为clear:both，清除浮动，添加了无意义的标签，不推荐。
2、父级元素触发BFC，内部元素不影响外面布局（推荐）
3、父级元素添加伪元素，::before/after，content为空，clear:both，display:block;（推荐）
