資訊專欄INFORMATION COLUMN
摘要：兩個，子元素設(shè)置了后，發(fā)現(xiàn)并沒有跟想象的一樣，而發(fā)現(xiàn)父元素產(chǎn)生了間距。父元素的第一個子元素的上邊距如果碰不到有效的或者就會不斷一層一層的找自己領(lǐng)導父元素，祖先元素的麻煩。父級設(shè)置父級設(shè)置破壞非空白的折疊條件父級設(shè)置
crystal
兩個div，子元素div設(shè)置了margin-top后，發(fā)現(xiàn)并沒有跟想象的一樣，而發(fā)現(xiàn)父元素產(chǎn)生了間距。
如上圖。
原理：margin折疊
在css2.1盒模型仲規(guī)定的內(nèi)容
因為嵌套也屬于毗鄰，所以在樣式表中優(yōu)先級更高子元素的margin會覆蓋外層父元素定義的margin。
父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領(lǐng)導”(父元素，祖先元素)的麻煩。只要給領(lǐng)導設(shè)置個有效的 border或者padding就可以有效的管制這個目無領(lǐng)導的margin防止它越級，假傳圣旨，把自己的margin當領(lǐng)導的margin執(zhí)行。
解決辦法：
1、父元素或者子元素使用浮動或者絕對定位。
2、父級設(shè)置overflow:hidden
3、父級設(shè)置padding（破壞非空白的折疊條件）
4、父級設(shè)置border
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114690.html
摘要：原因是因為沒有預(yù)先設(shè)置高度，所以高度由其包含的子元素高度決定。而浮動脫離文檔流，所以子元素并不會被計算高度。此時的中，相當于中子元素高度為，所以發(fā)生了父元素高度塌陷現(xiàn)象。因為凡是能創(chuàng)建一個，就能達到包裹浮動子元素的效果。 浮動具有以下特性： 蓋不住的文本 浮動元素后面不是塊級元素，后面的元素將會和它并排（除非設(shè)置了元素的寬度，并且屏幕放不下時將會換行） 浮動元素的上一個元素如果沒有浮...
寫在最前：BFC看起來是個很陌生的概念但它卻時時發(fā)生在我們工作中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應(yīng)布局？都和BFC有這密不可分的關(guān)系，下面走進切圖妞的世界，分分鐘搞定BFC！ 一、什么是BFC？ BFC概念 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素...
寫在最前：BFC看起來是個很陌生的概念但它卻時時發(fā)生在我們工作中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應(yīng)布局？都和BFC有這密不可分的關(guān)系，下面走進切圖妞的世界，分分鐘搞定BFC！ 一、什么是BFC？ BFC概念 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素...
閱讀 1300·2023-04-25 19:33
閱讀 1183·2021-10-21 09:39
閱讀 3656·2021-09-09 09:32
閱讀 2634·2019-08-30 10:58
閱讀 1638·2019-08-29 16:17
閱讀 889·2019-08-29 15:29
閱讀 2902·2019-08-26 11:55
閱讀 2670·2019-08-26 10:33
