一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

什么是盒模型 ？

CSS盒子模型：

如图所示，传统的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成
我们可以通过CSS来设置元素的盒子模型的样式，这里不多说。

旧的盒模型存在的问题:

比如你设置好一个div的宽高都是200px,这时候你再去指定border或者padding就会改变盒子模型的实际大小

    情况1
    div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 这时候设置完，宽高确实是200 */
            border: 10px solid red;
        }

随后设置边框，再测量发现，盒子的实际宽高随着边框的设置增加了， 因为我设置边框的粗细为10px，所以宽增加了20px 高同理

边框会增加盒子实际大小，所以！！有两种解决方案:

1. 测量盒子大小的时候，不量边框
2. 如果测量的的时候包含了边框，则需要 width 和 height 减去边框宽度

    情况2
    div {
            /* width: 200px;
            height: 200px; */
            width: 160px;
            height: 160px;
            background-color: #ffc0cb;

            padding: 20px;
        }

指定了内边距后：
1.内容和边框有了距离，添加了内边框
2.padding影响了盒子实际大小
也就是说，盒子已经有了宽高的情况下，再指定内边距，会把盒子撑大

解决方案：
如果想盒子和效果图保持一致，则让width/height减去多出来的内边距大小即可
eg：
以上是200 * 200的盒子，在padding：20px后，上下左右各多了20px的内边距 所以被撑大为240 * 240（因为左右各20，所以宽变成240，高同理） 要想盒子200 * 200大小不变，且内边距效果也有，则把原来的宽高设置成160 * 160 即可

      可以看出，如果拿旧的盒模型去还原设计稿还是比较麻烦的事情，所以在CSS3中对旧的盒模型进行了优化，我们可以通过box-sizing属性来指定盒模型。
有两种盒子：即可指定为 content-box 和 border-box，这样计算盒子大小的方式就发生了改变

第一种情况：
box-sizing：content-box；（默认的）
盒子大小为 width + padding + border
就是按照以前的计算盒子大小的方式来计算。padding与border还是会撑大盒子

第二种情况：
box-sizing：border-box；
盒子大小为 width
就是我最终写的宽度，padding与border不会撑大盒子，我盒子指定了多大就是多大
padding与border只会往里面缩。

举例:

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 在以前的盒子模型中，我们说border和padding都会改变盒子的大小 */
            border: 10px solid red;
            padding: 10px;

            /* box-sizing: content-box; */
            /* 指定了第一种情况的盒子模型时，这种计算方式还是按照border + padding + width
            盒子整体还是被撑大过后的样子 */

            box-sizing: border-box;
            /* 当我指定了第二种盒子模型时，这种计算盒子大小就是按照 width来的，padding和border
            不会撑大盒子，只会往里缩，盒子大小还是我一开始指定的200*200 */
        }

---

其他情况补充：

padding不会影响盒子大小的情况：

h1 {
            /* width: 100%; */
            /* 哪怕我指定width为100%，只要我有width，就会撑大盒子 */
            height: 50px;
            background-color: pink;
            padding: 20px;
            /* 在padding：20px后，整个盒子的height增加了40，宽不变 */

            /* 在没有给盒子指定width的情况下默认是和父亲一样宽的，
            padding是不会撑大盒子的 */

            /* 这里h1的父亲是body，body就是浏览器的宽度 */
        }

margin常见问题

1.外边距margin典型应用-块级盒子水平居中

<div class="header"></div>

.header {
            width: 900px;
            height: 200px;
            background-color: pink;
            /* margin-left: auto;
            margin-right: auto; */
            /*只要把左右外边距设置为auto即可，与上下没有关系 */
            margin: 100px auto;
        }

外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定了宽度（不然就和父亲一样宽）
2.盒子 左 右 的外边距都设置为：auto

常见的写法：

1. margin-left: auto; margin-right:auto;
2. margin:auto;
3. margin:0 auto;

以上是块元素的水平居中，行内元素或者行内块元素水平居中给 其父亲添加text-align: center;(这个也很好理解，让父亲的内容水平居中)即可 */

2. 外边距合并

情况1
当上下相邻的两个块元素相遇时，如果上面的块元素有margin-bottom 下面的块元素有margin-top，则他们两个之间的距离并不是margin-bottom 与margin-top直接相加，而是取两者中的较大者。 这种现象叫：相邻元素垂直外边距合并

解决方案：尽量只给一个盒子添加外边距margin

情况2
对于两个嵌套关系的（父子）块元素，父元素有上外边距同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值。

.father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;

            /*
            以下的常见的解决方案：
            
            1. 为父元素定义(上)边框
            border: 1px solid red;
            也可以把颜色弄成透明的边框：
            border: 1px solid transparent; */

            /* 2.给父块添加一个内边距
            padding: 1px; */

            /* 3.常用方案 */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }

结论：对于两个嵌套关系的（父子）块元素，父元素有上外边距同时，子元素也有上 外边距，此时父元素会塌陷较大的外边距值。

就像这里，我先让父块元素的上外边距为50，然后想让子块元素也下来（不想让他与父 块贴得太紧），我们给子块元素设置一个100px的上margin。这时候，两个块元素的 外边距合并，形成一个新的外边距（取最大的那个）。就像这里，子元素不但没有 在父块中下移，还使得整个父块多下移了50px（因为子元素的margin-top更大，执行了 子元素的margin-top）。

---

以上大概是我在学习盒模型所遇到的问题，做为一个初学者，我的贴子没有技术含量是事实，我只想记录一下下自学的过程中所踩到的坑或者分享我觉得比较有意思的知识点，请各位爷多多指教~