0503格式与布局

时间：2018-05-04 01:36:48 阅读：150 评论：0 收藏：0 [点我收藏+]

标签：height col gre div har orange top 元素 oct

<!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

0503格式与布局

标签：height col gre div har orange top 元素 oct

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行