HTML、CSS知识点,面试开发都会需要--No.3 盒子模型

No.3 盒子模型

---

1.盒子模型属性

（1）包含的CSS属性：width、height、padding、border、margin。

1.盒子模型属性

（1）包含的CSS属性：

　　　　width、height、padding、border、margin。

（2）盒子模型宽度计算：

　　　　margin-right + border-right + padding-right + width + padding-left + border-left + margin-left。

（3）盒子模型高度计算：

　　　　margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom。

（4）margin设置：

　　　　margin： 10px、

　　　　margin: 10px 20px，上下  左右;

　　　　margin: 5px 0 10px 0，上 有 下左。

（5）border设置：

　　　　border: width style color，也可单独设置每个值border-width、border-style、border-color。

　　　　border-style属性值包括olid, double, dashed, dotted, and none。

（6）border单方向设置：

　　　　border-top, border-right, border-bottom, and border-left，

　　　　例如border-bottom: 6px solid #949599。

（7）border-radius设置：

　　　　一个值border-radius: 5px，

　　　　两个值border-radius: 5px 10px，

　　　　四个值表示top-left、top-right、bottom-right、bottom-left。

（8）border-radius单个方向设置：

　　　　border-(top/bottom)-(left/right)-radius:value，

　　　　例如border-top-right-radius: 5px;

2.Box Sizing

（1）box-sizing作用：

　　　　CSS提供了box-sizing用于规定元素尺寸的计算方法。

（2） box-sizing属性值：

　　　　包括content-box、padding-box、border-box。

（3）content-box：

　　　　是box-sizing的默认值，计算的实际size为width或height值加上padding、border、margin的总和。

（4）padding-box：

　　　　一个div的width为400px，设置padding为20px，那么实际的尺寸还是400px，只是把content压缩了。如果设置border为10px，那么实际的尺寸为400px + 10px = 410px。

（5）border-box:

　　　　如果div的width为400px，设置padding为20px，border为10px，那么元素width还是为400px，但内容被缩放。

（6）box-sizing的推荐值：border-box。