關于子元素的margin-top對父級容器無效

fsmStudy 發布于2019-04-23 13:08 / 2384人閱讀

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

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

剛開始我沒看到這個總結時一直是使用自己摸索出來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云服務器父級元素獲取父級元素子元素個數子元素節點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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