CSS基础学习day02

一、css布局

　　float :left或right　

　　　　　　　　1.可以把块状元素放在同一行上。

　　　　　　　　2.若是float：right，注意：写在最前的靠在最右边。

　　　　　　　　3.若父容器的宽度不足时，会自动换行。

　　　　　　　　4.若是设置了float,脱离文档位置。

　　　　　　clear:both; 清除浮动，使之不占用浮动的位置

　　　　　　 overflow:hidden; //超出部分不显示

　　　　　　 overflow:scroll; // 内容过大，会显示滚动条

二、定位

　　position：[static|relative|absolute|fixed]

　　　　1.static=>静态【默认】

　　　　2.relative=>相对定位，配合 (left,top)|(left,bottom)|(right,top)|(right,bottom)

　　　　　　设置 left,top,right,bottom 等属性值时，元素会发生位置偏移，根据[自身原先的位置来计算偏移量

　　　　3.absolute=>绝对定位，配合 (left,top)|(left,bottom)|(right,top)|(right,bottom)

　　　　　　设置 left,top,right,bottom 等属性值时，元素会发生位置偏移。

　　　　　　　　1.脱离文档流，不占用位置

　　　　　　　　2.参照的定位位置，

　　　　　　　　　　若父级元素设置了定位【relative|absolute|fixed】,根据父级来设置 left,top，若父级元素是静态【static】，会继续找父级的父级，如果都没有，一直找到body，根据body来设置left,top。

　　　　　　　　　　例：如果父级没有设置定位，absolute就会根据body参考来设置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 400px;
                height: 400px;
                border: 2px solid red;
                /* position: relative; */
                
                }
            .box1{
                width: 300px;
                height: 300px;
                border: 2px solid green;
                 position: absolute; 
                top: 50px;
                left: 50px;
                    }
        </style>
    </head>
    <body>
        <div class="box">
             <div class="box1"></div>
            
        </div>
    </body>
</html>

　　效果图：

　　　　如果父级元素设置定位后，就会参考父来定位：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 400px;
                height: 400px;
                border: 2px solid red;
                position: relative;
                
                }
            .box1{
                width: 300px;
                height: 300px;
                border: 2px solid green;
                 position: absolute; 
                top: 50px;
                left: 50px;
                    }
        </style>
    </head>
    <body>
        <div class="box">
             <div class="box1"></div>
            
        </div>
    </body>
</html>

　　效果图：

　　　　4.fixed==>固定定位，配合 (left,top)|(left,bottom)|(right,top)|(right,bottom)

　　　　　　设置 left,top,right,bottom 等属性值时，元素会发生位置偏移,参照与浏览器边框，脱离文档流，不占用位置。

三、层次显示优先级

　　z-index：检索或设置对象的层叠顺序。

　　　　　　较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。

　　　　　　注意：此属性仅仅作用于 position 属性值为 relative 、 absolute、Fixed 的对象，意思是它们两个必须存在于一个css样式中，否则设置无效。

　　实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 500px;
                height: 300px;
                background-color: orange;
                position: relative;
                z-index: 100;
            }
            #div2{
                width: 500px;
                height: 300px;
                background-color: darkmagenta;
                /*position: absolute;
                top: 100px;
                left: 50px;
                z-index: 80;*/
                position: relative;
            }
            
            #div3{
                width: 200px;
                height: 200px;
                background-color: blue;
                position: relative;
                top: 0;
                left: 200px;
                z-index: 100;
            }
            
            #div4{
                width: 200px;
                height: 200px;
                background-color: green;
                position: absolute;
                top: -50px;
                left: 200px;
                z-index: 90;
            }
        </style>
    </head>
    <body>
        <div id="div1">1
            <div id="div3"></div>
        </div>
        <div id="div2">2
            <div id="div4"></div>
        </div>
    </body>
</html>

　　　　练习：写出相同的布局。

　　　　　代码如下：　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 600px;
                height: 600px;
                border: 5px solid green;
            }
            #div2{
                width: 300px;
                height: 600px;
                background-color: red;
                float:left;
            }
            #div3{
                width: 290px;
                height: 590px;
                border: 5px solid dodgerblue;
                float:left;
            }
            #div4{
                height: 240px;
                background-color: darkviolet;
                border: 5px solid yellow;
                
            }
            #div5{
                height: 90px;
                background-color: dodgerblue;
                border: 5px solid yellow;
            }
            #div6{
                height: 230px;
                background-color: pink;
                border: 5px solid yellow;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                
            </div>
            <div id="div3">
                <div id="div4">
                    
                </div>
                <div id="div5">
                    
                </div>
                <div id="div6">
                    
                </div>
            </div>
        </div>
    </body>
</html>

刷新页面返回顶部

越努力越幸运

CSS基础学习day02

公告