从零开始学前端 - 7. CSS盒模型 margin和padding详解

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

从零开始学前端 - 7. CSS盒模型 margin 和 padding 详解

一、CSS盒模型
二、外边距 margin
- 1. margin-top 失效
- 2. margin-bottom 与 margin-top 的冲突
- 3. 内联元素 margin-top 与 margin-bottom 失效
三、内边距 padding

一、CSS盒模型

css 盒模型(Box Model)，由元素内容（content）、内边距（padding）、边框（border）、外边距（margin）四个要素构成。每一个 HTML 元素都可以看成是一个盒子，里面填充各种各样的内容。
盒模型分为两种，一种是 W3C 规定的标准盒模型，一种 IE 浏览器特有的怪异盒模型。目前的浏览器大部分都支持标准盒模型，与此同时也保留了对怪异盒模型的支持。
可以使用 CSS 属性 box-sizing 来控制盒模型。设置 box-sizing: content-box;，浏览器选择使用标准盒模型方式来解析，设置 box-sizing: border-box，浏览器将采用怪异盒模型来解析。

盒模型示意图

例：

<div style="width:200px;height:200px;margin:25px;padding:25px;border:10px solid #000;box-sizing: content-box;">标准盒模型
</div>
<div style="width:200px;height:200px;margin:25px;padding:25px;border:10px solid #000;box-sizing: border-box;">怪异盒模型
</div>

浏览器显示结果：

我们可以很明显的看出，标准盒模型比怪异盒模型所占据的面积要大很多，我们用 Chrome 浏览器的盒模型示意图来分析一下两个盒模型的区别：

我们发现，标准盒模型的大小并不是我们设置的 200 * 200 ，而是 270 * 270；怪异盒模型的大小虽然是我们设置的 200*200，但实际内容的大小只有 130*130。而且两个模型在计算大小的时候，都没有计算 margin 的大小；实际上，两个元素在页面中占据的总宽度，还应该加上 margin 的数值，即：320 * 320 和 250 * 250。
这是因为在标准盒模型下，设置的宽高就是实际可用的宽高，而边距和边框的大小，都没有计算在内；在怪异盒模型下，设置的宽高就是边框、内边距、元素实际可以宽高三者的总和。
也就是说：

标准盒模型

元素总宽 = margin + border + padding + width ；
内容总宽：content = width ；

怪异盒模型

元素总宽：总宽 = margin + width；
内容总宽：content = width - boredr - padding；

在我们实际工作中，一般都采用怪异盒模型模式对所有元素进行渲染，一方面是为了兼容 IE 的低版本浏览器，一方面也是因为计算起宽度来要更加的方便。初次使用的时候可能会不太习惯，但随着我们不断的学习和使用，我们会逐渐的习惯，也会喜欢上使用怪异盒模型。我们常用的大部分 UI 框架，也都是采用的怪异盒模型。
实例：要求实现一个左右布局，各占50%的宽度。
这很简单就能实现：

<div style="width: 50%;height: 100px;background-color: #f00;float: left;">我是左边</div>
<div style="width: 50%;height: 100px;background-color: #ff0;float: right;">我是右边</div>

突然，一个新的需求出现了，要求左边要加上边框，你一想，这不简单么，立马给左边加上了一个边框。

<div style="width: 50%;height: 100px;background-color: #f00;float: left;border:5px solid #000;">我是左边</div>
<div style="width: 50%;height: 100px;background-color: #ff0;float: right;">我是右边</div>

意外出现了，左边和右边的不相等了。因为左边加上了边框，在标准盒模型下，边框的宽度不会计算到设置的宽度里面，所以宽度溢出了，这样就导致两边不一致了。左边的实际宽度变为了 50% + 5px；
而使用怪异盒模型，这样的问题就迎刃而解。

<div style="width: 50%;height: 100px;background-color: #f00;float: left;border:5px solid #000;box-sizing: border-box;">我是左边</div>
<div style="width: 50%;height: 100px;background-color: #ff0;float: right;">我是右边</div>

二、外边距 margin

前面我们已经简单介绍过了 margin 属性的意义和语法，接下来我们来介绍一下使用 margin 时会遇到的各种经典问题。

1. margin-top 失效

<div style="width: 100%;height: 100px;background-color: #000;"><div style="width: 50px;height: 50px;background-color: #f00;margin-top: 20px;"></div>
</div>

我们给子元素添加了 margin-top: 20px;，希望它能向下移动 20px 的距离，但浏览器的显示如下：

我们发现它并没有按照我们的想法进行，而是带着他的父级 div 一起向下移动了 20px。这是因为当两个块级元素嵌套时，如果内部的块设置有 margin-top 属性，而且父元素没有下边解决方法所述的特征，那么内部块的 margin-top 属性会绑架父元素。
解决方案如下，应结合项目的实际情况，选择合适的方式：

设置父元素或者自身的 display:inline-block；
设置父元素的 border:1px aqua solid；
设置父元素的 padding:1px；
给父元素设置 overflow:hidden；
给父元素或者自身设置 position:absolute；
设置父元素非空，填充一定的内容；

2. margin-bottom 与 margin-top 的冲突

<div style="width: 100px;height: 100px;background-color: #f00;margin-bottom: 20px;">div1</div>
<div style="width: 100px;height: 100px;background-color: #ff0;margin-top: 20px;">div2</div>

我们分别给两个元素设置了上下边距，按照常理，两个元素之间的外边距应该是 20 + 20 = 40px ，浏览器显示效果如下：

我们发现两个 div 之间的距离是 20px，而不是我们想要的 40px。这是因为：垂直方向上，块级元素的相邻外边距会重合。

外边距的取值分为三种情况：

如果两个外边距都为正值，那么外边距的值取两个元素中最大的值；
如果外边距中有负值，那么外边距的值等于正值 - 负值的绝对值；
如果外边距都为负值，那么外边距的值等于 0 - 最小负值的绝对值；

当结果为正时：两个元素之间的距离为计算的结果。
当结果为负时：div2 会向上移动计算结果的距离。

3. 内联元素 margin-top 与 margin-bottom 失效

内联元不允许设置上下方向的 margin，即使设置了，也不会生效。

三、内边距 padding

例：

<span style="padding:20px;">这是一个内联元素</span>

浏览器显示：

我们发现，padding-top 对内联元素并没有起作用，而且元素的 padding 部分也拥有背景颜色。也就是说：

对内联元素而言，padding-top 不会生效；
元素添加的背景会从 padding 区开始；

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!

请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。
都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。