浏览器中的盒子模型

浏览器中的盒子模型

1. 盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
Content : 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding : 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border : 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin : 这是最外面的区域，是盒子和其他元素之间的空白区域，大小通过 margin 相关属性设置。

2. 盒模型分类

CSS盒子类型使用box-sizing属性进行设置.

box-sizing：content-box （内容盒子）
盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）

box-sizing：border-box 边框盒子（怪异模型）
盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；

默认浏览器会使用标准模型，如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 元素上，然后设置所有元素继承该属性，正如下面的例子。

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

3. 在浏览上查看盒模型

Google的 DevTools 中查看一个元素

Firefox 的 DevTools 中查看一个元素

4. 外边距重叠

有三种情况会形成外边距重叠：
1.同一层相邻元素之间
相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix 清除浮动。

<style>
p:nth-child(1){
  margin-bottom: 13px;
}
p:nth-child(2){
  margin-top: 87px;
}
</style>

<p>下边界范围会...</p>
<p>...会跟这个元素的上边界范围重叠。</p>

2.没有内容将父元素和后代元素分开
如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

<style type="text/css">
    section    {
        margin-top: 13px;
        margin-bottom: 87px;
    }

    header {
        margin-top: 87px;
    }

    footer {
        margin-bottom: 13px;
    }
</style>

<section>
    <header>上边界重叠 87</header>
    <main></main>
    <footer>下边界重叠 87 不能再高了</footer>
</section>

3.空的块级元素
当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距padding、高度height、最小高度min-height 、最大高度max-height 、内容设定为 inline 或是加上clear-fix的时候。

<style>
​​​​​​p {
  margin: 0;
}
div {
  margin-top: 13px;
  margin-bottom: 87px;
}
</style>

<p>上边界范围是 87 ...</p>
<div></div>
<p>... 上边界范围是 87</p>

以上这些内容都是发生在 Block-Level 的元素，设定 floating 和 absolutely positioned 的元素完全不用担心边界重叠的问题。