0503格式与布局

Posted 2020-11-02 mjwwzy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于0503格式与布局的主要内容，如果未能解决你的问题，请参考以下文章

RecyclerView 可以与其余的片段布局一起滚动吗？

如何在用java创建的布局内创建地图片段（GoogleMap）？

Python - 使用网格布局格式化窗口

片段中的按钮自定义视图

如何通过单击片段内的线性布局从片段类开始新活动？下面是我的代码，但这不起作用

多个视图与多个片段