《CSS 世界》读书笔记
元素与基本尺寸
每一个元素都有一个标记盒子，一个外部盒子与一个容器盒子。标记盒子用于展示圆点、数字这些项目符号，外部盒子用于决定元素是块级展示还是内联展示，容器盒子用于决定元素的宽高以及内容呈现方式等。
表现为“外部尺寸”的块级元素一旦设置了宽度，其流动性就丢失了。所谓流动性，即是一种
margin/border/padding/content区域自动分配水平空间的机制。对于绝对定位的非替换元素，当
left和right同时存在时，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性的祖先元素计算。此外，“格式化宽度”也具有流动性，也有“格式化高度”。容器盒子又被分成了 4 个盒子，分别是 content box、padding box、border box 和 margin box，默认情况下（
box-sizing: content-box），width作用在 content box 上，而当box-sizing: border-box时，width则直接作用到了 border-box 上，且内部具有流动性。对于
width属性，就算父元素width: auto，其百分比值也是支持的，但是对于height属性，如果父元素height: auto，则只要子元素在文档流中，其百分比值就完全被忽略了。对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。element.offsetWidth是一个只读属性，返回一个元素的布局宽度，包含 border、padding、scrollbar 和 content。element.offsetHeight同理。该属性将会四舍五入为一个整数，如果想要一个小数值，请使用
element.getBoundingClientRect()。
无宽度原则、宽度分离原则