关于子元素的margin-top对父级容器无效

fsmStudy 发布于2019-04-23 13:08 / 2323人阅读

摘要：其实合并还有其他的形式，比如说父层的与一系列子层中第一个层的合并上层的与下层的合并，此时值为合并值中的最大值。至于负，就从正相邻的最大值中减去负相邻的绝对值的最大值。

如果不想看那么长，看下面这句话就好了。

刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决，发现该方式并不好。亲测给父级加一个overflow不为visiable的属性就直接解决了，简单明了。

这是在做布局时的一个经典问题。那这个问题是怎么产生的呢？主要是合并margin的问题，红色层（子层）的margin-top与黄色层（父层）相合并，产生了共同的margin-top。其实合并margin还有其他的形式，比如说：

父层的margin-top与一系列子层中第一个层的margin-top合并
上层的margin-bottom与下层的margin-top合并，此时margin值为合并margin值中的最大值。至于负margin，就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。如果没有正margin，就用0减去相邻margin的绝对值的最大值
层高为0时，自身的margin-top和margin-bottom合并

那如何解决这个问题呢，w3.org给出了思路：

一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）
建立了新的块格式化上下文的元素（例如，浮动盒与’overflow’不为’visible’的元素）的margin不会与它们的流内子级合并
绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）
内联盒的margin不会合并（甚至与它们的流内子级也不会）
一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非兄弟有空隙
一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，如果该元素没有top border，没有top padding并且该子级没有空隙
一个’height’为’auto’并且’min-height’为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并，如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
盒自身的margin也会合并，如果’min-height’属性为0，并且既没有top或者bottom border也没有top或者bottom padding，并且其’height’为0或者’auto’，并且不含行盒，并且其所有流内子级的margin（如果有的话）都合并了

简单的来讲，就是

都用float来定位（有条件要求，适用范围较广）
为父元素添加overflow不为visiable 的属性（适用范围极广，推荐使用）
为元素添加border（一般不用）
使用绝对定位（适用范围较窄）
父元素增加padding-top属性（改变尺寸，不建议使用）

GPU云服务器云服务器父级元素获取父级元素子元素个数子元素节点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1486.html

html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。 Html 1.解释，主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。是使用html5文档类型。告知浏览器的解析器，用什么文档类型 ...

jindong 2019-08-29 15:14 评论0 收藏0
html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。 Html 1.解释，主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。是使用html5文档类型。告知浏览器的解析器，用什么文档类型 ...

szysky 2019-08-02 10:19 评论0 收藏0
margin详解

摘要：二的赋值普通元素的百分比都是相对于容器的宽度计算。绝对定位元素的百分比，绝对定位元素的百分比是相对于第一个定位祖先元素的宽度计算应用宽高自适应矩形传送门之所以会是，是因为垂直方向上发生重叠。一. margin对尺寸的影响 1.可视尺寸 a.适用于没有设定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...

darry 2019-08-29 11:06 评论0 收藏0
浮动

摘要：浮动会导致父元素高度坍塌示例代码效果如上图所示，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度，导致父元素高度坍塌。最近在学浮动的知识，下面总结了一些浮动的一些特征 1. 块级元素浮动将并排显示，不再独占一行示例代码： Document .box2{ w...

XGBCCC 2019-08-29 12:52 评论0 收藏0