1、div 的默认宽度是父元素宽的 100%

2、逐帧动画 animation: animate-name 3s steps(每次循环的帧数) infinite;

@keyframes animate-name{
    from{
    <!--原位-->
        background-position: 0 0; 
    }
    to{
    <!--最后一帧-->
        background-position: -1540px 0 ;
    }
}

3、"Break out" of a parent's containing width to take the full screen of a page w/this nice utility class:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

4、行内元素与下一个元素中间有空格（正常排版）,会引起一些诡异的缝隙，常见的例如元素之间有间隔，或看起来空了一行（像加了padding）

5、pre 标签设置自动换行 white-space: pre-wrap;

6、隐藏一个元素，同时让这个元素的宽度可获取：设置 overflow: hidden 可以根据元素高度裁剪视区，设置 height: 0; overflow: hidden 虽然文档流中占用了位置，由于高度为 0，最终表现特征达到了我们期望的 display: none。此时该元素 clientHeight、offsetHeight 为 0，但是 scrollHeight 是有值的。scrollHeight 是一个元素没有滚动条时的所有内容高度,当一个元素没有滚动条时 scrollHeight === offsetHeight。

7、当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

8、当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

9、回流必将引起重绘，重绘不一定会引起回流。

10、移动端优化常用 CSS 属性：

user-select: none; // 禁止文字被选中
outline:none; // 去除点击外边框,点击无轮廓
-webkit-touch-callout: none; // 长按链接不弹出菜单
-webkit-tap-highlight-color: rgba(0,0,0,0); // 去除点击高亮

11、@keyframes 的属性要前后对应，否则不形成动画

12、img 元素图像自适应居中，与 background-size 效果一样

object-fit: cover;

13、＜img /＞ 标签千万记得写宽高，不然会花式塌陷

14、flex-grow 所在元素如果未定宽度的话，宽度会被子元素撑开

15、一个英文单词默认不换行，无论多长，所以要设置 word break

16、多行文字居中

.mulit_line{ 
    border:1px dashed #cccccc; 
    padding-left:5px;
}
.mulit_line span{ 
    display:inline-block; 
    line-height:14px; 
    vertical-align:middle;
}

17、safari 中控制惯性滚动 -webkit-overflow-scroll

18、滚动条样式可能使滚动条强制显示

19、flex 布局不换行加 flex-shrink: 0; 实现 div 不压缩无限并排，可以用于 swiper 等场景。

20、巧用猫头鹰选择器 * + *

21、float 自带 display: block

22、鼠标禁用 .disabled { pointer-events: none; }

23、注意 :last-child 与 :last-of-type 的区别

24、::after 表示法是在 CSS3 中引入的，:: 符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持 CSS2 中引入的表示法 :after。

25、父元素如果存在 transform 属性，子元素的 position: fixed 属性无效

26、less 中的 calc 问题：height: calc(~"100% - 50px");

27、vh 在部分浏览器中包含地址栏部分，小心使用。