CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型

盒子模型（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联系笔者 删除。
笔者：苦海