亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

本文介紹了css中子元素設置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設置了margin-top后，發(fā)現并沒有跟想象的一樣，而發(fā)現父元素產生了間距。

如上圖。

原理：margin折疊

在css2.1盒模型仲規(guī)定的內容

因為嵌套也屬于毗鄰，所以在樣式表中優(yōu)先級更高子元素的margin會覆蓋外層父元素定義的margin。

父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳圣旨，把自己的margin當領導的margin執(zhí)行。

解決辦法：

1、父元素或者子元素使用浮動或者絕對定位。
2、父級設置overflow:hidden
3、父級設置padding（破壞非空白的折疊條件）
4、父級設置border

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

相關文章

最新評論