css 盒模型
基本结构
盒基本的模型就是 里面 和 外面，界定它的就是四条边。
Css 盒模型的表现，有以下的规则：
- Css 盒模型 区分 外部显示类型 outer display type 和 内部显示类型 inner display type。
- 外部显示类型，还依赖于 其 包含块 的内部显示类型。
盒尺寸
每个盒都有一块 内容区（content area）和周围可选的padding，border和margin区域，每块区域的尺寸通过下面定义的属性指定。
margin，border和padding可以分为上，右，下和左4部分（例如，图中，"LM"表示左外边距，"RP"表示右内边距，"TB"表示上边框等等）
4块区域（内容，内边距，边框和外边距）中每一块的边界叫一条“边界（edge）”，所以每个盒有4条边界：
-
内容边界环绕着盒的width和height指出的矩形，通常取决于元素的呈现（rendered）内容。4条内容边界定义了盒的内容框（content box）
-
内边距边界环绕着盒的内边距。如果内边距的宽度为0，那么内边距边界就和内容边界相同。4条内边距边界定义了盒的内边距框（padding box）
-
边框边界环绕着盒的边框。如果边框的宽度为0，那么边框边界就和内边距边界相同。4条边框边界定义了盒的边框框（border box）.
-
外边距边界环绕着盒的外边距。如果外边距的宽度为0，那么外边距边界就和边框边界相同。4条外边距边界定义了盒的外边距框（margin box）
每条边界都可以细分成上，右，下和左边界。
原文发布时间为：2018年02月10日
原文作者：雕刻零碎
本文来源：开源中国 如需转载请联系原作者