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>

查看全文

相关阅读:
学习Spring.Net:1.简单的应用之控制台
 学习Memcached:2基本应用之控制台使用
 学习Memcached:1基本配置与安装
 C#IAsyncResult异步回调函数的解释
 C# JSON格式数据高级用法
 C#CRC16 Modbus 效验算法
 第一篇编程笔记
 SqlParameter 操作 image 字段
 C# 对象复制
 利用触发器实现数据同步

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