CSS—盒子模型
【内容】
1.盒子模型
就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
相关概念：
盒子模型有元素的内容、边框（border）、内边距（padding）和外边距（margin）组成。
盒子里面的文字和图片等元素是内容区域。
盒子的厚度我们称为边框。
盒子内容与边框的距离是内边距（类似单元格的cellpadding）。
盒子与盒子之间的距离是外边距（类似单元格的cellspacing）。
2.盒子边框（border）
（1）语法如下：
border : border-width || border-style || border-color
（2）属性：
|
属性 |
作用 |
|
border-width |
定义边框粗细，单位是px |
|
border-style |
边框的样式 |
|
border-color |
边框颜色 |
（3）边框样式：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线（最为常用）
dashed：边框为虚线
dotted：边框为点线
（4）边框综合设置：
border : border-width || birder-style || border-color
例子：
border : 1px solid red;
（5）盒子边框写法总结
很多情况下，我们不需要指定4个边框，我们可以单独给4个边框分别指定。
（6）表格的细线边框
通过表格的cellspacing=”0”，将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗。
通过CSS属性，语法如下：
table{ border-collapse : collapse; }
其中，
collapse，是合并的意思。
border-collapse:collapse，表示相邻边框合并在一起。
3.内边距（padding）
padding属性用于设置内边框，是指边框与内容之间的距离。
属性如下：
|
属性 |
作用 |
|
padding-left |
左内边距 |
|
padding-right |
右内边距 |
|
padding-top |
上内边距 |
|
padding-bottom |
下内边距 |
说明：
当我们给盒子指定padding值之后，发生了2件事：
（1）内容和边框有了距离，添加了内边框。
（2）盒子会变大。
属性值：
|
值的个数 |
表达意思 |
|
1个值 |
padding : 上下左右内边距; |
|
2个值 |
padding : 上下内边距 左右内边距; |
|
3个值 |
padding : 上内边距 左右内边距 下内边距; |
|
4个值 |
padding : 上内边距 右内边距 下内边距 左内边距; |
4.内盒尺寸计算
宽度：Element Height = content height + padding + border （Height为内容高度）
高度：Element Width = content width + padding +border （Width为内容宽度）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
问题来了，如何解决盒子被撑大这个问题呢？
解决方法：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。
特殊情况：padding不影响盒子大小情况
如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。
例如：
div{
width: 200px;
height: 200px;
background-color: pink;
}
p{ /*没有给该盒子指定宽度，则padding不会撑开盒子*/
height: 30px;
background-color : purple;
padding-left: 30px;
}
4.外边距（margin）
margin属性用于设置外边距，margin就是控制盒子与盒子之间的距离。
属性如下：
|
属性 |
作用 |
|
margin-left |
左外边距 |
|
margin-right |
右外边距 |
|
margin-top |
上外边距 |
|
margin-bottom |
下外边距 |
5.块级盒子水平居中
可以让一个块级盒子实现水平居中必须满足条件：
盒子必须指定了宽度（width）。
然后就给左右的外边距都设置为auto。
语法如下：
.header{ width: 960px; margin: 0 auto; }
3种常见写法：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
6.文字居中和盒子居中区别
（1）文字水平居中是text-align:center，而且还可以让行内元素和行内块居中对齐。
（2）块级盒子水平居中 左右margin改为auto
语法如下：
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin改为auto*/
7.插入图片和背景图片区别
（1）插入图片：用的最多，比如产品展示类，移动位置只能靠盒模型 padding margin。
（2）背景图片：一般用于小图标背景或超大背景图片，只能通过background-position。
8.清除元素的默认内外边距
为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除。
语法如下：
*{
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
说明：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
9.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
（1）相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom；
下面的元素有上边距margin-top；
则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：
尽量只给一个盒子添加margin值。
（2）嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框；
父元素的上外边距会与子元素的上边距发生合并；
合并后的外边距为两者中的较大者。
解决方案：
可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow: hidden。
还可以用浮动、固定、绝对定位的盒子等。