盒子
分为块级盒子（block boxes）和行内盒子（inline boxes）
block：
- 会产生换行
width和height属性可以发挥作用- 内边距、外边距和边框会将其他元素从当前盒子周围“推开”
- 如果未指定 width，将沿行向扩展填充其容器中的可用空间。在大多数情况下占据可用空间的 100%
inline：
- 不会产生换行
width和height属性将不起作用- 垂直方向的 padding、margin 以及 border 会被应用，但是不会把其他处于 inline 状态的盒子推开
- 水平方向的 padding、margin 以及 border 会被应用，且会把其他处于 inline 状态的盒子推开
NOTE
使用
display: inline-block可以使元素不换行，但是其他块级特性会生效
盒模型
HTML 页面中的一个个元素看作是一个矩形的盒子，描述了元素在网页布局中的位置和大小
盒子由四个部分组成：
- content：盒子实际显示内容的区域
- padding：内容与边框之间的区域
- border：边框
- margin：外边距
标准盒模型
元素的 width 和 height 表示的仅仅是 content 区域
替代盒模型
元素的 width 和 height 表示的是 content + padding + border
box-sizing
可以决定采用哪种盒模型：
content-box：标准盒模型border-box：替代盒模型
一般情况下，全局设置为 border-box：
* {
box-sizing: border-box;
}获取 content 大小
使用 client 结合 window.getComputedStyle()，两者相减即可
let element = document.getElementById('myElement');
let computedStyle = window.getComputedStyle(element);
let paddingLeft = parseFloat(computedStyle.paddingLeft);
let paddingRight = parseFloat(computedStyle.paddingRight);
let paddingTop = parseFloat(computedStyle.paddingTop);
let paddingBottom = parseFloat(computedStyle.paddingBottom);
let contentWidth = element.clientWidth - paddingLeft - paddingRight;
let contentHeight = element.clientHeight - paddingTop - paddingBottom;获取 border 和其内部的大小
Tip
滚动条不属于盒模型的内容，但是它出现在 padding 与 border 之间，且会向内挤压减少内容区的真实显示宽高