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

HTML中div嵌套div的margin不起作用的解決方法

  發(fā)布時(shí)間：2020-07-30 09:26:56   作者：消逝的風(fēng)i   我要評(píng)論
這篇文章主要介紹了HTML中div嵌套div的margin不起作用的解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

下面介紹一下div嵌套div時(shí)margin不起作用的解決方案。

順便科普下margin的定義和用法。

div嵌套的HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: dodgerblue;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: gray;
        }
        .box .child{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

        </div>
    </div>
</body>
</html>

實(shí)際效果：

這其實(shí)不是我們想要的效果，先來說下為什么會(huì)出現(xiàn)這個(gè)問題：

有兩個(gè)嵌套關(guān)系的div，如果外層div的父元素padding值為0，那么內(nèi)層div的margin-top或者margin-bottom的值會(huì)“轉(zhuǎn)移”給外層div。

解決該問題我們需要先了解ie特有的一個(gè)屬性haslayout。

我們要實(shí)現(xiàn)的效果是這樣的：

最后我們來說一下解決方法：

1、讓父元素生成一個(gè)block formating context（塊級(jí)格式化上下文，可自行百度了解），以下屬性可以實(shí)現(xiàn)

float: left/right

position: absolute

display: inline-block

overflow: hidden/auto

2、給父元素添加border或者padding

以方法一的overflow:hidden為例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: dodgerblue;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: gray;
            overflow: hidden;
        }
        .box .child{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

        </div>
    </div>
</body>
</html>

最終效果：

到此這篇關(guān)于HTML中div嵌套div的margin不起作用的解決方法的文章就介紹到這了,更多相關(guān)html時(shí)div嵌套div的margin不起作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論