CSS 入门 - Box Model 盒模型
网页布局：先学习 Box Model，然后 Flexbox/Grid/Float 三选一即可搞定网页布局，推荐 Flexbox！
BOX Model
四大属性：Content、Padding、Border、Margin
- Content：内容
- Border：边框线
- padding：内容与边框的距离
- margin：边框与其他元素的距离
margin 与 padding 的区别
除了 padding 在边框内，margin 在边框外：
- padding 部分有背景颜色，margin 无背景颜色
- 如果元素可点击（如超链接），padding 部分可点击，而 margin 部分不可点击
- 相邻 margin 会合并（margin collapse）
设置值格式
- padding/margin: 10px; 上下左右
- padding/margin: 10px 20px; 上下，左右
- padding/margin: 10px 20px 30px; 上，左右，下
- padding/margin: 10px 20px 30px 40px; 逆时针：上，右，下，左
- padding/margin-top/left/right/bottom 单独指定某一边
inline
以上针对 block 元素。对于 inline 元素（如 strong），margin 只影响左右，对上下不起作用；padding 影响左右，上下虽然有效果（如背景颜色、边框），但不影响垂直方向布局。改成 display:inline-block; 即可符合预期（行为类似 block）。
总结：inline 不影响垂直方向的版面布局！
居中对齐
- 对于 inline 元素：复用父元素的 text-align:center
- 对于 block 元素：如果宽度小于 100%，margin-left 和 margin-right 设为 auto 即可
Box-sizing
默认值：content-box，width、height 设置的是 content；而设为 border-box 时，width、height 包含了 padding 及 border 的宽度