CSS 盒子模型（Box Model）
- element 元素
- width 宽度
- height 高度
- padding 内边距
- border 边框
- margin 外边距
width = element-width + padding-left + padding-right + border-left + border-right + margin-left + margin-right-
height = element-height + padding-top + padding-bottom+ border-top + border-bottom + margin-top + margin-bottom
如图： - box-sizing
-
box-sizing:element-box：此时 width、height 的值只代表 element 元素本身宽高； -
box-sizing:boeder-box：此时 width、height 的值是元素的宽高、border 的宽高、以及 padding 宽高的总和； -
box-sizing:inherit：从父元素中继承 box-sizing 属性的值，此方法可以省去在子元素中一些需要加加减减的地方（节约性能），- 全局设置 border-box 很好，它有一个关键作用——让有边框的盒子正常使用百分比宽度。
-