css盒子模型（Box Model）

css盒子模型（Box Model）

盒子的组成
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子的大小
盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

为了显得专业一点，我们还可以用带属性的公式表示：

盒子的宽度 = 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

上面说到的是 默认 情况下的计算方法，另外一种情况下，width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值

content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。

border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。

inherit：规定应从父元素继承box-sizing属性的值。

当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

盒子成分分析
margin
margin，盒子的外边框，他是完全透明的，开发者只可以设置它的边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
开发者也可以直接使用简写属性margin同时设置四条边的宽度。

margin示例1

/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

margin示例2

/*margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距*/
margin: 10px 20px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

margin示例3

/*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

margin示例4

/*margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距*/
margin: 10px 20px 30px 40px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

padding
padding表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
开发者也可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与上面的margin类似，可以参考margin的四个实例。

margin和padding的区别

margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。

（margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局，可以分开元素，使元素与元素互不相干；padding用于设置元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。）

语法结构

（1）padding-left:10px; /margin-left:10px;　　　　　　　 　　左内/外边距

（2）padding-right:10px; /margin-right:10px; 　　　　　　　　右内/外边距

（3）padding-top:10px; /margin-top:10px; 　　　　　　 　　上内/外边距

（4）padding-bottom:10px; /margin-bottom:10px; 　　下内/外边距

（5）padding：10px;/ margin:10px; 　　 　　 四边统一内/外边距

（6）padding:10px 20px; /margin:10px 20px; 　　　　　　　　 上下、左右内/外边距

（7）padding:10px 20px 30px;/margin:10px 20px 30px; 　　 上、左右、下内/外边距

（8）padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距

margin的用法说明:

（1）需要在border外侧添加空白时，

（2）空白处不需要有背景（色）时，

（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。

padding的用法说明:

（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），

（2）空白处需要背景（色）时，

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

关于padding：

注意：将Padding设置为负值无效：

在块元素中：

因此，padding在块级元素下，上下左右可以随意设定，会对元素内部发生改变。

在内联元素中：

行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值，行内元素的padding元素，只有padding-left和padding-right有效果，上下不识别；

 

 

关于margin：

margin：0 auto； 只对块级元素起作用

在块元素中：

因此，margin在块级元素下，上下左右可以随意设定。且块级元素的margin的参照基准是前一个元素即相对于自身之前的

元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离。

在内联元素中：

margin-top和margin-bottom对内联元素（对行）的高度没有影响，如果你要改变内联元素的行高即类似文本的行间距，那

么你只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height。

border
border表示盒子的边界，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

border-top：上边界
border-bottom：下边界
border-left：左边界
border-right：右边界
当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;
除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性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;

这还不算完，开发者还可以对单独一条边界单独设置宽度、样式或颜色。以上两组属性都可以作为下面属性的简写属性。

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;

上面的属性是对各边的宽度、样式和颜色进行设置，下面一些有趣的属性可以让盒子变得更加地有创意、更加好看。

首先，了解一下 边界半径 ，也就是圆角。边界半径由属性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;

开发者还可以设置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;

 

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

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
1
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;