zoukankan html css js c++ java

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>

查看全文

相关阅读:
菜菜小问题——python中print函数以及单引号、双引号、三引号
 fiddler软件测试——Fiddler抓取https设置详解（图文）
【转】fiddler抓包时出现了tunnel to ......443 解密HTTPS数据
 小菜菜mysql练习解读分析2——查询存在" 01 "课程但可能不存在" 02 "课程的情况(不存在时显示为 null )
c语言基础——基本数据类型
 linux 02
C#中海量数据的批量插入和更新
 linux 基本命令-01
Linux -01 安装centos
mysql 锁和隔离事务

原文地址：https://www.cnblogs.com/wangqiangya/p/13125507.html