盒子模型（box model）
一、什么是盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型
二、盒子模型的使用
1.边框（border）
(1) 边框颜色属性：border-color。
当同时设置4个边框颜色时，顺序为上右下左。
border的颜色属性
(2)边框的粗细属性：border-width
示例
(3)边框的样式：border-style
边框样式属性指定要显示什么样的边界。
none: 默认无边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
(4)border的简写
border:1px solid #3a6587;
border: 1px dashed red;
2.外边距（margin）
(1)margin属性：
lmargin-top：设置元素的上外边距。 lmargin-right：设置元素的右外边距。
lmargin-bottom：设置元素的下外边距。 lmargin-left：设置元素的左外边距。
lmargin：简写属性。在一个声明中设置所有外边距属性。
margin属性的四个值，总是按照上，右，下，左的顺序。
如果有三个值，那左右相同。如果有两个值，那上下相同，左右相同。如果有一个值，那四面相同。
(2)maigin实现网页居中对齐：
margin:0px auto;
条件：1、块元素 2、固定宽度
3.内边距（padding）
pading属性一到四个值
4.盒子模型的尺寸
盒子模型尺寸
(1)box-sizing
content-box：默认标准盒模型，总宽=width+padding+border+margin
inherit：指定 box-sizing 属性的值，应该从父元素继承
border-box：盒子的宽度和高度就是给定的宽度和高度，如果设置了padding和border，将减少内容的宽度和高度。
三、圆角边框
向 div 元素添加圆角边框。
border-radius:20px 10px 50px 30px;
四个属性值按照顺时针排列。
圆角边框举例
效果图
四、盒子阴影
box-shadow: offset-x offset-y blur spread color inset;
offset-x：必需，取值正负都可。offset-x水平阴影的位置。
offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
color:可选。阴影的颜色。
inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。
例如： box-shadow:5px 5px 10px red;
