css布局注意事项

1.当div标签中含有子标签，如果div标签的大小是被div中的子标签撑起来的，那么可能布局(之后)可能就会出现问题(if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .outer{
            background-color: gold;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top:10px;        /*margin-top 是以id =div1 的这个标签*/
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: darksalmon;
            /*如果这样的话就合适呢，对着就下去了*/
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="div1" style="background-color: burlywood; width:300px; height
:300px"></div>
<div style="background-color: chartreuse">
    <div class="box1"></div> 
    <div class="box2"></div>
</div>
</body>
</html>

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .outer{
            background-color: gold;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top:10px;        /*margin-top 是以class=outer 的这个标签*/
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: darksalmon;
            /*如果这样的话就合适呢，对着就下去了*/
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="div1" style="background-color: burlywood; width:300px; height
:300px"></div>
<div class="outer">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

示例2

　　解决方法:设置padding bording，让div便签称为子标签的真正的父标签

        这两种会改变结构
            1.加上padding
            2.加上border
        不改变结构
            3.overflow:hidden

猜你喜欢