作为前端狗的我们，每天都要和网页打交道。当 ui 将设计稿发给你时，css 的知识便显得尤为重要。而 css 这一标记性的语言，却时常让我很头疼：毫无逻辑性，并充满了各种坑爹的潜规则 ，以至于每次做项目时，大部分时间精力都浪费在了调整布局与样式上，详情可点击知乎上的为什么 css 这么难学？
正文
margin 算是性格刚烈的属性了，下面，我将从各个方面讲解 margin 的可怕之处。
元素尺寸的影响
可视尺寸 - clientWidth (border - padding - size)
占据尺寸 - outerWidth (border - margin)
立即学习“前端免费学习笔记（深入）”；
margin 又是怎样影响这两个尺寸的呢？
首先，两个尺寸都需满足一定的条件。
可视尺寸的影响条件
适用于 没有设定 width/height 的块级元素 (宽高设死了，怎么会影响呢？)
其中不包括 float absolute fixed 元素 ，inline水平 ，table-cell 元素只适用于水平方向尺寸（margin-left/margin-right）
占据尺寸的影响条件
适用于 block/inline-block 水平元素
适用于 任何方向
与 width/height 值无关
inline 元素只影响水平方向 (后面会提到)
影响示例
margin 影响元素的可视水平尺寸
margin的可视尺寸示例margin 影响占据尺寸 ，这个可以说是 margin 的本命技能了，就不举例了。
百分比单位
通常而言，margin 的单位中，百分比单位最容易让人头晕。
普通元素的百分比 margin 都是相对于 容器的宽度 计算的
<style> #parent { margin: 20px 400px; width: 100px; height: 200px;}#child { /* 等价于 margin: 5% * 父元素的宽度 10% * 父元素的宽度; */ margin: 5% 10%; /* 父元素的宽度 * 50% */ width: 50%; /* 父元素的高度 * 50% */ height: 50%;}</style><p> </p><p></p>绝对定位的百分比 margin 是相对于 第一个具有定位属性的祖先元素的宽度 计算的(relative/absolute/fixed)
<style> #parent { width: 100px;}#child { /* 注意子元素已增加绝对定位，则百分比按照定位属性的祖先元素的宽度计算， 本例中是浏览器视口 */ position:absolute; /* 等价于 margin: 5% * 父元素的宽度 10% * 父元素的宽度; */ margin: 5% 10%;}</style><p> </p><p></p>
重叠详解
重叠可谓是 margin 中的最重要的潜规则了。
发生情景
相邻的兄弟元素
父级和第一个/最后一个子元素
空的块级元素（自己和自己）
重叠条件
块级元素 （不包括 float 和 absolute 元素）
不考虑 writing-mode，只发生在垂直方向 （margin-top/margin-bottom）
父子 重叠条件
margin-top 重叠
margin-bottom 重叠
父元素 非格式化上下文元素 没有设置 overflow:hidden
父元素没有 border-bottom 设置
父元素没有 padding-bottom 设置
父元素和第一个子元素之间没有inline元素分割
父元素没有 height ，min-height，max-height 限制
父元素 非格式化上下文元素 没有设置 overflow:hidden
父元素没有 border-top 设置
父元素没有 padding-top 设置
父元素和第一个子元素之间没有inline元素分割
空的块级元素 margin 重叠条件
1. 元素没有 border 设置2. 元素没有 padding 设置3. 里面没有 inline 元素4. 没有 height，或者 min-height
计算规则
正正取大值
<style>#top{ margin-top:30px;}#bottom{ margin-bottom:20px;}</style><p></p><p></p>两个元素垂直距离为 : #top元素的 margin-top值正负值相加
<style> #top{ margin-top:-30px;}#bottom{ margin-bottom:20px;}</style><p></p><p></p>两个元素垂直距离为: #top元素的margin-top值 加上 #bottom元素的margin-bottom值负负最负值
<style>#top{ margin-top:-30px;}#bottom{ margin-bottom:-20px;}</style><p></p><p></p>两个元素垂直距离为 : #top元素的 margin-top值父级和第一个/最后一个子元素 发生重叠
给子元素设置垂直方向的 margin ，等同于 给父元素设置相同的垂直方向的 margin 属性，
也就是说 父子元素发生 margin 重叠时， 它们俩共用一个 margin 属性
重叠意义
连续段落或列表之类，如果没有margin重叠，排版会不自然。
页面中任何地方，嵌套或直接放入任何空的 p，都不会影响原来的布局。
遗落空的任意多个 p 元素，不会影响原来的阅读排版。
margin auto
当你使用 margin auto 时，就应该联想到一个词 ：填充
示例如下：
<style>#demo{ width: 500px; margin-right:100px; /* margin-left: 100vw - margin-right - width*/ margin-left:auto;}</style><p></p>