日韩一级在线看,国产8区,52妺嘿嘿午夜福利在线,黄色级片视频视频,69免费视频在线,在线黄片网站,丁香久久婷婷,欧美高清中文字幕精品日韩不卡国产在线

在web網(wǎng)站開發(fā)中，有時(shí)候我們給html元素設(shè)置的margin-top或margin-bottom屬性，但是無效，并沒有取到任何作用,這是什么原因呢?常出現(xiàn)兩種情況：

1、兄弟元素之間margin-top失效

先看下面代碼：

<div>   <div class="box1"> float: left div>   <div class="box2"> clear:both; margin-top:20px; div> div>

兩個(gè)層box1和box2，box1具有浮動(dòng)屬性，box2沒有，這時(shí)候設(shè)置box2的上邊距margin-top沒有效果。
網(wǎng)上能找到的兩種比較靠譜的解釋：

1）：“在css2.1中，水平的margin不會(huì)被折疊；垂直margin可能在一些盒模型中被折疊…”
2）：當(dāng)?shù)谝粋€(gè)層浮動(dòng)，而第二個(gè)沒浮動(dòng)層的margin會(huì)被壓縮，詳見--浮動(dòng)元素后非浮動(dòng)元素的margin的處理。

得到解決問題思路：要浮動(dòng)一起浮動(dòng)，要不就都不浮動(dòng)。
解決辦法：

1）、box2增加float屬性
2）、box1與box2之間增加一層"

2、子元素設(shè)置margin-top作用于父容器


class="box" style="height:100px;background:red;">   class="box2" style="clear:both; margin-top:20px; height:50px; width:500px; background:#000;"

當(dāng)給box2設(shè)置margin-top時(shí)，在FF下僅作用于父容器。
解決辦法：

1）、給父容器box加overflow:hidden;屬性
2）、父容器box加border除none以外的屬性
3）、用父容器box的padding-top代替margin-top

總結(jié)

現(xiàn)象：
當(dāng)兩個(gè)空的塊級(jí)元素嵌套時(shí)，如果內(nèi)部的塊設(shè)置有margin-top屬性，而且父元素沒有下邊解決方法所述的特征，那么內(nèi)部塊的margin-top屬性會(huì)綁架父元素（即將margin-top傳遞凌駕給了父元素）。

就好比一個(gè)小兵，看到上級(jí)有漏洞，就假傳圣旨，利用漏洞擴(kuò)張自己的權(quán)利。只要設(shè)置父元素的border（柵欄）或者padding（隔離墻），就能管住這個(gè)調(diào)皮的下屬。?

解決方法：

1）、設(shè)置父元素或者自身的display:inline-block;
2）、設(shè)置父元素的border:1px aqua solid;(>0)
3）、設(shè)置父元素的padding:1px;(>0)
4）、給父元素設(shè)置overflow:hidden;
5）、給父元素或者自身設(shè)置position:absolute;
6）、設(shè)置父元素非空，填充一定的內(nèi)容。?

這個(gè)現(xiàn)象并不是bug，而是有理論依據(jù)的：

《on having layout》
hasLayout 會(huì)影響一個(gè)盒子和其子孫的邊距重疊。根據(jù)規(guī)范，一個(gè)盒子如果沒有上補(bǔ)白和上邊框，那么它的上邊距應(yīng)該和其文檔流中的第一個(gè)孩子元素的上邊距重疊。

但值得一提的是，只有在FF和Chrome下才會(huì)出現(xiàn)這種margin-top綁架父節(jié)點(diǎn)的情況，在IE6 IE7中均顯示正常，但這恰恰說明了他們是不符合規(guī)范的，而FF合Chrome則是嚴(yán)格遵守規(guī)范的。

本文完~

CSS設(shè)置margin-top失效及解決辦法

1、兄弟元素之間margin-top失效

2、子元素設(shè)置margin-top作用于父容器

2、子元素設(shè)置margin-top作用于父容器