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;

}