前端CSS自查

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

min-height

该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

水平和垂直居中

链接: link.

text-indent 文字缩进

text-indent 属性规定文本块中首行文本的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

p{
text-indent:50px;
}

overflow:hidden 溢出隐藏

父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷

给父元素添加 overflow:hidden 解决外边距塌陷和清除浮动

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

text-overflow 文本溢出显示标记

text-overflow: ellipsis;	/*当对象内文本溢出时显示省略标记（...）*/

zoom

ie浏览器专有属性 检测和设置对象的缩放比例

transform

Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

transform:translate(100px,20px)://x、y轴移动

链接: link.

position: initial

设置该属性为默认值

overflow-y: scroll 设置竖滑动条

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

• visible 不裁剪内容，可能会显示在内容框之外。
• hidden 裁剪内容 - 不提供滚动机制。
• scroll 裁剪内容 - 提供滚动机制。
• auto 如果溢出框，则应该提供滚动机制。
• no-display 如果内容不适合内容框，则删除整个框。
• no-content 如果内容不适合内容框，则隐藏整个内容。

max-height: calc(100vh - 36vh)

calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”、“-”、“” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格

//设置div元素的高度为当前窗口高度-100px
div{
   height: calc(100vh - 100px);     
}

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

box-sizing: content-box; 标准盒子模型
盒子总宽度=width+padding+border+margin

box-sizing: border-box; IE盒子模型
盒子总宽度=width(包含padding+border)+margin

浮动

什么是浮动元素：浮动元素同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了包含块的布局。

• 常规流：页面上从左往右，从上往下排列的元素流，就是常规流
• 脱离常规流：绝对定位，fixed定位的元素有自己固定的位置，脱离了常规流
• 包含块：一个元素离它最近的块级元素是它的包含块

链接: link.

伪类

链接: link.

动画开始GPU加速

为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU

通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。

BFC

BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。