（一）盒子模型
1.盒子模型是网页制作中的重要的指导思想
2.盒子模型是网页布局的基石
3.它认为页面中所有元素都可以看做是一个盒子，p div span a img
4.它认为可以通过设置盒子的属性，进而改变盒子在页面中的显示效果
5.它认为页面中的所有盒子是相互影响
（二）盒子模型的属性：宽度、高度、边框、内边距、外边距
1.宽度、高度
宽度width:属性值为像素值，或者是百分比
高度height:属性值为像素值，或者是百分比
2.边框border
border-style:设置边框的类型，常用的属性值为solid(实线)/dashed(虚线)/dotted（点线）/none(去掉边框)
border-width:设置边框的宽度，属性值为像素值，像素值越大，边框越粗
border-color:设置边框的颜色,属性值为单词、十六进制代码、rgb/rgba
注意：边框类型是必须项
3.边框的复合形式border:值1 值2 值3; border: 1px solid #000;
上边框：border-top
下边框：border-bottom
左边框：border-left
右边框：border-right
4.盒子阴影box-shadow：
值1：代表阴影水平方向上的位移距离，可以是正整数（向右移）、也可以是负整数（向左移）
值2：代表阴影垂直方向上的位移距离，可以是正整数（向下移）、也可以是负整数（向上移）
值3：代表阴影半径
值4：代表阴影颜色
（三）内边距（内填充、内补丁）:内容和边框的距离；padding,属性值为像素值，值越大，距离越远
1.内边距
上内边距padding-top
下内边距padding-bottom
左内边距padding-left
右内边距padding-right
2.复合形式
padding: 5px;（上下左右都相同）
padding: 5px（上下） 10px（左右）
padding: 5px（上） 10px（左右） 15px（下）
padding：5px（上） 10px（右） 15px（下） 20px（左）
（四）外边距（外补丁）：元素间的距离，属性值为属性值，值也越大，距离越远
1.外边距
上外边距margin-top
下外边距margin-bottom
左外边距margin-left
右外边距margin-right
注意：两个元素上下间的距离不是求和关系，是取最大值,左右间的距离是求和关系
2.复合形式
margin: 5px
margin:5px 10px
margin:5px 10px 15px
margin: 5px 10px 15px 20px
（五）如果HTML元素是包含与被包含关系（即父子关系）时，给子元素设置margin-top会出现父元素同步下移问题，解决该问题的方法是
1.给父元素设置padding-top
2.给父元素加边框
3.给子元素设置margin-top,同时给父元素设置padding-top:0.1px;
（六）盒子的实际宽度和高度
宽度=左边框+左内边距+内容的宽+右内边距+右边框
高度=上边框+上内边距+内容的高+下内边距+下边框