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>

查看全文

相关阅读:
linux常用命令
 mysql 开发基础系列20 事务控制和锁定语句(上)
sql server 性能调优之资源等待 CXPACKET
mysql 开发基础系列19 触发器
 mysql 开发基础系列18 存储过程和函数(下)
mysql 开发基础系列17 存储过程和函数(上)
sql server 性能调优之资源等待PAGEIOLATCH
mysql 开发基础系列16 视图
 mysql 开发基础系列15 索引的设计和使用
 sql server 性能调优之当前用户请求分析 (1)

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