盒子模型

阅读量: 144 编辑

盒子模型

通常是用来表达嵌套标签元素之间的关系。比如两个 div

<div>
    <div id="outer">
        <div id="inner">
        </div>
    </div>
</div>
  • 如果 outer 使用了 margin,就是 outer 对于外面 div 的边距离

  • 如果 outer 使用了 padding ,就是 outer 对于内部 inner 的边距离

  • 同样的对于 inner 也可以使用 margin 和 padding

一、margin

  • 外边距的距离

  • margin-left、margin-right、margin-top、margin-bottom

  • 几种写法

二、padding

  • 内边距的距离

  • padding-left、padding-right、padding-top、padding-bottom

三、代码实战

代码的详细解读,可以参考视频教程

文件:04.html

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

        <style type="text/css">
            .mydiv{
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 10px 0px 10px 100px;
                padding: 0px 10px 20px 10px;
            }

            .mydiv2{
                width: 200px;
                height: 200px;
                background-color: blue;
                margin-left: 100px;
            }

            .mypadding{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }

        </style>

    </head>
    <body>
        <div class="mydiv">
            <div class="mypadding"></div>
        </div>
        <div class="mydiv2"></div>

    </body>
</html>