margin
margin作为css中最常用的属性之一,但是在使用过程中我发现对于margin的正值用的很顺畅,但是设置负值就会出现各种各样奇奇怪怪的现象,所以整理一份笔记帮助自己理解margin这个属性。
正值
正值没什么好说的,哪个方向设多少就在哪个方向增加多少外边距。
负值
这里主要整理一下负值的知识点。
基础知识
margin的设置会影响元素的表现形式,那么我们首先要知道决定元素表现形式的三要素,这会对之后的知识点的理解有重大帮助:
- margin设置的方向
- 元素是否浮动
- 元素的定位方式
具体表现形式
元素无浮动无定位
- 敌不动我动:margin-top和margin-left为负,元素向该方向移动。
- 我不动敌动:margin-right和margin-bottom为负,该元素不动,该方向的相邻元素会移动相应的距离覆盖到该元素。
- 这种情况下如果元素没有设置宽度,那么设置了margin-left和margin-right之后元素的宽度会增加,和padding一个效果。
未设置宽度、margin的图示:
未设置宽度、设置margin的图示:
元素无浮动,定位为relative
表现形式和无定位无浮动一致。
元素无浮动,定位为absolute
- margin-top和margin-left和无浮动无定位一样。
- margin-right和margin-bottom无效果,因为脱离了文档流。
元素设置了浮动
(float元素是包裹在他们的block元素中浮动的,不会超出父级block元素)
- 浮动方向和margin方向一致时,元素向相应的方向移动相应的距离。
- 浮动元素和margin方向不一致,元素本身不动,相邻元素向该元素移动相应的距离。
参考文章: