挖掘margin屬性的內涵

alanoddsoff 發布于2019-08-29 15:29 / 2801人閱讀

摘要：合并問題塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距捕獲到的重要信息只發生在塊級元素，但不包括浮動元素和絕對定位元素只發生在和當前文檔流方向的相垂直的方向上由于默認文檔流是水平流，因此發生合并的就是垂直方向會出現外邊距合并的三種基

1、margin合并問題

塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距

捕獲到的重要信息

只發生在塊級元素，但不包括浮動元素和絕對定位元素

只發生在和當前文檔流方向的相垂直的方向上（由于默認文檔流是水平流，因此發生margin合并的就是垂直方向）

會出現外邊距合并的三種基本情況 1、相鄰元素之間

第一行
第二行
p {margin: 1em 0;}

第一行和第二行之間的間距還是1em，因為第一行的margin-bottom和第二行的margin-top合并了

2、父元素和它第一個或最后一個子元素之間

當父元素和它第一個子元素之間沒有邊框、內邊距、行內內容或者清除浮動將兩者的margin-top分開

同樣的當父元素和最后一個子元素之間沒有邊框、內邊距、行內內容、height、min-height/max-height將兩者的margin-bottom分開，那么這時，兩個外邊距就會合并，子元素的外邊距就會溢出到父元素外面（父元素的外邊距為兩者之和，子元素的外邊距為0）

在默認狀態下，下面三種設置是等效的

3、空的塊級元素

當一個塊級元素中不包含任何內容時，并且在其margin-top和margin-bottom之間沒有邊框、內邊距、行內內容、height、min-height將兩者分開，此時外邊距會合并


    

.father {overflow:hidden;}
.son {margin:1em 0;}

此時.father所在的這個父級

元素高度僅僅是1em，因為.son這個空

元素的margin-top和margin-bottom合并在一起了

margin合并的計算規則

正正取大值：取大的那個值

正負值相加：取計算后的值

負負最負值：取絕對負值最大的值

margin合并的意義 1、兄弟元素的margin合并

使圖文信息的排版更加舒服自然，保證元素上下間距一致

2、父子margin合并的意義

在頁面中任何地方嵌套或直接放入任何空標簽，都不會影響原來的塊狀布局

3、自身margin合并的意義

可以避免不小心遺落或者生成的空標簽影響排版和布局

阻止以上margin合并的發生 1、阻止margin-top的合并（滿足一個條件即可）

父元素設置為塊狀格式化上下文元素（比如overflow:hidden）

父元素設置border-top值

父元素設置padding-top值

父元素和第一個子元素之間添加內聯元素進行分隔

2、阻止margin-bottom合并

父元素設置為塊狀格式化上下文元素

父元素設置border-bottom值

父元素設置padding-bottom值

父元素和最后一個子元素之間添加內聯元素進行分隔

父元素設置height、min-height或max-height

3、阻止空標簽margin合并

設置垂直方向的border

設置垂直方向的padding

里面添加內聯元素

設置height或者min-height

以上需要注意的地方

以上情況的組合會產生更復雜的外邊距合并

即使某一外邊距為0，這些規則仍然適用，所以就算父元素的外邊距為0，還是會出現第二種情況

如果參與合并的外邊距中包含負值，合并后的外邊距等于最大的外邊距與最小的外邊距之和

如果所有參與合并的外邊距都為負值，合并后的外邊距等于最小的外邊距的值

2、深入理解margin:auto margin:auto的填充規則

如果一側定值，一側auto，則auto為剩余空間大小此時.son的左邊距為20px、右邊距為80px

如果兩側auto，則平分剩余空間

margin:auto的隱藏用法

為塊級元素自適應左中右對齊和內聯元素使用text-align控制左中右對齊相呼應

3、為什么容器定高、元素定高、margin:auto卻無法垂直居中

默認文檔流是水平方向

解決方案

使用writing-mode改變文檔流的方向

.father{

height:200px;
writing-mode:vertical-lr;

}
.son{

height:100px;
margin:auto;

}

此時.son就是垂直居中對齊的，但是水平方向就無法auto居中

絕對定位元素的margin:auto居中

.father{
    width:300px;
    background-color:#999;
    height:200px;
    position:relative;
 }
.son {
    width:200px;
    background-color:#ccc;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

IE8以及以上版本瀏覽器才支持，但卻是最好用的塊級元素垂直居中對齊方式

GPU云服務器云服務器 margin: margins margin margin縮寫

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113348.html

運營商借云計算實現經營數據拓展新業務

摘要：在當天的論壇上，除了解決大數據問題，云計算還促進了運營商新業務的拓展。因為云計算，大數據的廣泛應用從而成為了可能。電信運營商已在更多地利用云計算將大數據轉化為自己的業務競爭優勢。云計算和大數據這兩個詞已經更多地被放在一起討論，而從應用角度看，大數據更能挑動用戶的神經。目前，并不是所有的企業都面臨著大數據的困擾，但是擁有著幾千萬甚至幾億客戶的運營商，大數據所帶來的問題日益顯現。日前在Tera...

phpmatt 2019-04-25 16:51 評論0 收藏0
邊緣計算與其“等風來”，不如自己創造“風口”

摘要：從某種程度上說，是的成立加速了邊緣計算風口的形成。就像邊緣計算產業聯盟副理事長華為網絡研發部總裁劉少偉所說的那樣，邊緣計算的發展與其等風來，還不如自己創造風口。在月日舉行的邊緣計算產業峰會上，劉少偉詳細介紹了整個聯盟的發展和運作情況。邊緣計算并不邊緣！繼云計算、大數據、物聯網、人工智能這些風口之后，邊緣計算現在也成了業界關注的焦點。2016年邊緣計算產業聯盟（ECC）剛成立之時，很多人還不清...

lijy91 2019-04-29 15:38 評論0 收藏0
Java基礎：Java核心技術提示的易忽略點 Ch5

摘要：而并不是父類對象的引用，而只是給編譯器的一個提示性質的標志。或者自定義的提示在編譯的時候使用當前子類的父類定義的構造器去初始化當前對象。所以，總結起來，的用法歸為兩種一是可以調用父類構造器，二是可以調用父類方法。開篇Java是一門不那么簡單也不那么復雜的語言，Java里面有很多問題和特性是容易被使用者忽視的，這些問題也許會難住新手，同時也許會是老手不小心跌入的無故之坑，只有精于對基礎...

weapon 2019-08-14 15:08 評論0 收藏0
向智能邁進的數字化轉型如何挖掘數據新價值？

摘要：如今，華為產品線提出智，慧未來的理念，以開放生態為基礎，將云人工智能大數據等先進技術與基礎設施進行有機結合，幫助客戶提升效率降低成本并改善用戶體驗，挖掘數據洪流新價值。數字化的未來靠什么？在至頂網聯合英特爾推出的《新至強，決勝數據未來》系列對話節目中，知名學者、商業思想家吳伯凡說，企業應該構筑起數據洪流之上的都江堰。怎么理解？李冰父子曾鬼斧神工在岷江江心筑起了一道都江堰，讓原來的洪水猛獸轉換...

mengera88 2019-04-28 19:39 評論0 收藏0