本文详细探讨了CSS中的外边距合并与折叠现象，包括它们的成因、解决方法以及在实际布局中的影响。重点讲解了如何处理块级元素的margin塌陷问题，提出了设置边框、内边距、overflow隐藏以及转换元素模式等解决方案。同时，阐述了行内元素的margin与padding在不同方向上的表现。此外，还概述了常见的布局方式如文档流和浮动布局的特点及其在页面设计中的应用。
专题难点解析目录
♥一. 外边距合并现象
♥二. 外边距折叠现象——塌陷现象
♥三. 行内元素的margin与padding无效的情况
♥四. 布局：布局方式：及特点
♥五 : 浮动
♥六: 浮动的特点及清楚浮动下次分享啦
————————————————
♥♥一. 外边距合并现象
成因： 垂直布局的块级元素，margin会合并。
margin最终取大的margin值作为两者之间的距离。
解决： 只给其中一个盒子设置margin就可以了
注意点：必须是垂直布局：包括：上下垂直&左右垂直&必须是块级元素，如果不是块级元素， margin不会合并，也就是说，只会发生在块元素与行内块元素之间，行内元素则不会有外 边距塌陷现象
♥二. 外边距折叠现象——塌陷现象
成因： 相互嵌套的块级元素，子元素的margin-top会作用在父元素上
现象： 子盒子带着父盒子一起跑（俗称坑爹现象）
解决：
1：给父元素盒子设置上边框border-top,或者上内边距-padding-top(起到分隔开margin-top的 作用
缺点：如果设计稿布局不需要边框或者内边距，那加了就不好了
2，给父元素盒子设置：overflow: hidden,
3.转换元素模式：转换成块元素（必须是相互嵌套&只发生在块元素）
4.设置浮动（下次分享）
（注意点：一定是块级元素&相互嵌套才会产生坑爹现象，那就可以转换成不是块级元素）
♥三. 行内元素的margin与padding无效的情况
现象：1.水平方向的margin和padding布局中有效
2.垂直布局方向的margin和padding布局中无效
♥四. 布局：布局方式：及特点
文档流：块级元素 --------------从上往下排，垂直布局，独占一行，
行内块与行内元素---从左往右排，水平布局，一行排（空间不够自动换行）
♥五 : 浮动
float--------float: left;
float: right;
作用：最开始是用来做---------图文环绕。
现在是用来做布局-------是元素盒子排列进行布局
（注意点：浏览器在解析行内块元素或者行内标签的时候，如果标签换行了，会产生一个空格的的距离）
扫一扫
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
