欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css中子元素設(shè)置margin-top為什么影響了父元素

  發(fā)布時間：2019-05-22 15:26:21   作者：soso輝   我要評論
這篇文章主要介紹了css中子元素設(shè)置margin-top為什么影響了父元素，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

本文介紹了css中子元素設(shè)置margin-top為什么影響了父元素，分享給大家，具體如下：


<style type="text/css"> 
    *{
        margin: 0px; padding: 0px; 
    }
    .show{
        margin: 0px auto;
        width: 200px;
        height: 100px;
        background-color: #999999;
    }
    .show h2{
        margin-top: 50px;
        cursor: pointer;
    }
</style>

<body>
    <div class="show">
       <h2>crystal</h2>
    </div>
</body>

兩個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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論