CSS 盒模型简介

一、盒子模型概述

盒子模型是CSS的基石,指定标签如何显示；
页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容（content）、内边距（padding）、边框（border）和外边界（margin）组成；

二、border

• 1、border-width

指定边框的宽度

• 2、border-style

指定边框的样式，border-style:none | dotted | solid | double | dashed;
dotted    定义点状边框。在大多数浏览器中呈现为实线。
dashed    定义虚线。在大多数浏览器中呈现为实线。
solid     定义实线。
double    定义双线。双线的宽度等于 border-width 的值。

• 3、border-color

指定边框的颜色

• 4、border-top|bottom|left|right

border-top-style
border-top-width
border-top-color

三、padding

padding：padding区域在border与content之间；
padding（填充）,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。

1）用来调整内容在容器中的位置关系
2）用来调整子元素在父元素中的位置关系。padding属性需要添加在父元素上。
3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性。
4）背景色和背景图像会覆盖padding和content组成的区域；
5）padding不可以为负值
1、padding-top|bottom|left|right    
2、padding:10px;
所有四个填充都是 10px
3、padding:10px 5px;
上填充和下填充是 10px 右填充和左填充是 5px
4、padding:10px 5px 15px;
 上填充是 10px 右填充和左填充是 5px 下填充是 15px

5、padding:10px 5px 15px 20px;
上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px

四、margin

margin：在元素外边的空白区域，被称为边距。

1）外边距(margin)在border之外,margin区域不应用背景;CSS中margin默认值为0
2）可以为负数。

1、margin-top|bottom|left|right    
2、margin:10px 5px 15px 20px;
上边距是 10px 右边距是 5px 下边距是 15px 左边距是 20px
3、margin:10px 5px 15px;
上边距是 10px 右边距和左边距是 5px 下边距是 15px
4、margin:10px 5px;
上边距和下边距是 10px 右边距和左边距是 5px
5、margin:10px;
所有四个边距都是 10px

五、特别关注

• 1、行内元素

不要给上下的margin 和padding，上下margin和padding会被忽略。左右margin和padding会起作用。

• 2、外边距合并

1）、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

2）当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

3）应用：这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

4）合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。