盒⼦模型

1. 盒⼦的概念
   （1）⻚⾯中的每⼀个标签，都可看做是⼀个 “盒⼦”，通过盒⼦的视⻆更⽅便的进⾏布局
   （2）浏览器在渲染（显示）⽹⻚时，会将⽹⻚中的元素看做是⼀个个的矩形区域，我们也形象的称之为
   盒⼦

2.盒⼦模型
CSS 中规定每个盒⼦分别由： 内容区域（content） 、 内边距区域（padding） 、 边框区域
CSS 中规定每个盒⼦分别由： 内容区域（content） 、 内边距区域（padding） 、 边框区域
（border） 、 外边距区域（margin） 构成，这就是盒⼦模型

3.内容设置
通过 width属性和 height属性可以设置盒⼦内容的宽⾼

4.边框设置 border
边框属性写法：
border: 宽度 边框样式 颜⾊;

5.边框样式：
solid：实线边框，⽤⼀条实线来显示边框。
dashed：虚线边框，⽤短划线来显示边框。
dotted：点线边框，⽤⼩圆点来显示边框。
double：双线边框，显示两条实线边框。
double：双线边框，显示两条实线边框。
groove：3D 凹槽边框，效果看起来像是镂空的。
ridge：3D 凸槽边框，效果看起来像是突出的。
inset：3D 内阴影边框，效果类似于元素被镶嵌在⻚⾯中。
outset：3D 外阴影边框，效果类似于元素凸出于⻚⾯上。
hidden：隐藏边框，不显示边框，但在布局中仍然占据空间。
none：⽆边框，完全不显示边框，也不占据空间。

6.内边距设置 padding
内边距属性写法：
padding: 上内边距 右内边距 下内边距 左内边距;
padding属性的值最多是4个，当然也可以是1个、2个、3个

7.外边距设置 margin
外边距属性写法：
margin: 上外边距 右外边距 下外边距 左外边距;
margin属性的值最多是4个，当然也可以是1个、2个、3个

8.盒⼦的计算⽅式
box-sizing 属性可以改变盒⼦⼤⼩的计算⽅式，它有两个常⻅的取值：
（1） content-box：这是默认值， 盒⼦最终呈现的⼤⼩ = (width、height属性设置的⼤⼩) + 边框⼤
⼩ + 内边距⼤⼩
（2）border-box： 盒⼦最终呈现的⼤⼩ = width、height属性设置的⼤⼩