關(guān)于子元素的margin-top對父級容器無效

fsmStudy 發(fā)布于2019-04-23 13:08 / 2391人閱讀

摘要：其實(shí)合并還有其他的形式，比如說父層的與一系列子層中第一個層的合并上層的與下層的合并，此時值為合并值中的最大值。至于負(fù)，就從正相鄰的最大值中減去負(fù)相鄰的絕對值的最大值。

如果不想看那么長，看下面這句話就好了。

剛開始我沒看到這個總結(jié)時一直是使用自己摸索出來paddin-top解決，發(fā)現(xiàn)該方式并不好。親測給父級加一個overflow不為visiable的屬性就直接解決了，簡單明了。

這是在做布局時的一個經(jīng)典問題。那這個問題是怎么產(chǎn)生的呢？主要是合并margin的問題，紅色層（子層）的margin-top與黃色層（父層）相合并，產(chǎn)生了共同的margin-top。其實(shí)合并margin還有其他的形式，比如說：

父層的margin-top與一系列子層中第一個層的margin-top合并
上層的margin-bottom與下層的margin-top合并，此時margin值為合并margin值中的最大值。至于負(fù)margin，就從正相鄰margin的最大值中減去負(fù)相鄰margin的絕對值的最大值。如果沒有正margin，就用0減去相鄰margin的絕對值的最大值
層高為0時，自身的margin-top和margin-bottom合并

那如何解決這個問題呢，w3.org給出了思路：

一個浮動的盒與任何其它盒之間的margin不會合并（甚至一個浮動盒與它的流內(nèi)子級之間也不會）
建立了新的塊格式化上下文的元素（例如，浮動盒與’overflow’不為’visible’的元素）的margin不會與它們的流內(nèi)子級合并
絕對定位的盒的margin不會合并（甚至與它們的流內(nèi)子級也不會）
內(nèi)聯(lián)盒的margin不會合并（甚至與它們的流內(nèi)子級也不會）
一個流內(nèi)塊級元素的bottom margin總會與它的下一個流內(nèi)塊級兄弟的top margin合并，除非兄弟有空隙
一個流內(nèi)塊級元素的top margin會與它的第一個流內(nèi)塊級子級的top margin合并，如果該元素沒有top border，沒有top padding并且該子級沒有空隙
一個’height’為’auto’并且’min-height’為0的流內(nèi)塊級盒的bottom margin會與它的最后一個流內(nèi)塊級子級的bottom margin合并，如果該盒沒有bottom padding并且沒有bottom border并且子級的bottom margin不與有空隙的top margin合并
盒自身的margin也會合并，如果’min-height’屬性為0，并且既沒有top或者bottom border也沒有top或者bottom padding，并且其’height’為0或者’auto’，并且不含行盒，并且其所有流內(nèi)子級的margin（如果有的話）都合并了

簡單的來講，就是

云服務(wù)器 GPU云服務(wù)器父級元素獲取父級元素子元素個數(shù) 子元素節(jié)點(diǎn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1486.html

登陸后可評論

我要關(guān)注我要私信

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说