深入理解CSS中的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元素(或inline-block元素)与block元素重叠时,inline元素(或inline-block元素)覆盖block元素的背景,而内容的话, 后面的元素覆盖前面的元素

综上所述浮动
  【1】block元素与浮动元素重叠时,其边框和背景在该浮动元素之下显示,而内容在浮动元素之上显示

【2】inline或inline-block元素与浮动元素重叠时,其边框、背景和内容都在该浮动元素之上显示,个人理解,在普通流布局中,浏览器将页面布局分为内容和背景,内容的层叠显示始终高于背景。block元素分为内容和背景,而inline元素或inline-block元素,它本身就是内容(包括其背景等样式设置)

定位
  【1】定位元素(position不为static)覆盖其他元素的背景和内容

【2】将relative属性值应用于inline元素,由于无法改变其行内元素的本质,所以其上下margin依然存在问题

微信图片_20180629172425.png

你可能感兴趣的:(深入理解CSS中的margin负值)