第六章 盒子模型

1.盒子模型

盒子模型由4个部分组成：边框（border），外边距（margin），内边距（padding），实际内容（content）。

2.计算方法

div{
    box-sizing:content-box;/*默认值*/
    box-sizing:border-box;/*推荐使用*/
}
1.content-box:
    盒子的总宽度=margin+border+padding+width
2.border-box:
    盒子的总宽度=margin+width

3.box-sizing的属性值

content-box：默认值，盒子的宽度或高度
border-box：盒子的宽度或高度等于元素内容的宽度或高度
inherit：此值使元素继承父元素的盒子模型模式

4.圆角边框

通过设置元素的 border-radius值，可以轻松地给元素设置圆角边框，甚至实现绘制圆，半圆，扇形等各种图形。
实现圆形的两个要点：1.元素的宽，高必须相同。2.设置圆角的半径为元素宽度的一半或50%

语法:

border-radius：length{1,4}

5.盒子阴影的属性值

h-shadow
v-shadow
biur
spread
color
inset