【前端基础篇】盒子模型、边距、边框、外边距合并问题详解

一、盒模型概念与组成

1.1 生活举例

比方买电脑快递过来的整个盒子就可以看做是盒模型，体现在html中就是一个外层标签。

想要盛放东西，那么盒子必须有一定的大小，体现到 css 中通过width、height属性设置。

这个时候将买的电脑放到盒子中，这台电脑就是盒子中所要存放的内容content。

为了防止在运输过程中，电脑屏幕被挤压，需要在盒子内部与电脑之间加一些填充物（泡沫），体现到CSS中就是padding叫做内填充，给外层盒子的填充，加完填充物，需要使用更大的盒子来装电脑。

这个时候根据物品的重要性是否怕压等，选择合适质地的纸盒子，提现到CSS中就是纸盒子边框的线型、厚度、颜色 border。

电脑打包完毕，开始给快递公司运输。但是店家会把所有人的电脑订单一块给快递公司，这个就会有很多天电脑的包装，快递员收的时候，可能对这些贵重物品，做一个简单的处理，让这些盒子之间，设置一定的间隔或填充物来防止盒子之间的挤压。这些盒子外边缘与外边缘之间的间隔或距离体现到CSS中就是 margin。

HTML5+CSS3系列课程
携程网首页-移动端
响应式布局实战之微加建站
校园官网考试实战项目

1.2 概念

CSS（Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子

CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。

HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

二、盒模型组成分析

盒子模型包含四个部