前面的话
margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能，很多特殊的布局方法都依赖于它。它看似简单，实际上却蛮复杂，本文就margin负值作详细介绍和梳理
[注意]关于margin部分的基础知识移步至此
表现
虽然margin可以应用到所有元素，但display属性不同时，表现也不同
【1】block元素可以使用四个方向的margin值
【2】inline元素使用上下方向的margin值无效
【3】inline-block使用上下方向的margin负值看上去无效
[注意]inline-block使用上下方向的margin负值只是看上去无效，这与其默认的vertical-align:baseline有关系，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果
重叠
margin负值并不总是后面元素覆盖前面元素，它与元素display属性有关系
【1】两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
【2】当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
【3】当inline元素与block元素重叠时，inline的元素覆盖block元素的背景和内容
【4】当inline-block元素与block元素重叠时，inline-block元素覆盖block元素的背景，但无法覆盖其内容
浮动
【1】block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示
【2】inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示
定位
【1】定位元素(position不为static)覆盖其他元素的背景和内容
【2】将relative属性值应用于inline或inline-block元素后，由于无法改变其行内元素的本质，所以其上下margin依然存在问题
应用
【1】水平垂直居中
由于margin的百分比相对于包含块的宽度，所以在需要居中的元素外面套一个空的
元素，并且利用absolute的包裹性，使该元素的宽高等于需要定位的元素的宽高
.box{ position:relative; width: 200px; height: 200px; background-color: lightgreen; border: 2px solid black;}.out{ position: absolute; left: 50%; top: 50%;} .in{ height: 100px; width: 100px; background-color: pink; margin-left: -50%; margin-top: -50%;}
测试内容
查看更多关于深入理解CSS中的margin负值_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111546