box

盒子模型

width\height（宽、高）

1. max-width：最大宽度（表示最大不大于或等于该值）
2. min-width：最小宽度（表示最小不小于或等于该值）
3. max-height 和 min-height 同理
4. height 和 width 默认只是 content 的宽高，不包括 padding、border 和 margin！

注意：max-width 和 min-width 一般不与 width 一起使用，height 同理。

单位

1. auto - 默认。浏览器计算高度和宽度。
2. length - 以 px、cm 等定义高度/宽度。
3. % - 以包含块的百分比定义高度/宽度。
4. initial - 将高度/宽度设置为默认值。
5. inherit - 从其父值继承高度/宽度。

box-sizing(H5 中的盒模型)

content-box

盒子的实际宽度 = CSS 中设置的 width+border+padding

border-box

1. 盒子的实际宽度 = CSS 中设置的 width（包含 border 和 padding）
2. 如果我们使用了 border-box，那么 border 和 padding 就不会撑开盒子，前提是 padding 和 border 的大小不会超过盒子的大小