css的内外边距

margin:标签与标签的距离

padding：内边距，用于控制内容与边框之间的距离

Border（边框）：围绕在内边距和内容外的边框

content（内容）：盒子的内容，显示文本和图像

设置的宽高是文本控制的范围

<body>与<html>之间默认有个外边距（浏览器加的）

标签就是元素

margin:10px 20px 30px 40px　　表示上，右，下，左的外边距

　　　 10px 20px 30px　　　　表示上，左右，下的外边距

　　　 10px 20px　　　　　　　表示上下，左右的外边距

　　　 10px　　　　　　　　　表示上下左右的外边距

兄弟div（边界塌陷）：两元素外边距取最大值作为显示值

父子div：父级div没有border,padding,inline content,子级div的margin会一直向上找，直到找到有border,padding,inline content属性，然后dic进行margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            border: 40px solid rebeccapurple;
            padding: 40px;
            /*margin: 20px;*/
            /*margin-bottom: 40px;*/
            /*margin: 10px 20px 30px 40px;*/
            margin-top: 30px;
            margin-bottom:40px;
        }

        .div2{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            border: 20px solid red;
            border: 30px blue ;
            border-style: ; ;
            /*padding: 5px;*/
            /*margin-top: 40px;*/
        }
        .outer{
            height: 1000px;
            background-color: aquamarine;
            /*border: 1px red solid;*/
            /*padding: 1px;*/
            overflow: hidden;
        }

        .outer2{
            width: 1000px;
            height: 1500px;
            background-color: firebrick;
        }
        body{
            border: 60px solid darkcyan;
            margin: 0px;
        }
    </style>
</head>
<body>

<div class="outer2">

    <div class="outer">

    <div class="div1">hello div1</div>
    <div class="div2"></div>
        <span>uuu</span><span>ooo</span>
</div>
</div>


</body>
</html>

View Code

猜你喜欢