首頁 > 開發者 > CSS

css + div 布局之 CSS盒模型 外邊距合并問題

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
問題表述： 
那天晚上一個同學給我發來一個問題，原型大概是“一個maindiv嵌套了一個div.class="headr1" 的div 和一個div.class="header2" 的這樣兩個 div,他給maindiv 設定了background="black" header1設定background=“red” 。header2 設定background=“blue” 同時給heder1 設定margin-top:10px; 他預想的是內層 div.heder1 的上邊距 maindiv 上邊有10px的距離 但事實上 出現一個問題   ，內層div 並沒有出現他所預想的那種效果，實際效果是 maindiv 仍然緊貼內層div 整個maindiv 上邊框距離瀏覽器上邊 增加了10px 的外邊距”
問題頁面代碼： 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>無標題文檔</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0;10 }11 #maindiv{12 13 width:800px;14 height:800px;15 background-color:#00FFFF;16 <!-- overflow:hidden; -->17 18 }19 .header1{20 width:600px;21 height:100px;22 margin-top:80px;23 background-color:#FF0000;24 overflow:hidden;25 26 }27 .header2{28 border: 1px solid #00FFFF;29 width:600px;30 height:100px;31 margin-top:20px;32 background-color:#666666;33 overflow:hidden;34 35 }36 </style>37 </head>38 39 <body>40 <div id="maindiv">41   <div class="header1"> 42  新華網馬尼拉４月２３日電（記者趙潔民）中國駐菲律賓大使館發言人張華２３日對媒體說，43 中國並非如某些人所說的那樣，正使中菲在南海黃岩島的緊張局勢升級，而是正使那裡的局勢降級。44 張華說，中國在黃岩島海域的漁政３１０船和海監船０８４號２２日已離開黃岩島海域。目前，45 只有一艘海監船仍在黃岩島海域執法。他指出：“中國撤出兩艘艦船再一次證明，中國並非如某些人說的那樣，46 正使黃岩島的緊張局勢升級，而是使那裡的局勢降級。”47 這位發言人的談話是針對菲律賓一些媒體關於“中國正在使黃岩島局勢升級”的誤導。48 張華強調，中國願意通過外交手段友好解決這一事件。49     </div>50   <div class="header2">51 新華網馬尼拉４月２３日電（記者趙潔民）中國駐菲律賓大使館發言人張華２３日對媒體說，52 中國並非如某些人所說的那樣，正使中菲在南海黃岩島的緊張局勢升級，而是正使那裡的局勢降級。53 張華說，中國在黃岩島海域的漁政３１０船和海監船０８４號２２日已離開黃岩島海域。目前，54 只有一艘海監船仍在黃岩島海域執法。他指出：“中國撤出兩艘艦船再一次證明，中國並非如某些人說的那樣，55 正使黃岩島的緊張局勢升級，而是使那裡的局勢降級。”56 這位發言人的談話是針對菲律賓一些媒體關於“中國正在使黃岩島局勢升級”的誤導。57 張華強調，中國願意通過外交手段友好解決這一事件。58 </div>59 </div>60 61 </body>62 63 </html>
問題頁面效果


在該頁面中<!-- overflow:hidden; --> 被注釋掉了，此時頁面顯示的效果是問題描述的效果，上邊有空出一大塊，最外層的DIV也跟著加了80px外邊距。如果把這句去掉則是我的那個同學預想的效果。
這個也是我在查閱文檔以及上網求助後找到的一個解決方案。這個問題被歸結為"外邊距合并問題" 。
問題產生的原因：

在經過我用Google瀏覽器的查看DOM 結果後我發現還是因為一些瀏覽器的代碼渲染差別造成的，我就到http://w3school.com.cn/ 上尋求解釋。終於在這裡


我看出了問題的存在（盒子沒有獲得 haslayout  造成 margin-top無效），我到百度上又搜尋了一下別人是不是也遇到了同樣的問題，綜合各家說法我最後總結出以下幾個問題的重點：

  1. 在常規文檔流中，2個或以上的塊級盒模型相鄰的垂直margin會被摺疊。最終的margin值計算方法如下：
    a、全部都為正值，取最大者；
    b、不全是正值，則都取絕對值，然後用正值減去最大值；
    c、沒有正值，則都取絕對值，然後用0減去最大值。
    注意：相鄰的盒模型可能由DOM元素動態產生並沒有相鄰或繼承關係。
  2. 相鄰的盒模型中，如果其中的一個是浮動的（floated），垂直margin不會被摺疊，甚至一個浮動的盒模型和它的子項目之間也是這樣。
  3. 設定了overflow屬性的元素和它的子項目之間的margin不會被摺疊（overflow取值為visible除外）。
  4. 設定了絕對位置（position:absolute）的盒模型，垂直margin不會被摺疊，甚至和他們的子項目之間也是一樣。
  5. 設定了display:inline-block的元素，垂直margin不會被摺疊，甚至和他們的子項目之間也是一樣。
  6. 如果一個盒模型的上下margin相鄰，這時它的margin可能摺疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決於它的相鄰元素的margin是否被摺疊。
    a、如果元素的margin和它的父元素的margin-top摺疊在一起，盒模型border-top的邊界定義和它的父元素相同。
    b、另外，任意元素的父元素不參與margin的摺疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那麼元素的border-top邊界位置和原來一樣。
    一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom摺疊。
    注意，那些已經被摺疊覆蓋的元素的位置對其他已經被摺疊的元素的位置沒有任何影響；只有在對這些元素的子項目定位時，border-top邊界位置才是必需的。
  7. 根項目的垂直margin不會被摺疊。
解決方案：
  • 在父層div加上：overflow:hidden；
  • 把margin-top外邊距改成padding-top內邊距;
  • 父元素產生邊距重疊的邊有不為 0 的 padding 或寬度不為 0 且 style 不為 none 的 border
    父層div加： padding-top: 1px;
    讓父元素產生一個 block formating context，以下屬性可以實現
  •  * float: left/right
  •  * position: absolute
  •  * display: inline-block/table-cell(或其他 table 類型)
  •  * overflow: hidden/auto
  • 父層div加：position: absolute;

就此截住！

註：本文的總結也是網上其他前輩的辛勞我這裡知識借用了一下，在此做出聲明：我參考的博文地址有：
http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html

http://hi.baidu.com/jmtbai/blog/item/a91a136ca2d098eb42169456.html

還有一點是我覺得有必要說一下的就是這個效果在IE裡面出現在Google裡面不出現，我找到了一點資料是關於IE瀏覽器關於渲染的原理：
hasLayout：http://baike.baidu.com/view/2945869.htm


　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css div table generator beautiful div box css css center div horizontally how to make div centered in css how to set css class on div in reactjs component output css css ellipsis
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More