盒子模型（Box Model）：

指把HTML页面中的元素看作是一个矩形的盒子，也称容器，这个盒子从内到外由：元素的内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

内容content：

指文本等内容的大小，width和height设置内容的大小，并非包含边框border和内边距padding的值，因此设置其它两项，容器的实际大小会改变。设置其它两项后，经常会出现盒子被撑开的问题，其中一种解决方法就是修改width和height，结合下面内边距设置属性值的个数为1个可得：容器实际大小 = 容器未设置其他两项前的大小 - 2 * (padding + border)，注意：设置margin会改变父级元素的盒子大小。

内边距padding：

指内容（content）和边框（border）之间的距离。当给一个值时设置的是上、下、左、右四个方向的内边距，两个值时设置的是上下、左右方向的内边距，三个值时设置的是上、左右、下方向的内边距，四个值时设置的是上、右、下、左方向的内边距。速记：从上开始顺时针对应给值，没有值的边用对边的值补，当然可以分开写，如：

	padding-left: 1px;

边框border：

指内边距（padding）和外边距（margin）之间的距离，由border-width边框宽度、border-style边框样式、border-color边框的颜色，三者缺一不可显示，其连写为：border：border-width border-style border-color

	div {border: 16px solid red;}

border-width:

边框的宽度一般给像素，当然像em等也是支持的。

border-style：

边框的样式一般设置为solid实线，其值还有：none无边框、hidden隐藏边框（兼容差）、dotted点线（兼容问题）、dashed虚线、double双实线、groove凹槽边框、ridge菱形边框、inset凹边、outset凸边等

border-color:

边框的颜色取值和color的取值一样。

边框拆分：

border可以拆分为上下左右四个边框：border-top上边框、border-bottom下边框、border-left左边框、border-right右边框，拆分后其属性设置和border一样。

	div {border-bottom: 1px solid yellow;}div {border-bottom-width: 16px;border-bottom-style: dotted;border-bottom-color: pink;}

border-collapse合并表格相邻边框:

解决表格table中cellspacing=“0” 外边距设置为0后相邻边框叠加加粗问题,这个属性必须设置在table中才有效。

	table {border-collapse:collapse;/* 当去掉这个属性后，相邻边框叠加变粗 */}td{border: 3px solid black;}<table cellspacing="0"><tr><td>苹果</td><td>苹果</td></tr></table>

border-radius：

设置边框四角的弧度，简称圆角边框，其值和border-width设置类似，这个值可以可以使用一组参数设置，中间用反斜杠/隔开，反斜杠前面控制的是X轴，反斜杠后面控制的是Y轴，反斜杠只能出现一次（20px/40px，一般前后值相同时是省略的）；可以设置为1~4个值，设置多个值时，起始是从左上角开始顺时针分别设置，没有值的角使用其对角的值；也可以给每条分别设置,需要注意的是需要先写上下后写左右属性：

	div {border-radius: 50% 20% 10%;/* 一个圆角值为50%的圆角是一个圆 */}div {border-top-right-radius: 20px/40px;}

外边距margin：

设置盒子以外的距离，这个距离不能放其他内容，margin可拆分为margin-top上边距、margin-bottom下边距、margin-left左边距、margin-right右边距，当为margin时也可以设置多个属性值，每个属性值对应的方向和border一样，都是从上面开始，顺时针旋转分别给值，没有的用对边值补。

实现盒子水平居中的方法：必须是块级元素，必须设置宽度

	div {/* 第一种分开写： */margin-left: auto;margin-right: auto;}div {/* 第二种不分开： */margin: auto;/* 或者使用margin:0 auto; */}

清除默认边距：

浏览器默认有自己的padding，元素有自己的默认margin，此时为了更好的控制布局，可以清除这些默认的值：

	* {margin: 0;padding: 0;}

注意：行内元素没有上下外边距，只有左右外边距，因此设置垂直方向的margin是不起作用的。

垂直方向外边距合并问题：

如果给两个盒子的相邻边分别设置margin，此时这两个盒子之间的距离是其中设置的margin较大的盒子的margin值，如box1的margin-bottom设置为20px,box2的margin-top设置为50px，则它们之间的外边距是50px，实际开发中只设置其中一个外边距即可。

	<style>.father {width: 400px;height: 400px;background-color:aqua;margin-bottom: 100px;}.brother {width: 400px;height: 400px;background-color:rgb(241, 143, 13);margin-top:50px;}</style><div class="father"></div><div class="brother"></div>

嵌套盒子中垂直外边距塌陷问题：

当两个盒子嵌套在一起时，如果给里面的盒子一个margin-top，此时里面的盒子不会相对于外面的盒子向下移动，而是内外盒子保持相对静止向下移动，避免这个问题的方法是给父级元素加border或者padding，但是父级盒子会被撑开，此时使用overflow:hidden可以不被撑开父级盒子而解决盒子塌陷问题，overflow后面会详细介绍，水平方向不会出现这种情况。

	<style>.father {width: 400px;height: 400px;background-color:aqua;border: 1px solid transparent;/* padding: 1px; 给padding也可以解决这个问题 *//* overflow: hidden; 推荐使用这个解决盒子塌陷问题 */}.son {width: 200px;height: 200px;background-color:rgb(241, 143, 13);margin-top:50px;margin-left:30px;}</style><div class="father"><div class="son"></div></div>

标准盒模型:

盒子设置宽高后，再去设置padding、border时， 此时盒子的实际大小会变大。

怪异盒模型:

盒子设置宽高后，再去设置padding、border时，此时盒子不会被撑开，它会挤压内容区（content），开启怪异盒模型的方法：box-sizing:border-box

	div {box-sizing: border-box;/开启怪异盒模型，解决给定宽高后再去设置padding和border时盒子被撑开问题/}

盒子阴影box-shadow：

给一个盒子加上阴影效果，其属性值分别为：box-shadow: h-shadow水平阴影,必选 v-shadow垂直阴影,必选 blur模糊距离 spread阴影尺寸 color阴影颜色 inset内/外阴影，默认是外阴影不用写，当需要为内阴影时在最后加上inset即可。

	div {box-shadow: 2px 2px 3px 4px pink inset;}

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海