最近在整理巩固面试相关的资料,又看到了熟悉的老朋友:margin,当时觉得其读起来很亲切,现在又发现很多遗忘的知识点。
margin,译为“外边缘”,在CSS作为属性定义元素周围的空间,从以下盒模型中能更好的理解margin。
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
margin属性可以有一到四个值。
margin塌陷(又称margin重叠)指文档流内,块级元素与块级元素垂直方向上的 margin 合并(塌陷)为单个 margin,且只发生在垂直方向。行内元素不存在margin 塌陷,因为行内元素不占有外边距,同样道理float元素也不存在margin合并。
总结为:
解决方案:
1.BFC块级格式化上下文,创建隔离的容器
<body> <style> .aa { display: flex; flex-direction: column; width: 300px; } .bb { width: 200px; height: 200px; border: 1px solid #333; margin-top: 10px; } </style> <div class="aa"> <div class="bb" style="margin-bottom: 10px;"></div> <div class="bb" style="margin-top: 10px;"></div> </div> </body>
2.子元素浮动定位,父元素清除浮动
<body> <style> .aa { border: 1px solid red; } .bb { width: 200px; height: 200px; border: 1px solid #333; } .clearfix:after { content:''; display: table; clear:both; } </style> <div class="aa clearfix"> <div class="bb" style="margin-bottom: 10px;"></div> <div class="bb" style="margin-top: 10px;float:left;"></div> </div> </body>
3.修改代码,添加空div,设置为flex布局
<body> <style> .aa { border: 1px solid red; } .bb { width: 200px; height: 200px; border: 1px solid #333; } </style> <div class="aa"> <div class="bb" style="margin-bottom: 10px;"></div> <div style="display: flex;"></div> <div class="bb" style="margin-top: 10px;"></div> </div> </body>
更多参考:https://blog.csdn.net/Celester_best/article/details/127455732