理解CSS | 青训营笔记

层叠、优先级

1.样式表来源
2.选择器优先级
3.源码位置

由层叠概念引申出的css代码good practice
选择器尽量少用id
尽量不要用! important
自己的样式加载在引用库样式的后面

继承

大部分具有继承特性的属性跟文本相关:
color、font、 font-family、 font-size、 font-weight、 font-variant、 font-style、line-height、 letter-spacing、 text-align、 textindent、 text-transform、white-space以及word-spacing
还有少部分列表、表格的属性
可以使用inher it关键字显式指定一个属性值从其父元素继承

CSS值和单位

• 值：
  • 文字类:比如像initial这种关键字，颜色、位置等等
  • 数值类:比如z-index:1 这种数值，或者带有单位的数值、百分比等
  • 函数生成:比如calc()， min()， max() 等
• 单位：
  • 长度:
    • 绝对长度: px, pt, cm, in....
    • 相对长度: em, rem, ex, rex... vw, vh, vmin, vmax...
  • 角度: deg, grad, turn, rad
  • 时间: s, ms
  • 分辨率: dpi, dpcm, dppx

常规流布局

任意盒子的display： 外部显示类型(display-outside):规定了该盒子如何与同一格式上下文中的其他元素一起显示。
内部显示类型(display-inside):规定了该盒子内部的布局方式。比如display: flex;其外部显示是block，参与BFC; display: inline-flex,则外部显示是inline，参与IFC。他们内部的盒子都参与弹性盒子布局。

块级格式化上下文

以下条件满足任何一个即可触发一个盒子的BFC特性 display: flow-root|inline-block position: absolute|fixed float: 不为none overflow: 不为visible

外边距塌陷

会产生外边距塌陷的情况：

- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻

消除外边距塌陷的方法：

- 在两个相邻的上下边距之间增加border、padding或者内联元素，使之不相邻;
- 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC,使得父子不在同级BFC中