深入理解CSS

层叠、优先级

层叠三大规则：

• 样式表来源
• 选择器优先级
  • 内联 > id > class = attribute = pseudo-class > type = pseudo-element
    • 选择器尽量少用id
    • 尽量不用 !important
    • 自己的样式加载在引用库样式的后面
• 源码位置

inherit 继承属性

盒模型

margin、padding、border

实现水平居中可以用margin：auto。

常规流布局

块盒子：

• display : block | flex | grid ...

内联级盒子：

• display : inline | inline-block ...

外边距塌陷：

• marigin : 20px auto;
• display : flow-root;

内联级格式上下文：

vertical-align 决定位置
eg : 
    vertical-align : middle
    

定位position：

• relative
  • 元素相对于自己原来的位置在文档流中的位置进行定位，但原来文档流空间的位置还在
• absoult
  • 元素被移出正常文档流，没有预留空空间，相对于最近的非static元素进行定位。另一种说法是根据父元素的位置进行定位。
• fixed
  • 元素被移除文档，没有空间，相对视口定位
• sticky

  • 元素相对于它的最近滚动祖先（祖先的overflow是scroll/hidden/auto）的视口（scrollport）定位

层叠上下文：

• z-index 只在同一层叠上下文内比较
• 子元素的z-index无法超越父元素的z-index显示顺序

浏览器渲染三个阶段

• 布局
  • 计算布局
  • 宽、高、位置等改变都会重新布局（reflow）
• 绘制
  • 填充像素
  • 文本、着色、背景边框改变出发reflow
• 合成
  • 收集所有绘制完成的图层，按照顺序合成显示

如何写动画性能更好？

1. 尽量不触发reflow
2. 尽量用transform 和 opacity去写动画

响应式设计

常用的移动端viewport：

`<meta name="viewport content="width=device-width,initial-scale=1">`

相对长度单位：

• em
  • 在非font-size属性中使用时相对于自身的字体大小
  • 在font-size使用时相对于府掾属的字体大小
• rem
  • 根元素的字体大小
• vw和vh
  • 视窗宽度的 1% 。 个人感觉非常好用

	scss	less	stylus
css语法兼容	兼容	兼容	常规兼容
可编程能力	较强	较弱	较强
社区活跃、使用人数	最多 star3.3k	较多 star16.9k	相对少 star11k

用过less，感觉less不错

命名规范：

• .header-btn__prev

• .header-btn__next