深入理解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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容