CSS
css 是层叠样式表，是一个网页的皮肤，主要负责网页样式的实现。可以静态的修饰网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。
z-index 属性设置元素的堆叠顺序。
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间。
animation-delay 规定在动画开始之前的延迟。
animation-timing-function 规定动画的速度曲线。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
@keyframes 规则可以创建动画，将一套 css 样式逐渐变化为另一套样式，以百分比来规定改变（多次改变）发生的时间，或通过关键词“from”和“to”来规定（等价于0%和100%）。
@keyframe mymove {
0% {top：0 px}
25% {top：200 px}
75% {top：100 px}
100% {top：0 px}
}
目前浏览器都不支持 @keyframes 规则，Firefox支持替代的 @-moz-keyframe 规则，Opera 支持替代的 @-o-keyframes 规则，Safari 和 Chrame 支持替代的 @-webkit-keyframes 规则。
css 动画运行过程控制较弱，无法附加时间绑定回调函数，想要实现稍微复杂一点的动画，代码会变得非常笨重。
css3 替代 JS 的好处：不占用JS主线程，可以利用硬件加速，浏览器可以对动画做优化（元素不可见时不动画）。
图片懒加载、图片预加载、图片压缩、css sprites。
css sprites 是把网页中一些背景图片整合到一张图片文件中，再利用“background-image”、“background-repeat”、“background-position”进行定位。
box-sizing 是用来控制元素的合资模型的解析模式，默认为 content-box。
盒子模型是由 content、padding、border、margin 四个部分构成。
低版本的IE盒模型的内容宽度包括了 content、padding 和 border。
css 中的选择器：
id选择器、类选择器、标签选择器、相邻选择器（h1+p）、子选择器（ul>li）、后代选择器（li a）、通配符选择器（*）、属性选择器、伪类选择器（a：hover、li：nth-child）。
可继承的属性：font-size、font-family、color、opacity
不可以继承的样式：border、padding、margin、width、height
p：first-of-type 选择属于其父元素的首个元素
p：nth-child（2）选择属于其父元素的第二个子元素
enable：disabled 表单控件的禁用状态
RGBA：代表Red、Green、Blue 和 Alpha 的色彩空间，rgba（255，255，255，0.5）。
grba的透明度效果只作用于元素颜色或背景色，opacity作用于元素以及元素内部的所有内容。
flexbox 是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。flex 布局后 float 、clear、vertical-align 会失效。
block 布局是把块在垂直方向从上到下依次排列，inline 布局是水平方向排列。
BFC（块级格式化上下文），满足下列 css 声明之一的元素会生成BFC：
根元素
float 的值不为 none
overflow 的值不为 visible
display 的值为 inline-block、table-cell、table-caption
position 的值为 absoluted 或 fixed
BFC 的约束规则：
内部的 box 会在垂直方向上一个接一个放置
垂直方向上的距离由margin决定
每个元素的左外边距与包含块的左边界相接触，即使浮动元素也是如此。
BFC 的区域不会与 float 的元素区域重叠
BFC 能够防止margin重叠，可以清楚内部浮动，自适应多栏布局。
行内元素是不可以设置宽高的。
浮动和绝对定位会使元素脱标，导致行内元素转换为行内块元素，可以设置宽和高。
子元素浮动会导致父盒子高度塌陷，影响了父元素的布局，于浮动元素同级的非浮动元素会跟随其后。
清除浮动的方法：
给父级设定高度
使用 clear：both
使用 overflow：hidden、auto
使用伪类 after、zoom
display：none 不显示对应的元素，在文档布局中不再分配空间。
visibility ：hidden 隐藏对应的元素，在文档布局中任保留原来的空间。
href 是指向网络资源所在位置，用于超链接，用于当前文档和引用资源之间确立联系。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，应用到文档内。
px 是绝对单位，em 和 rem 是先对单位；rem 是根据 html 的 font-size，em 是根据 body 的 font-size。
浏览器的默认字体高都是16px，未经调整的都符合 1em = 16px，【想要的px值/基数（10px）】rem。
css 的 position 属性取值：
static 默认的
relative 相对于其在普通流中的位置
absolute 相对于最近一级的定位不是static的父级元素
sticky 粘性定位，基于用户滚动的位置
inherit 规定应该从父元素继承 position 属性的值
initial 设置该属性为默认值
对DOM设置它的 css 样式：
外部样式表，引入一个 css 文件
内部样式表，将 css 代码放在<head>标签内部
内联样式，将 css 样式直接定义在 HTML 元素内部
margin-collapse 外边距重叠，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
都是正数，折叠结果为较大的值；都是负数，为两者绝对值较大的值；一正一负，为相加的值。
sass 和 less 是 css 预处理器，结构清晰、便于扩展，可以方便的屏蔽浏览器私有的语法差异。less 是一种动态样式语言，sass 使用行缩进的方式来指定 css 块。
css 中减少回流和重绘：
用 transform 替代 top
用 visibility 替代 display：none
避免使用 table 布局
尽可能在 DOM 树的最末端改变 class
避免设置多层内联样式
单行文本溢出显示省略号：
overflow：hidden；
white-space：nowrap；
text-overflow：ellipses；
多行文本溢出显示省略号：
display：-webkit-box；
-webkit-box-orient：vertical；
-webkit-line-clamp：2（2表示显示最多两行）
overflow：hidden；
text-overflow：ellipses；