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
Copyright © 2011-2022 走看看