l 本章简介：
大家在上网时，在网页上面可能看不出盒子模型的应用
但是理解了本章之后，你就会发现盒子模型在网页中的应用无处不在！
盒子模型是CSS控制页面的一个很重要的概念，只有掌握了盒子模型的属性和用法，才能真的控制好页面中的各个元素。
今天介绍盒子模型的基本概念，盒子模型的边框，内边距和外边距，以及它们的实际应用
和设置圆角效果和盒子阴影效果。
l 本章单词：
Border 边框
Margin 外边距
Padding 内边距
Box-sizing 盒子大小
Border-box 盒子边框
Content-box 盒子内容
Border-radius 边框圆角
Box-shadow 盒子阴影
l 6.1 边框
边框（border） 有三个属性，分别是：
1． Border-color
Border-color的设置和文本的color属性或者背景颜色设置一样
由于盒子模型分为上、下、左、右四个边框，所以可以可以按顺序设置四种不同的颜色，也可以同时设置四个边框的颜色
border-top-color: royalblue ; 设置上边框颜色
border-bottom-color: royalblue ; 设置下边框颜色
border-right-color: royalblue ; 设置右边框颜色
border-left-color: royalblue ; 设置左边框颜色
border-color: royalblue; 设置四个边框颜色
2. Border-width
Border-width用来指定border的粗细程度，它的值有
Thin 设置细边框
Medium 默认值，设置中等的边框
Thick 设置粗边框
以及像素值：
border-top-width;: 5px ; 设置上边框粗细 border-bottom-width: 10px ; 设置下边框粗细 border-right-width: 15px ; 设置右边框粗细 border-left-width: 20px ; 设置左边框粗细 border-width: 25px; 设置四个边框粗细
3． Border-style
此属性用来指导边框的样式，它的值有：
None 无
Dotted 点线边框
Dashed 虚线边框
Solid 实现边框
border-top- style: None; 设置上边框样式 border-bottom- style: Dotted; 设置下边框样式 border-right- style: Dashed ; 设置右边框样式 border-left- style: Solid; 设置左边框样式 border- style: Solid; 设置四个边框样式
4． Border的简写属性
以上讲解的三种属性的方法，其实可以写在一块。
简写形式也是最常用的方式
border: saddlebrown solid 5px;
l 6．2 外边距
外边距（margin）位于盒子边框外，是指与其他盒子之间的距离，也就是指网页中元素和元素之间的距离。
margin-top: 50px; margin-bottom: 50px; margin-right: 50px; margin-left: 50px;
margin除了使用像素值设置外边距外，还有一个特殊值：auto
这个值通常是设置盒子在它的父容器中居中显示时才使用的。
并且使用 auto 属性的前提是此元素必须是块元素以及显式的设置宽度。
l 6．3 内边距
内边距（padding）用于控制内容和边框之间的距离，以便精确的控制内容在盒子中的位置。
padding-top: 50px; padding-bottom: 50px; padding-right: 50px; padding-left: 50px;
l 6．4 盒子模型的尺寸
在刚开始制作网站时，大多数人会因为页面元素按照预定的那样显示
有的同行，有的折行，有的太大，有的太小
这些大多是盒子尺寸问题
盒子模型内盒总尺寸 = border（上下、左右） + padding（上下、左右）+ 内容宽度
内盒的总尺寸 = border + padding + 内容宽/高。
外盒的总尺寸 = border + padding + margin + 内容宽/高。
l 6．5 box-sizing拯救布局
此属性能够事先定义盒子模型的尺寸解析方式。
box-sizing: border-box; box-sizing: content-box;
l 6．6 圆角边框
在Web页面中，圆角的边框很常见，使用圆角也给边框添加了曲线之美，让页面不在那么生硬。
border-radius: 50%;
l 6．7 盒子阴影
盒子阴影和文字阴影差不多，只是区别于作用的对象不同
box-shadow: 20px 10px 10px red;
如果设置了 inset 值的话，表示是盒子的内阴影。
box-shadow: inset20px 10px 10px red;
l 本章总结：
1．本章理解了盒子模型的概念，盒子模型的边框、外边距、内边距在网页中的用法。
2．使用border、padding、margin 可以美化图片、盒子、列表、表单等元素。
3．使用 border-radius 可以给元素添加圆角边框，以及制作特殊图形
4．使用 box-shadow 可以给元素添加内，外阴影。