HTML 与 CSS

良好的HTML结构是CSS代码可维护的基础。

从外到内

1. box-sizing
2. margin
3. border
4. padding

一个简单的问题：height: 100%

进一步了解

1. 格式化上下文（formatting context）
2. 文档流（document flow）
3. 堆叠上下文（stacking context）

行内与内容

1. vertical-align
2. line-height
3. replaced content

更深的一层

1. 视觉格式化上下文（visual formatting model） MDN 文档
   • The role of the viewport
   • Box generation
   • Positioning schemes and in-flow and out-of-flow elements
   • Formatting contexts and the display property
   • ...

2. 改变文档流的方向

There is always a deeper level...

1. 属性选择器
2. 兄弟选择器
3. 伪元素（Pseudo Elements）
4. 伪类（Pseudo Classes）
• 伪元素用双冒号，伪类用单冒号。
• 但由于在W3C对此定规范的老浏览器，实现上没有做区分，所以对于伪元素，也支持单冒号。
• 参考MDN的解释。

• :hov
• .cls
• computed
• getComputedStyle
• CSS验证 https://jigsaw.w3.org/css-validator/
• style lint

• @规则
• 属性（简写，关键字，规范语法）
• 优先级（cascade，hierachy）
• 显示与定位（display, position）
• 颜色（color）
• 字体与文本排版（font，word-break，writing-mode）
• 背景（background）
• 阴影（shadow）
• flex, grid
• table
• 响应式Web设计（responsive, media query）
• 变换、过渡与动效（transform, transition, animation）
• ...