BFC、IFC、GFC、FFC与CSS分层理论

box-sizing

属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

• content-box:
  1、不包含margin
  2、边框和内边距的宽度会被增加到最后绘制出来的元素宽度中
• border-box
  1、width 和 height 属性包括内容，内边距和边框，但不包括外边距
  2、
  width = border + padding + 内容的宽度
  height = border + padding + 内容的高度

移动端一定要加

html{   box-sizing: border-box}
*,*:befor,*:after{ box-sizing:inherit }

• Neat.css
  https://thx.github.io/cube/doc/neat
• 重置
  https://meyerweb.com/eric/tools/css/reset/
• 修复
  https://necolas.github.io/normalize.css/

flex 模型

图标

• 使用css绘制（css icon ）
  https://cssicon.space/#/比svg、font快

CSS Hint

image.png

• html hint
  https://github.com/htmlhint/HTMLHint

• css hint
  https://kushagra.dev/lab/hint/
  https://github.com/chinchang/hint.css/

• csslint 【CSS 优化】
  http://csslint.net/

BFC

image.png image.png image.png image.png image.png image.png

CSS分层理论

image.png image.png image.png image.png image.png