CSS魔法（三）浮动、相对定位、绝对定位

浮动

为何需要浮动？

　　浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

浮动问题？

为何要清除浮动？

　　很多情况下父盒子不方便给高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;
    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

清除浮动

　　清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 200px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .clear {
        clear: both;
        /*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
        <div class="clear"></div>  <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

　　额外标签法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 200px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .clear {
        clear: both;
        /*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
        <div class="clear"></div>  <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

　　overflow 清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 180px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .father {
        border: 1px solid red;
        width: 300px;
        overflow: hidden;   /*别加错位置了，给 父亲加*/
        /*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/
    }
    </style>
</head>
<body>
    <div class="father"> 
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

 　　使用after伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .clearfix:after {  /*正常浏览器 清除浮动*/
        content:"";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
    }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

　　使用before和after双伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

 <ul><li>布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .service-bd {
            margin-top: 40px;
        }
        .service-bd li {
                width: 200px;
                height: 200px;
                background-color: #ffd800;
                float: left;
                border: 1px solid #e7e8e9;
            }
       .yingxiao {
            margin: 0 45px;
        }
    </style>
</head>
<body>
    <div class="service-bd">
        <ul>
            <li></li>
            <li class="yingxiao"></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
View Code

　　取消li 的小点

li {
    list-style: none; /*  取消li 的小点 */
}

 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .top {
            position: relative;/*相对定位*/
            top: 100px;
            left: 100px;
        }
        .bottom {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
</html>
View Code

　　相对定位和浮动的区别：相对定位后原来的位置还继续保留，浮动后原来的位置不继续保留。

　　定位使用：top、bottom、left、right  切不可混用margin-top　

绝对定位

position: absolute; 

1.绝不占位置，跟浮动一样。

2.绝对定位是将元素依据最近的已经定位的父元素（祖先）进行定位。

父亲没定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
        /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
View Code

父亲有定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .yeye {
        width: 800px;
        height: 800px;
        background-color: skyblue;
        position: absolute;
    }
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px;
        /*position: absolute;*/
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
        /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
    }
    </style>
</head>
<body>
<div class="yeye">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
    
</body>
</html>
View Code

子绝对定位父相对定位

　　给儿子绝对定位：不占有原来的位置，才能压住别人

　　给父亲相对定位：占有原来的位置

　　子绝父绝带来的问题：由于绝对定位不占用位置，当给父亲绝对定位时，下面的div元素会占用父亲的位置。

　　子绝父相是最合适的搭配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 310px;
        height: 190px;
        border: 1px solid #ccc;
        margin: 100px auto;
        padding: 10px;
        position: relative;
    }
    .top {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .bottom {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    </style>
</head>
<body>
    <div>
        <img src="images/top_tu.gif" alt="" class="top">
        <img src="images/br.gif" alt="" class="bottom">
        <img src="images/adv.jpg" height="190" width="310" alt="">
    </div>
</body>
</html>
View Code

定位和浮动

加了定位 浮动的的盒子 margin 0 auto 失效了

/*margin: 100px auto;*/
/*float: left;*/
position: absolute;
/*加了定位 浮动的的盒子  margin 0 auto 失效了*/

加了定位的盒子居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*margin: 100px auto;*/
        /*float: left;*/
        position: absolute;
        /*加了定位 浮动的的盒子  margin 0 auto 失效了*/
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
View Code

 实战练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            /*  取消li 的小点 */
        }

        .father {
            width: 1259px;
            height: 472px;
            margin: 100px auto;
            background-color: red;
            position: relative;
        }

        .son {
            width: 960px;
            height: 80px;
            background-color: #000;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -480px;
        }

        .son li {
            float: left;
            width: 160px;
            height: 80px;
        }

        .son li a {
            width: 160px;
            height: 80px;
            display: block;
            text-align: center;
            line-height: 80px;
            color: #fff;
            text-decoration: none;
        }

        .son li a:hover {
            background-color: #fff;
            color: #000;
        }
    </style>
    <body>
        <div class="father">
            <div class="son">
                <ul>
                    <li><a href="#">快递查询</a></li>
                    <li><a href="#">快递查询</a></li>
                    <li><a href="#">快递查询</a></li>
                    <li><a href="#">快递查询</a></li>
                    <li><a href="#">快递查询</a></li>
                    <li><a href="#">快递查询</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>
View Code

 CSS的margin: 7px auto 含义是什么？

　　顺序为：上、右、下、左；（顺时针）

淘宝轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .tb {
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;/* 顺序为：上、右、下、左；*/
            position: relative;/* 父相对定位*/
        }
        .tb a {
            width: 24px;
            height: 36px;
            display: block;
            position: absolute;/* 子绝对定位*/
            top: 50%;
            margin-top: -18px;
        }
        .left {
            left: 0;
            background: url(images/left.png) no-repeat;
        }
        .right {
            right: 0;
            background: url(images/right.png) no-repeat;
        }
        .tb ul {
            width: 70px;
            height: 13px;
            background: rgba(255, 255, 255, .3);
            position: absolute; /* 子绝对定位*/
            bottom: 18px;
            left: 50%; /*水平走父容器的一半*/
            margin-left: -35px; /*左走自己的一半*/
            border-radius: 8px;
        }
        .tb ul li {
            width: 8px;
            height: 8px;
            background-color: #fff;
            float: left;
            margin: 3px;
            border-radius: 50%;
        }
        .tb .current {
            background-color: #f40;
        }
        </style>
    </head>
    <body>
        <div class="tb">
            <img src="images/tb.jpg" >
            <a href="#" class="left"></a>
            <a href="#" class="right"></a>
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
</html>
View Code

 固定定位

.ad {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: fixed;  /*固定定位*/
        left: 0;
        top: 100px;
    }
View Code

 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        /*z-index: 0;  只有定位的盒子才有*/
    }
    .red {
        z-index: 1;
    }
    .blue {
        background-color: blue;
        left: 50px;
        top: 50px;
        z-index: 2;
    }
    .green {
        background-color: green;
        left: 100px;
        top: 100px;
        z-index: 999;
    }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>
</html>
View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 250px;
        height: 400px;
        border: 1px solid #ccc;
        float: left;
        margin-left: -1px;
        position: relative;
        /*z-index: 0;*/
    }
    div:hover {
        border: 1px solid #f40;
        /*position: relative; 相对定位比标准流高一级 浮在上面的*/
        z-index: 1;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
View Code

 小结

 

posted @ 2018-10-08 19:39  ~沐风  阅读(704)  评论(0)  编辑  收藏  举报