css

gpu加速

will-change:left -> 浏览器就知道left属性会变化，从而使用gpu加速优化性能。
transform:tarnlateZ(0) ->开启新图层，这样就不会影响其他，较少回流和重绘。

visibility=hidden, opacity=0，display:none区别

1、opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
2、visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3、display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

元素分类

行内元素：a、img、input、textarea、span
块级元素：div、h1-h6、p、table、ul、header

区别：行内元素设置高度、宽度、内外边距都无效，块级元素设置高度、宽度、内外边距都有效
块级元素独占一行占满父元素宽度、内联元素则不会

垂直居中：

1、 已知元素宽高
<1>absolute+负margin --- 必须要定宽高
<2>absolute+top、bottom、left、right=0+margin auto --- 必须要定宽高
2、元素宽高不定
<1>absolute+transform的translate （-50%） -- 兼容性
<2>line height+inline -- 如果其中有文字也会居中，需要重置
<3>table布局 --- display: table-cell;
<4>flex ---兼容性

能够继承的属性：

font-size：设置字体的尺寸
text-indent：文本缩进
text-align：文本水平对齐
text-shadow：设置文本阴影
line-height：行高
元素可见性：visibility
光标属性：cursor

css盒模型：

W3C 标准盒模型（content-box）：
属性width,height只包含内容content，不包含border和padding

IE 盒模型（border-box）：
属性width,height包含border和padding，指的是content+padding+border

默认用的是标准盒模型：宽度就是宽度不包含边框和padding

css选择器：

第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
注意：通用选择器，子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

div>p: 选择所有父级是 <div> 元素的 <p> 元素
div,p: 选择所有<div>元素和<p>元素
div+p: 选择所有紧接着<div>元素之后的<p>元素(一个)
[title]：选择有title属性的元素
p:first-child：指定只有当<p>元素是其父级的第一个子级的样式。
p:nth-child(2)：选择每个p元素是其父级的第二个子元素

BFC：

1. BFC里面的box都会以垂直方向排列
2. 同一个BFC里面中相邻的两个盒子的外边距会重叠
3. BFC的区域不会和float Box重叠
4. BFC就是一个独立的容器,容器里面的元素不会影响到外面的元素,反之也如此

生成BFC：

1. 根元素
2. float属性不为none;
3. display属性为:line-block,table-cell,line-flex,flex
4. position属性不为:static,relative;
5. overflow属性不为:visible;

参考文章

px/em/rem/vh/vw：

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em是相对长度单位。相对于当前父元素的字体尺寸。如未设置，则相对于浏览器的默认字体尺寸
rem是CSS3新增的一个相对单位。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120p