一、盒模型概述盒模型是CSS的基石，规定了标签如何显示；页面上的每个元素都被看作是一个矩形框，占据一定的页面空间，框由内容（content）、内边距（padding）、边框（border）和外边框（margin）组成；二、border1、border-width指定边框的宽度2、border-style指定边框的样式，border-style:none|点缀|固体|双|dashed;dotted定义虚线边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于border-width的值。3.border-color指定边框的颜色4.border-top|bottom|left|rightborder-top-styleborder-top-widthborder-top-color3.paddingpadding：border和content之间的padding区域；padding（填充），设置页面上某个元素的内容与该元素的边缘（border）之间的距离。1）用于调整内容在容器中的位置关系2）用于调整子元素在父元素中的位置关系。需要在父元素上添加padding属性。3)padding值添加到元素的原始大小。如果要保持元素的大小不变，则需要从元素的宽度或高度中减去添加的padding属性。4）背景色和背景图片会覆盖padding和content组成的区域；5)padding不能为负值1,padding-top|bottom|left|right2,padding:10px;四个padding都是10px3，padding:10px5px;toppadding和bottompadding为10pxrightpadding和leftpadding为5px4,padding:10px5px15px;toppadding为10pxrightpadding和leftpadding为5pxbottompadding为15px5,padding:10px5px15px20px;toppadding为10pxrightpadding为5pxbottompadding为15pxleftpadding为20px4.marginmargin：元素外的空白区域称为margin。1）margin在border之外，margin区域不应用背景；CSS中边距的默认值为02)，可以为负数。1.margin-top|bottom|left|right2.margin:10px5px15px20px;topmarginis10pxrightmarginis5pxbottommarginis15pxleftmarginis20px3、margin:10px5px15px;上边距为10px右边距，左边距为5px，下边距为15px4，边距：10px5px；上下边距为10px，左右边距为5px5，margin:10px；四个margin都是10px5.特别注意1.内联元素不要给上下margin和padding，上下margin和padding会被忽略。左右边距和填充将起作用。2.marginmerging1)、当一个元素出现在另一个元素之上时，第一个元素的底部margin和第二个元素的顶部margin会合并。见下图：2)当一个元素包含在另一个元素中时（假设没有填充或边框分隔边距），它们的顶部和/或底部边距也会合并。见下图：3）应用：这就是为什么一系列段落元素占用空间非常小的原因，因为它们所有的外边距组合在一起形成了一个小外边距。4)合并边距的高度等于两个合并边距高度中的较大者。
