盒子模型的外邊距塌陷和合并問題及解決方案

morgan 發(fā)布于2019-08-29 17:30 / 1304人閱讀

摘要：外邊距塌陷當(dāng)嵌套的兩個(gè)塊元素給子盒子加向上的外邊距時(shí)父盒子會(huì)跟著掉下來此時(shí)就是外邊距塌陷解決方案給父盒子加給父盒子加上邊框給父元素加屬性當(dāng)同一個(gè)效果能用解決就最好不用解決注意盒子在網(wǎng)頁中所占地面積自身寬高內(nèi)邊距邊框外邊距外邊距合并當(dāng)垂直排列

外邊距塌陷:

         當(dāng)嵌套的兩個(gè)塊元素,給子盒子加向上的外邊距時(shí),父盒子會(huì)跟著掉下來,此時(shí)就是外邊距塌陷.
          解決方案:
         1.給父盒子加padding
         2.給父盒子加上邊框
         3.給父元素加overflow:hidden 屬性
         
         當(dāng)同一個(gè)效果能用padding解決就最好不用margin解決

注意：盒子在網(wǎng)頁中所占地面積=自身寬高+內(nèi)邊距+邊框+外邊距

外邊距合并:
當(dāng)垂直排列的兩個(gè)塊元素,同時(shí)給上面的盒子加向下的外邊距,給下面的盒子加向上的外邊距,此時(shí)會(huì)造成外邊距合并,當(dāng)數(shù)值相同的時(shí)候,就是那個(gè)值,當(dāng)值不同的時(shí)候,取最大的那個(gè)值

GPU云服務(wù)器云服務(wù)器 html 的外邊距外邊距重疊 html外邊距上下 html外邊距顏色

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114368.html

相關(guān)文章

HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷。塊級(jí)父元素與其第一個(gè)最后一個(gè)子元素如果塊級(jí)父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時(shí)，此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象。盒模型在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=...

frank_fun 2019-08-01 18:29 評(píng)論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷。塊級(jí)父元素與其第一個(gè)最后一個(gè)子元素如果塊級(jí)父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時(shí)，此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象。盒模型在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=...

Aomine 2019-08-29 14:22 評(píng)論0 收藏0
CSS（三）

摘要：盒子模型示意圖如下把元素叫做盒子，設(shè)置對(duì)應(yīng)的樣式分別為盒子的邊框盒子內(nèi)的內(nèi)容和邊框之間的間距盒子與盒子之間的間距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。CSS盒子模型盒子模型解釋元素在頁面中顯示成一個(gè)方塊，類似一個(gè)盒子，CSS盒子模型就是使用現(xiàn)實(shí)中盒子來做比喻，幫助我們?cè)O(shè)置元素對(duì)應(yīng)的樣式。盒子模型示意圖如下：把元素叫做盒子，設(shè)置對(duì)應(yīng)的樣式分別為：盒子的邊框(bor...

番茄西紅柿 2019-04-23 13:43 評(píng)論0 收藏0
【css】常見問題

摘要：將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。我們知道內(nèi)聯(lián)元素是無法設(shè)置寬高的，所以一旦將元素的屬性設(shè)為，設(shè)置屬性和是沒有用的。這個(gè)屬性值融合了和的特性，即是它既是內(nèi)聯(lián)元素，又可以設(shè)置和。 CSS 中 inline 元素可以設(shè)置 padding 和 margin 嗎？行內(nèi)元素設(shè)置width,height無效。但是設(shè)置margin和padding是有效的。行內(nèi)非替換元素的外邊距不會(huì)改變一個(gè)...

renweihub 2019-08-29 16:25 評(píng)論0 收藏0