資訊專欄INFORMATION COLUMN
摘要：合并問題塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距捕獲到的重要信息只發(fā)生在塊級元素，但不包括浮動元素和絕對定位元素只發(fā)生在和當前文檔流方向的相垂直的方向上由于默認文檔流是水平流，因此發(fā)生合并的就是垂直方向會出現(xiàn)外邊距合并的三種基
1、margin合并問題
塊級元素的上邊距和下邊距有時會合并或者折疊為一個外邊距捕獲到的重要信息
只發(fā)生在塊級元素，但不包括浮動元素和絕對定位元素
只發(fā)生在和當前文檔流方向的相垂直的方向上（由于默認文檔流是水平流，因此發(fā)生margin合并的就是垂直方向）
會出現(xiàn)外邊距合并的三種基本情況 1、相鄰元素之間第一行
第二行
p {margin: 1em 0;}
第一行和第二行之間的間距還是1em，因為第一行的margin-bottom和第二行的margin-top合并了
2、父元素和它第一個或最后一個子元素之間當父元素和它第一個子元素之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容或者清除浮動將兩者的margin-top分開
同樣的當父元素和最后一個子元素之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height/max-height將兩者的margin-bottom分開，那么這時，兩個外邊距就會合并，子元素的外邊距就會溢出到父元素外面（父元素的外邊距為兩者之和，子元素的外邊距為0）
在默認狀態(tài)下，下面三種設置是等效的
3、空的塊級元素
當一個塊級元素中不包含任何內(nèi)容時，并且在其margin-top和margin-bottom之間沒有邊框、內(nèi)邊距、行內(nèi)內(nèi)容、height、min-height將兩者分開，此時外邊距會合并
.father {overflow:hidden;} .son {margin:1em 0;}
此時.father所在的這個父級 正正取大值：取大的那個值 正負值相加：取計算后的值 負負最負值：取絕對負值最大的值 使圖文信息的排版更加舒服自然，保證元素上下間距一致 在頁面中任何地方嵌套或直接放入任何空標簽，都不會影響原來的塊狀布局 可以避免不小心遺落或者生成的空標簽影響排版和布局 父元素設置為塊狀格式化上下文元素（比如overflow:hidden） 父元素設置border-top值 父元素設置padding-top值 父元素和第一個子元素之間添加內(nèi)聯(lián)元素進行分隔 父元素設置為塊狀格式化上下文元素 父元素設置border-bottom值 父元素設置padding-bottom值 父元素和最后一個子元素之間添加內(nèi)聯(lián)元素進行分隔 父元素設置height、min-height或max-height 設置垂直方向的border 設置垂直方向的padding 里面添加內(nèi)聯(lián)元素 設置height或者min-height 以上情況的組合會產(chǎn)生更復雜的外邊距合并 即使某一外邊距為0，這些規(guī)則仍然適用，所以就算父元素的外邊距為0，還是會出現(xiàn)第二種情況 如果參與合并的外邊距中包含負值，合并后的外邊距等于最大的外邊距與最小的外邊距之和 如果所有參與合并的外邊距都為負值，合并后的外邊距等于最小的外邊距的值
如果一側定值，一側auto，則auto為剩余空間大小此時.son的左邊距為20px、右邊距為80px
如果兩側auto，則平分剩余空間 為塊級元素自適應左中右對齊和內(nèi)聯(lián)元素使用text-align控制左中右對齊相呼應 默認文檔流是水平方向
使用writing-mode改變文檔流的方向 .father{ } } 此時.son就是垂直居中對齊的，但是水平方向就無法auto居中
絕對定位元素的margin:auto居中 IE8以及以上版本瀏覽器才支持，但卻是最好用的塊級元素垂直居中對齊方式 文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉載請注明本文地址：http://systransis.cn/yun/113348.html 摘要：在當天的論壇上，除了解決大數(shù)據(jù)問題，云計算還促進了運營商新業(yè)務的拓展。因為云計算，大數(shù)據(jù)的廣泛應用從而成為了可能。電信運營商已在更多地利用云計算將大數(shù)據(jù)轉化為自己的業(yè)務競爭優(yōu)勢。
云計算和大數(shù)據(jù)這兩個詞已經(jīng)更多地被放在一起討論，而從應用角度看，大數(shù)據(jù)更能挑動用戶的神經(jīng)。目前，并不是所有的企業(yè)都面臨著大數(shù)據(jù)的困擾，但是擁有著幾千萬甚至幾億客戶的運營商，大數(shù)據(jù)所帶來的問題日益顯現(xiàn)。日前在Tera... 摘要：從某種程度上說，是的成立加速了邊緣計算風口的形成。就像邊緣計算產(chǎn)業(yè)聯(lián)盟副理事長華為網(wǎng)絡研發(fā)部總裁劉少偉所說的那樣，邊緣計算的發(fā)展與其等風來，還不如自己創(chuàng)造風口。在月日舉行的邊緣計算產(chǎn)業(yè)峰會上，劉少偉詳細介紹了整個聯(lián)盟的發(fā)展和運作情況。邊緣計算并不邊緣！繼云計算、大數(shù)據(jù)、物聯(lián)網(wǎng)、人工智能這些風口之后，邊緣計算現(xiàn)在也成了業(yè)界關注的焦點。2016年邊緣計算產(chǎn)業(yè)聯(lián)盟（ECC）剛成立之時，很多人還不清... 摘要：而并不是父類對象的引用，而只是給編譯器的一個提示性質的標志。或者自定義的提示在編譯的時候使用當前子類的父類定義的構造器去初始化當前對象。所以，總結起來，的用法歸為兩種一是可以調用父類構造器，二是可以調用父類方法。
開篇Java是一門不那么簡單也不那么復雜的語言，Java里面有很多問題和特性是容易被使用者忽視的，這些問題也許會難住新手，同時也許會是老手不小心跌入的無故之坑，只有精于對基礎... 摘要：如今，華為產(chǎn)品線提出智，慧未來的理念，以開放生態(tài)為基礎，將云人工智能大數(shù)據(jù)等先進技術與基礎設施進行有機結合，幫助客戶提升效率降低成本并改善用戶體驗，挖掘數(shù)據(jù)洪流新價值。數(shù)字化的未來靠什么？在至頂網(wǎng)聯(lián)合英特爾推出的《新至強，決勝數(shù)據(jù)未來》系列對話節(jié)目中，知名學者、商業(yè)思想家吳伯凡說，企業(yè)應該構筑起數(shù)據(jù)洪流之上的都江堰。怎么理解？李冰父子曾鬼斧神工在岷江江心筑起了一道都江堰，讓原來的洪水猛獸轉換...元素高度僅僅是1em，因為.son這個空
元素的margin-top和margin-bottom合并在一起了
margin合并的計算規(guī)則
height:200px;
writing-mode:vertical-lr;
.son{height:100px;
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;
}
相關文章
運營商借云計算實現(xiàn)經(jīng)營數(shù)據(jù) 拓展新業(yè)務
邊緣計算與其“等風來”，不如自己創(chuàng)造“風口”
Java基礎：Java核心技術提示的易忽略點 Ch5
向智能邁進的數(shù)字化轉型 如何挖掘數(shù)據(jù)新價值？
發(fā)表評論
0條評論
閱讀 1790·2021-10-11 10:59
閱讀 2442·2021-09-30 09:53
閱讀 1816·2021-09-22 15:28
閱讀 2826·2019-08-29 15:29
閱讀 1590·2019-08-29 13:53
閱讀 3236·2019-08-29 12:34
閱讀 2887·2019-08-26 10:16
閱讀 2687·2019-08-23 15:16
