4、盒子模型和margin、padding

位置属性：代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            height:300px;
            width:300px;
        }
            div.div1 {
                background-color:red;
                top:100px;
                left:100px;
                position:absolute;
                z-index:3;
            }
            div.div2 {
                background-color:green;
                position:absolute;
               top:130px;
               left:130px;
               z-index:2;
            }
            div.div3 {
            background-color:yellow;
            top:160px;
            left:160px;
            position:absolute;
            z-index:1;
            }

            div.div4 {
                right:0px;
                bottom:0px;
                background-color:black;
                position:fixed;
            }
    </style>
</head>
<body>

    <div class="div4">

    </div>
        <div class="div1">

        </div>
    <div class="div2">

    </div>
    <div class="div3">

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

代码：margin属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        * {
            margin:0px;
        }

        div {
            height:300px;
            width:300px;
        }
            div.div1 {
                background-color:red;
            }
            div.div2 {
                background-color:green;
                margin-top:20px;
                margin-left:40px;
              
            }
            div.div3 {
                background-color:yellow;
            }
            div.div2 p {
                padding-top:100px;
                padding-left:40px;
            }
    </style>
</head>
<body>
        <div class="div1">

        </div>

    <div class="div2">
        <p>我是div里的p标签</p>
    </div>

    <div class="div3">

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

相关阅读:
04-Go语言之运算符
 02-Go语言之变量和常量
 idea 无法加载识别本地类
 阿里云OSS实践篇
 jemeter 压测入门篇（附带工具）
SpringBoot 中的那些“开关”
java8 新特性之4大函数式接口
 java8 新特性之optional
VSCode vue开发前配置
 前端架构演进及主流UI
原文地址：https://www.cnblogs.com/wangqiangya/p/13125507.html