zoukankan html css js c++ java

0503格式与布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #cs_fixed{
                width: 200px;
                height: 200px;
                background-color: orange;
                position: fixed;/*相当于浏览器的定位*/
                right: 100px;
                bottom: 100px;
            }
            #cs_absolute{
                width: 200px;
                height: 200px;
                background-color: blue;
                /*position: absolute;相当于父级元素进行定位*/
                /*left: 100px;
                top: 100px;*/
            }
            #cs_absolute_nei{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;/*相对于父级元素进行定位*/
                left: 10px;
                top: 10px;
            }
            #cs_relative{
                width: 100px;
                height: 100px;
                background-color: green;
                position: relative;
                top: 20px;
                left: 20px;
            }
            #putong{
                width: 100px;
                height: 100px;
                background-color: #003B4D;
                position: relative;
                top: -10px;
            }
            #dh{
                width: 1004px;
                height: 30px;
                border: 1px solid grey;
            }
            .dh_list{
                width: 250px;
                height: 30px;
                float: left;
                text-align: center;水平居中
                line-height: 30px;垂直居中
                border-right: 1px solid grey;
            }
            #wai{
                width: 300px;
                height: 300px;
                background-color: blue;
                /*解决内外margin重叠现象*/
                /*    overflow: hidden;*/
               border: 1px solid red;
               margin-bottom: 20px;
            }
            #nei{
                width: 100px;
                height: 100px;
                background-color: red;
                margin-top: 10px;
            }
            #ceng1{
                width: 300px;
                height: 300px;
                background-color: black;
                position: relative;
                top: 20px;
                z-index: 1;
            }
            #ceng2{
                width: 200px;
                height: 200px;
                background-color: green;
                position: relative;
                top: -10px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
    <!--    位置-->
    <!--<div id="cs_fixed">
    <div >
        <div id="cs_absolute">
        <div id="cs_absolute_nei">
            
        </div>    
    </div>    
    <div id="cs_relative">
        
    </div>   
    <div id="putong">
        
    </div>    -->
    
    <!--流式布局-->
    <div id="dh">
        <div class="dh_list">春节</div>
        <div class="dh_list">端午</div>
        <div class="dh_list">六一</div>
        <div class="dh_list" style="border-right: 0;">国庆</div>
    </div>
    
    <!--margin重叠现象-->
    <div id="wai">
    <div id="nei">
        
    </div>
        
    </div>
    
    
    <!--    层-->
    <div id="ceng1">
    
    </div>
    <div id="ceng2">
        
    </div>
    </div>
    </body>
</html>

|-层 z-index
|--必须给元素加position或float

查看全文

相关阅读:
chrome 连接池超时值
 chrome 内部设置
 error: incomplete type 'blink::Event' named in nested name specifier note: forward declaration of 'blink::Event'
js promise详解
 How Chromium Displays Web Pages
调试chromium设置 How to enable logging
禁止ultraedit域名
 chromium paint graphic
Web IDL in Blink
js的闭包

原文地址：https://www.cnblogs.com/mjwwzy/p/8988393.html