盒子模型

原文：https://www.cnblogs.com/Ersonnnn/p/14841722.html

一、盒子模型

CSS盒模型本质上是一个盒子，模型定义了盒的每个部分，包括：外边距、边框、内边距、实际内容。

Content box：内容区域，如下图中的蓝色部分。

Padding box：内边距，内容区域外部的空白区域，如下图中的绿色部分。

Border box：边框，包裹内容和内边距，如下图中的黄色部分。

Margin box：外边距，是盒子和其它元素之间的空白区域，如下图中的橙色部分。

二、标准盒模型（box-sizing: content-box）

当我们设置 width 和 height 时，实际上设置的只是 content box 的宽高，整个盒子的宽或高 = content + padding + border。

margin 不计入实际大小（margin 只是影响盒子的外部空间，盒子的真实范围是到边框为止的）

background-color 只作用于 content 和 padding

三、IE盒模型（box-sizing: border-box）

当我们设置高度和宽度时，包含 content、padding、border，即所有可见的部分。此时，如果我们想要得到内容宽度，就需要用宽度减去边框和内边距宽度。

默认浏览器使用的是标准模型，可以通过设置  box-sizing: border-box 来转换成IE盒模型。

减去 border 和 padding 后，content 的实际宽高为 290x90。

border 语法：

border: 1px solid black;  // 大小和颜色非必填（默认 medium / black），border-style 必须设置（默认为 none，不设置不显示）。

margin / padding 语法：

margin： 1px;  1个值  ——> 四个边

margin： 1px 0;  2个值  ——> 上下 | 左右

margin： 1px 5% 1px;  3个值  ——> 上 | 左右 | 下

margin： 1px auto 1em 0;  4个值  ——> 上 | 右 | 下 | 左（逆时针顺序）