1.背景介绍
2.知识剖析
今天的小课堂，只需要了解标准盒模型，盒模型由内至外分别是content、padding、border、margin，其中可以使用百分比的有content
,padding,margin，边框border则不可以用%单位
元素水平分为3种：block水平，inline-block水平，inline水平，3种元素各有不同的表现。
block水平默认情况下，水平竖直方向上的padding,margin有效。
inline元素水平排列，竖直方向上的padding,margin无效。
inline-block水平元素，水平竖直方向上的padding,margin有效。
简单讲讲margin与padding的语法，即一个值，两个值，三个值这些大家都应该明白了（DEMO1）
今天主要讲讲别的东西，margin与padding的区别(个人理解)
区别一：pdding能增加元素的容器的可视区域，margin则会减少默认块级元素的可视区域(demo2)
区别二：margin有负值，padding不能使用负值。（demo1验证）
margin与padding的%值，真的是继承父级width吗？
请看demo3
结论，未使用绝对定位（固定定位）的元素内外边距的%值都是继承父级盒子，如果是绝对定位(固定定位)则是根据其继承关系的定位元素，没有就是根据html元素为基准
关于margin负值，padding不能负值
Dome1演示
<
h4
>margin外边距重叠
</
h4
>
<
p
>margin外边距重叠的种类
</
p
>
<
p
>margin外边距重叠的前提1、正常的块级元素，（非浮动和绝对定位元素)
</
p
>
<
p
>margin外边距重叠的前提2、(writing-model为正常流)
</
p
>
<
p
>如何消除margin外边距重叠
</
p
>
（demo4）
<
h4
>消除margin重叠的规则
</
h4
>
<
p
>父级与子级消除margin重叠
</
p
>
<
p
>父级BFC化
</
p
>
<
p
>父级有padding
</
p
>
<
p
>父级有border
</
p
>
<
p
>父级与子级之间没有inline水平元素
</
p
>
<
p
>父级与最后一个子级之间发生margin-bottom重叠，父级没有设置height，max-height，min-height的限制
</
p
>
<
h4
>空块级元素的消除重叠
</
h4
>
<
p
>该元素没有border
</
p
>
<
p
>该元素没有padding
</
p
>
<
p
>该元素没有height，min-height的限制
</
p
>
<
p
>该元素没有inline元素
</
p
>
<
h4
>margin:auto(DEMO5)
</
h4
>
<
h4
>margin:auto的表现
</
h4
>
<
h4
>margin：负值的应用（demo6）
</
h4
>
3.常见问题
是真的不起作用？还是height的关系（DEMO7）
4.解决方案
5.编码实战
DEMO
6.扩展思考
<
p
>inline水平元素竖直方向上的padding的真的不生效？
</
p
>
<
p
>%值真的是继承父级的width
</
p
> demo8
7.参考文献
参考一：张鑫旭慕课网margin,padding深入理解视频
8.更多讨论
<
p
>讨论点1：margin与padding何时使用呢？
</
p
>
<
p
>讨论点2：margin与padding配合使用的效果在哪里？(等高布局)
</
p
>
三个问题：
1、margin与padding的%值，真的是继承父级width吗？
结论，未使用绝对定位（固定定位）的元素内外边距的%值都是继承父级盒子，如果是绝对定位(固定定位)则是根据其继承关系的定位元素，没有就是根据html元素为基准
关于margin负值，padding不能负值
2、
如果是inline水平和inline-block水平的元素，margin无论是正值还是负值都不会影响盒子的尺寸，只会改变盒子的位置，如果是margin-left负值，盒子会向左侧移动，如果是margin-top负值则会向上移动，如果是margin-right和margin-bottom则会影响右侧和下面的盒子，右侧会左移，下面的盒子会浮上来。
如果是块级元素设置了width，那么它的表现和上面所述一样。
如果没有设置width，left和right方向设置负值，那么就会在该方向上扩充容器水平方向尺寸。
3、
margin 负值的left和right的表现说有区别也有区别，说有区别，就是两个inline-block元素，第一个设置margin-left的负值，发现这两个元素都左移。这是区别。
说没有区别是对第二个元素的影响
此时设置红色盒子的margin-right:-20px;和绿色margin-left:-20px；变现是一样的，所以这里对绿色盒子来说margin-left和margin-right负值没有区别。
结论：盒子本身的margin-left负值影响自身，margin-right的负值影响下一个盒子，这是区别。
如果是对绿色盒子，红色盒子的margin-right和自身margin-left来说就没有区别。
欢迎加入IT修真院
IT修真院是一个免费的线上IT技术学习平台。
每个职业以15个左右的task为初学者提供更快速高效的学习方式；
所有task均是从真实项目中提炼出来的技能点
强调实战演练+自学优先+师兄辅导的学习方式
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑答惑。
亲，准备好加入我们这个变态成长的修真宝地了吗？
点击官网注册 ，开始自己的修真之旅吧！