下边介绍一下div嵌套div时margin失灵的解决方法 。

顺带科谱下margin的界定和用法。

HTML中div嵌套div的margin不起作用的解决方法 HTML margin不起作用 嵌套div HTML/Xhtml  第1张

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: 301080x;
            height: 301080x;
            margin: 30px;
            background-color: gray;
        }
        .box .child{
            width: 201080x;
            height: 201080x;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

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

预期效果:

HTML中div嵌套div的margin不起作用的解决方法 HTML margin不起作用 嵌套div HTML/Xhtml  第2张

这实际上并不是大家要想的实际效果 ,先而言下怎么会出現这个问题:

有两个嵌套关联的div,假如表层div的父原素padding数值0,那麼里层div的margin-top或是margin-bottom的值会“迁移 ”给表层div。

处理该难题大家必须先掌握ie独有的一个特性haslayout 。

HTML中div嵌套div的margin不起作用的解决方法 HTML margin不起作用 嵌套div HTML/Xhtml  第3张

我们要完成的实际效果是那样的:

HTML中div嵌套div的margin不起作用的解决方法 HTML margin不起作用 嵌套div HTML/Xhtml  第4张

最终大家而言一下解决方案:

1、让父原素转化成一个block formating context(块级恢复出厂设置前后文 ,可自主百度搜索掌握) ,下列特性能够完成

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: 301080x;
            height: 301080x;
            margin: 30px;
            background-color: gray;
            overflow: hidden;
        }
        .box .child{
            width: 201080x;
            height: 201080x;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

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

最后实际效果:

HTML中div嵌套div的margin不起作用的解决方法 HTML margin不起作用 嵌套div HTML/Xhtml  第5张

到此这篇有关HTML中div嵌套div的margin失灵的解决方案的文章内容就详细介绍到这了,大量有关html时div嵌套div的margin失灵內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!