盒子模型问题,合并和塌陷问题
来自up主亲爱的嘉倩
【电影感vlog】雷克雅未克，遇见大海｜索尼6400
盒子模型问题
- 外边距折叠现象
-
- 1.合并现象
- 2.塌陷问题
- 行内元素
外边距折叠现象
1.合并现象
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
两个垂直布局的块级元素，上下的margin会合并
- 结果会取两者之间margin的最大值
解决办法：只给其中一个盒子设置margin即可
<style> div{ width: 100px; height: 100px; background-color: rgb(50, 63, 63); } .box1{ margin-bottom: 100px; } .box2{ margin-top: 50px; } </style></head><body> <div class="box1"></div> <div class="box2"></div> </body>
解决办法：只给其中一个盒子设置margin即可
.box1{ margin-bottom: 150px; } .box2{ }
2.塌陷问题
父子问题
在div里面有子元素div时，若父元素div在没有设置overflow:hidden或者是border属性，
则父元素div的margin-top的值为父元素div和子元素div中的margin-top的最大值。
互相嵌套的块级元素，子元素的margin-top会作用在父元素上
- 结果导致父元素一起往下移动
<style> .box1{ width: 200px; height: 200px; background-color: rgb(17, 20, 23); } .box2{ width: 100px; height: 100px; background-color: brown; margin-top: 100px; } </style></head><body> <div class="box1"> <div class="box2"></div> </div> </body>
解决办法：
- 给父元素设置overflow:hidden(常用）
- 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
- 转换成行内块元素
- 设置浮动
.box1{ width: 200px; height: 200px; background-color: rgb(17, 20, 23); overflow: hidden; } /* 利用overflow属性或者通过给父级元素设置border可以避免出现父级元素的margin合并的情况，当没有设置这个属性时，该div的margin-top值会取box1的margin-top和其自身margin-top的最大值
行内元素
我们知道行内元素无法设置宽高，那现在对于内外边框也是一样，如果想要通过margin和padding改变行内标签的位置，无法生效，水平可以,垂直不行。
- 行内标签的margin-top和bottom不生效
- 行内标签的padding-top和padding-bottom不生效
- 如果要垂直显示的话，加line-height。
对于这篇学习笔记就暂时到这了，兄弟们加油❤️🤣😂😊😘💕😍😒
从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！
👩🔧👨🔧🧑🔧
如果有出错的，请各位友友指正
