CSS魔法（三）浮動、相對定位、絕對定位

時間 2019-11-18

標籤 css 浮動相對定位絕對欄目 CSS 简体版

原文原文鏈接

浮動

爲什麼須要浮動？html

　　浮動float最開始出現的意義是爲了讓文字環繞圖片而已，但人們發現，若是想要三個塊級元素並排顯示，都給它們加個float來得會比較方便。瀏覽器

浮動問題？ide

爲什麼要清除浮動？佈局

　　不少狀況下父盒子不方便給高度url

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

清除浮動spa

　　清除浮動主要爲了解決父級元素由於子級浮動引發內部高度爲0的問題3d

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

　　額外標籤法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 清除浮動htm

<!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僞元素清除浮動blog

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