CSS盒子模型

1. 什么是盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

• Margin(外边距) - 清除边框外的区域，外边距是透明的
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

2. 盒子模型尺寸

• 盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
  = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• 盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
  = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

3. 边框（border）

border表示盒子的边界，它可以设置成可见的，样式多样的。
最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

• border-top：上边界
• border-bottom：下边界
• border-left：左边界
• border-right：右边界

(1) 当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。

border实例1

/*使用简写属性，同时设置四条边界，四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;
/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

(2) 除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。

• border-width：边界宽度
• border-style：边界样式
• border-color：边界颜色

border-sytle属性可取值：

• none：定义无边框。
• hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
• dotted：定义点状边框。在大多数浏览器中呈现为实线。
• dashed：定义虚线。在大多数浏览器中呈现为实线。
• solid：定义实线。
• double：定义双线。双线的宽度等于 border-width 的值。
• groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
• ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
• inset：定义 3D inset 边框。其效果取决于 border-color 的值。
• outset：定义 3D outset 边框。其效果取决于 border-color 的值。
• inherit：规定应该从父元素继承边框样式。

border实例2

/*使用简写属性设置宽度、样式和颜色，同时作用于四条边*/
border: 2px dotted green;
/*下面的样式与上面的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;

(3) 还可以对单独一条边界单独设置宽度、样式或颜色。以上两组属性都可以作为下面属性的简写属性。

• border-top-width：上边界宽度
• border-top-style：上边界样式
• border-top-color：上边界颜色
• border-bottom-width：下边界宽度
• border-bottom-style：下边界样式
• border-bottom-color：下边界颜色
• border-left-width：左边界宽度
• border-left-style：左边界样式
• border-left-color：左边界颜色
• border-right-width：右边界宽度
• border-right-style：右边界样式
• border-right-color：右边界颜色

border实例3

/*使用简写属性设置宽度、样式和颜色，同时作用于四条边*/
border: 2px dotted green;
/*下面的样式与上面简写样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;
/*下面的样式与上面简写样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;
/*下面样式又与上面三个样式的任意一个样式等价*/
border-top-width: 2px;
border-top-style: dotted;
border-top-color: green;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: green;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 2px;
border-right-style: dotted;
border-right-color: green;

(4) 边界半径 ，也就是圆角。边界半径由属性border-radius进行控制，这是一个简写属性，像上面提到过的margin、padding等一样，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-left-radius：左下角
• border-bottom-left-radius：右下角

边界半径可以使用 px、em 等长度单位，也可以使用百分数。

border-radius值的个数以及每个值对应控制的位置：

• 一个值：设置四个角有相同的边界半径；
• 两个值：第一个值设置左上角和右下角，第二个值设置右上角和左下角；
• 三个值：第一个值设置左上角，第二个值设置右上角和左下角，第三个值设置右下角；
• 四个值：第一个值设置左上角，第二个值设置右上角，第三个值设置右下角，第四个之设置左下角。

border实例4

/*以简写属性的三个值为例*/
border-radius: 10px 20px 30px;
/*下面样式与上面简写属性样式等价*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

(5) 还可以设置x半径和y半径的不同，创建椭圆形角。x半径表示水平半径，y半径表示垂直半径。在border-radius属性中，x半径和y半径用“/”分隔，在border-top-left等四个属性中，传入两个值，第一个值表示x半径，第二个值表示y半径。

border实例5

/*简写属性的x半径设置两个值，y半径设置三个值*/
border-radius: 30px 20px / 20px 10px 30px;
/*在简写属性中设置角度时，值与盒子角的映射是x和y分开的，按照上面提到的规则进行映射*/
/*x半径两个值，第一个值控制左上角和右下角，第二个值控制右上角和左下角*/
/*y半径三个值，第一个值控制左上角，第二个值控制右上角和左下角，第三个值控制右下角*/
border-top-left-radius: 30px 20px;
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 20px 10px;

4. 外边距（margin）

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

属性值：

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin

5. 内边距（padding）

padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。
与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

• padding-top：上部填充
• padding-bottom：下部填充
• padding-left：左部填充
• padding-right：右部填充

6.盒子阴影

在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制，阴影的轮廓与盒子边界border的轮廓一样。该属性的正规语法如下：

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

• inset：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
• offset-x, offset-y：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。
• blur-radius：这是第三个长度值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
• spread-radius：这是第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
• color：如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。
  设置多个阴影时，使用逗号将每个阴影的值隔开。前面的阴影会在后面阴影之上，如果上层有透明度较低的部分，会与下层的颜色重叠，合成新颜色。

border-shadow实例

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* 多个阴影*/
box-shadow: 3px 3px red, -1em 0 0.4em olive, 5px 10px 5px 5px green;

/*全局关键字*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;