CSS盒模型

解释：页面中的所有元素都被看成一个“矩形盒子”，这个盒子包含元素的内容、内边距、边框和外边距。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

标准盒子模型盒子的height和width是content（内容）的宽高，而IE盒子模型盒子的宽高则包括content+padding+border3个部分。box-sizing可以改变元素宽高的计算方式：

• box-sizing: content-box：标准的盒子模型（默认情况）
• box-sizing: border-box：IE盒子模型（常用于响应式）
• box-sizing: padding-box：宽高=content+padding

注意点

1. padding不能为负值，而margin可以为负值（参考原始位置，即原始位置为0）

2. 背景色会平埔到非margin的区域

可以使用background-clip绘制到规定区域，它的取值：content-box|padding-box|border-box

3. margin-top会出现传递

传递到底是个什么现象呢？
就是给子元素设置margin-top的时候，让子盒子顶部距离父盒子有一定的高度。然后我们设置了子盒子的margin-top:30px，但是当我们这么设置的时候，却发现父盒子和子盒子都向下偏移了30px。

<style>
    .parent-box{
        width: 200px;
        height: 200px;
        background-color: pink;
     }
     .child-box{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-top: 30px;
     }
</style>
...
<div class="parent-box">
    <div class="child-box"></div>
</div>

解决办法：

1. 给父元素设置边框，不想让它显示出来，就设置透明。
2. 不用子元素的margin-top，设置父元素的padding-top。
3. 利用BFC解决，我不懂，先放着。。。

4. margin会出现上下叠加

什么叫上下叠加呢？
这种情况只出现在上下方向轴上，当同时给上面的box-top元素设置了margin-bottom和下面的box-bottom元素设置了margin-top时，中间的间距会自动选取二者较大值，而不是二者相加。

<style>
.box{
   width: 400px;
   height: 400px;
   border: 1px solid black;
}
.box-top{
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-bottom: 100px;
 }
.box-bottom{
    width: 100px;
    height: 100px;
    background-color: greenyellow;
    margin-top: 100px;
}
</style>
...
<div class="box">
    <div class="box-top"></div>
    <div class="box-bottom"></div>
</div>

解决办法：

1. 只设置一个其中一个元素的上下方向的margin
2. 利用BFC设置间距为二者相加，而不是叠加。
3. 使用flex布局或grid布局。

块级盒子和内联盒子

块级盒子：div，p，h1...
内敛盒子：span，a，strong...

块级盒子

• 独占一行
• 支持所有样式
• 不设置宽度的时候，与父级元素的宽度相同
• 所占区域是一个矩形

内联盒子

• 不会产生换行
• 有些样式不支持，例如width，height等。
• 不设置宽度的时候，宽度由内容决定。
• 所占区域不一定是矩形
• 内联标签之间会有空隙

自适应盒模型

自适应盒模型指的是，当盒模型不设置宽度时，盒模型相关组成部分的处理方式是如何的。
在父子盒模型中，给父元素设置宽度，而不给子元素设置宽度，那么子元素的宽度会默认跟父元素一样。这个时候，再给子元素设置margin，padding，border属性时，它都会一直嵌在父元素里面（水平方向上），而不是溢出。当给子元素设置了大于等于父元素的宽度值时，子元素将会从父元素里溢出来（水平方向上）。

<style>
.box{
   width: 400px;
   height: 400px;
   border: 1px solid black;
}
.box-inner{
    height: 400px;
    background-color: pink;
    padding: 0 100px;
    margin: 0 10px;
    border: 20px solid skyblue;
}
</style>
...
<div class="box">
    <div class="box-inner">我是子元素的内容</div>
</div>

怪异盒模型（IE6）

所有宽度都是可见宽度，即该元素的宽高指的是content + padding + border的宽高。