CSS頁面布局

新進(jìn)小設(shè)計 2022-12-08 發(fā)布于北京

展開全文

一網(wǎng)頁布局方式

二標(biāo)準(zhǔn)流

三浮動流

四定位流

五練習(xí)

一網(wǎng)頁布局方式

-1. 什么是網(wǎng)頁布局方式

布局可以理解為排版,我們所熟知的文編編譯類工具都有自己的排版方式,比如:word,nodpad++等等

而網(wǎng)頁的布局方式指的就是瀏覽器這款工具是如何對網(wǎng)頁中的元素進(jìn)行排版的.

-2. 網(wǎng)頁布局 / 排版的三種方式

標(biāo)準(zhǔn)流
浮動流
定位流

二標(biāo)準(zhǔn)流

標(biāo)準(zhǔn)流的排版方式: 又稱為:文檔流/普通流,所謂的文檔流,指的是元素排版布局過程中.元素會自動從左往右,從上往下的流式排版.

-1. 瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流排版方式

-2. 在CSS中將元素分為三類. 分別是:

塊級
行內(nèi)級
行內(nèi)塊級

-3. 在標(biāo)準(zhǔn)流中有倆種排版方式, 一種是垂直排版,一種是水平排版.

垂直排版: 如果元素是塊級元素,那么就會垂直排版.
水平排版: 如果元素是行內(nèi)級或者行內(nèi)塊級標(biāo)簽,那么就會水平排版.

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標(biāo)準(zhǔn)文檔流</title>

    <style type="text/css">
        div,h1,p {
            border: 1px solid red;
            width: 200px;
        }

        span,strong,b {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <h1>我是標(biāo)題</h1>
    <p>我是段落</p>

    <span>span</span>
    <strong>我是強(qiáng)調(diào)</strong>
    <b>我是加粗</b>
</body>
</html>

三浮動流

-1. 浮動流是一種半脫離標(biāo)準(zhǔn)流的排版方式

什么是脫離文檔流?什么又是半脫離文檔流?

-1.1 什么是脫離文檔流?

浮動元素脫離文檔流意味著

不在區(qū)分行內(nèi),塊級,行內(nèi)塊級,無論是什么級的元素都可以水平排版.
無論是什么級的元素都可以設(shè)置寬高.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*
        不再區(qū)分行內(nèi)、塊級、行內(nèi)塊級，無論是什么級的元素都可以水平排版：span和p都顯示到一行
        無論是什么級的元素都可以設(shè)置寬高：span這種行內(nèi)元素也可以設(shè)置寬高
        */
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;

            float: left;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;

            float: left;
        }
    </style>
</head>

<body>

<span class="box1">我是span</span>
<p class="box2">我是段落</p>

</body>
</html>

-1.2 浮動元素脫離文檔流意味著

當(dāng)某一個元素浮動走之后,那么這個元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣,這個就是浮動元素的脫標(biāo).
如果前面一個元素浮動走了,后面元素沒有浮動的話,那么垂直方向的元素會自動填充,浮動元素重新歸位后就會覆蓋該元素.

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素脫標(biāo)</title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

-1.3 注意點:

浮動流只有一種排版方式,那就是水平排版,它只能設(shè)置某個元素左對齊或者右對齊,沒有居中對齊,也就是沒有center這個取值.
一旦使用了浮動流,則margin:0 auto; 就會失效.

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin:0 auto會失效</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            /* 浮動后設(shè)置失效 */
            margin: 0 auto;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

讓兩個元素顯示到一行，有兩種實現(xiàn)方式，一種是修改元素的顯示方式為inline-block，另外一種就是用浮動的方式

<!DOCTYPE html>
<html>
<head>
    <title>方式一：修改顯示方式為inline-block</title>
    <meta charset="utf-8">
    <style>
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;

            /*
            當(dāng)設(shè)置box2的margin-left足夠大時，第二個盒子就靠右面顯示了
            但是當(dāng)瀏覽器界面縮小時，box2由于左邊的margin-left不夠930，則必須換一個新行顯示，就無法讓兩個盒子處于一行
            */
            margin-left: 930px;
        }

    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>方式二：用浮動的方式</title>
    <meta charset="utf-8">
    <style>
        .box1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;

            float: left;
        }
        .box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;

            float: right;
        }

    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

-1.4 半脫離文檔流

脫離分為: 半脫離和完全脫離

其中完全脫離指得是元素原先在正常文檔流中所占得空間會關(guān)閉,就好像該元素原來不存在一樣.

而之所以稱其為半脫離,是因為浮動元素浮動之后得位置取決于它在浮動之前得標(biāo)準(zhǔn)流中的位置.

跟標(biāo)準(zhǔn)流還是有一定的關(guān)系，比如說浮動的元素在浮動之前處于標(biāo)準(zhǔn)流的第二行，那么他浮動之后也是處于浮動流

的第二行，不會去找其他行的浮動元素去貼靠，打一個比方就是：浮動流就是在標(biāo)準(zhǔn)流上面覆蓋的一層透明薄膜，

元素浮動之后就會被從標(biāo)準(zhǔn)流中扔到浮動流這個薄膜上，他在這個薄膜上的位置還是以前在標(biāo)準(zhǔn)流的位置上找同方

向的浮動元素進(jìn)行貼靠，貼靠的準(zhǔn)則就是：

同一個方向上誰先浮動,誰在前面.
不同方向上左浮動找左浮動,右浮動找右浮動.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素排序規(guī)則</title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: left;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素排序規(guī)則</title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: left;

            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: left;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            float: left;

            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素排序規(guī)則</title>

    <style>
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box2 {
            float: left;

            width: 150px;
            height: 150px;
            background-color: blue;
        }

        .box3 {
            float: right;

            width: 250px;
            height: 250px;
            background-color: yellow;
        }


        .box4 {
            float: right;

            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>


</body>
</html>

-1.5 浮動元素貼靠問題

當(dāng)父元素的寬度足夠顯示所有的元素時,浮動的元素就會并列顯示.

當(dāng)父元素的寬度不足顯示所有元素時,浮動的元素就貼前面一個元素,如果還不夠,就會再貼前一個元素.

直到貼到父元素左邊,此時無論是否寬度是否足夠都會在這一行顯示.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素貼靠問題</title>

    <style>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid #000;

        }

        .box1 {
            float: left;
            width: 50px;
            height: 300px;
            background-color: rebeccapurple;

        }
        .box2 {
            float: left;
            width: 50px;
            height: 100px;
            background-color: green;

        }
        .box3 {
            float: left;
            width: 250px;
            /*width: 300px;*/
            /*width: 310px;*/
            /*width: 400px;*/

            height: 100px;
            background-color: red;

        }


    </style>
</head>
<body>

<div class="father">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>


</body>
</html>

父盒子寬度夠時

父寬度不夠時

-1.6 浮動元素字圍現(xiàn)象

沒有浮動文字、圖片、超鏈接等元素會給浮動的元素讓位置，并圍繞在浮動元素的周圍

示范一:圖文混排

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素字圍現(xiàn)象</title>

    <style>
        img {
            float: left;
            width:300px;
        }

        p {
            background-color: rebeccapurple;
        }



    </style>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526318630409&di=8186a1ab56ed36696ade3e23a228acfc&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F58be1c554d5f0.jpg" alt="">
<p>
迪麗熱巴（Dilraba），1992年6月3日出生于新疆烏魯木齊市，中國內(nèi)陸影視女演員。2013年，迪麗熱巴因主演個人首部電視劇《阿娜爾罕》而出道。2014年，她主演了奇幻劇《逆光之戀》。2015年，迪麗熱巴憑借愛情劇《克拉戀人》贏得高人氣，并獲得國劇盛典最受歡迎新人女演員獎。2016年，其主演的現(xiàn)代劇《麻辣變形計》播出；同年，她還憑借喜劇片《傲嬌與偏見》獲得中英電影節(jié)最佳新人獎。2017年，迪麗熱巴因在玄幻劇《三生三世十里桃花》中飾演青丘白鳳九而獲得白玉蘭獎最佳女配角提名。2018年 ...
    迪麗熱巴（Dilraba），1992年6月3日出生于新疆烏魯木齊市，中國內(nèi)陸影視女演員 [1]  。
2013年，迪麗熱巴因主演個人首部電視劇《阿娜爾罕》而出道 [2]  。2014年，她主演了奇幻劇《逆光之戀》 [3]  。2015年，迪麗熱巴憑借愛情劇《克拉戀人》贏得高人氣，并獲得國劇盛典最受歡迎新人女演員獎 [4]  。2016年，其主演的現(xiàn)代劇《麻辣變形計》播出 [5]  ；同年，她還憑借喜劇片《傲嬌與偏見》獲得中英電影節(jié)最佳新人獎 [6]  。2017年，迪麗熱巴因在玄幻劇《三生三世十里桃花》中飾演青丘白鳳九而獲得白玉蘭獎最佳女配角提名 [7]  。2018年4月20日，主演的愛情喜劇電影《21克拉》上映 [8]  。
    迪麗熱巴出生于新疆烏魯木齊市，父親是新疆歌舞團(tuán)的獨(dú)唱演員。因受父親影響，迪麗熱巴從小便對各種藝術(shù)類的東西頗感興趣，并主動要求學(xué)習(xí)鋼琴、舞蹈、小提琴、吉他等 [9]  。
2001年，9歲的迪麗熱巴被父親帶去一所藝術(shù)學(xué)院參加考試，當(dāng)時她以為是上興趣班，結(jié)果被錄取后才發(fā)現(xiàn)是一個專業(yè)的舞蹈院校，而迪麗熱巴也開始了為期六年的民族舞、芭蕾舞專業(yè)學(xué)習(xí)。2007年，從藝術(shù)學(xué)院畢業(yè)的迪麗熱巴成為了新疆歌舞團(tuán)的舞蹈演員 [10]  。2009年，迪麗熱巴還在東北師范大學(xué)民族學(xué)院讀了一年預(yù)科，在此期間她還參加了吉林省的首屆少數(shù)民族新歌大賽，并最終獲得了省級三等獎的成績 [11]  。
之后，迪麗熱巴卻慢慢發(fā)現(xiàn)這并不是自己想要的生活。于是決定繼續(xù)求學(xué)，去看看外面的世界，因為有不錯鋼琴基礎(chǔ)，所以本來想報考的是中央音樂學(xué)院，可報名時卻看到了中戲和上戲在招生，便突然決定改學(xué)表演。而迪麗熱巴會有這樣的決定則是受到了她鋼琴老師的指點。2010年，迪麗熱巴順利考入了上海戲劇學(xué)院表演系戲劇影視專業(yè)；同年，她參加了陸川執(zhí)導(dǎo)的古裝片《王的盛宴》女主角“虞姬”的上海站海選 [12]  ，并因此獲得了頗多關(guān)注 [13]  。
</p>

</body>
</html>

示范2: 標(biāo)簽圍繞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字圍效果</title>
    <style>
        .box1 {
            width: 700px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</body>
</html>

-1.7 浮動排版練習(xí)

注意: 在企業(yè)開發(fā)中,如何對網(wǎng)頁進(jìn)行布局.>

垂直方向的布局用標(biāo)準(zhǔn)流布局,水平方向用浮動流布局
從上至下布局
從外往內(nèi)布局
水平方向可以先劃分為一左一右再對左邊或者右邊進(jìn)一步布局.

練習(xí)1: 利用浮動的貼靠,右邊導(dǎo)航欄分層

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動流排版練習(xí)2</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 980px;
            height: 100px;
            background-color: #fefefe;
            margin: 0 auto;
        }

        .header .logo {
            width: 250px;
            height: 100px;
            background-color: #f6c2d2;
            float: left;

        }

        .header .language {
            width: 150px;
            height: 50px;
            background-color: #a0d7e9;
            float: right;
        }

        .header .nav {
            /* 寬度總長度大于了父盒子 header */
            width: 630px;
            height: 50px;
            background-color: #7e1487;
            float: right;

        }

        .content {
            height: 400px;
            width: 980px;
            background-color: #fcfd00;
            margin: 0 auto;

            margin-top: 10px;
        }

        .footer {
            height: 40px;
            width: 980px;
            background-color: #ec6357;
            margin: 0 auto;

            margin-top: 10px;
        }

    </style>
</head>
<body>

<div class="header">
    <div class="logo">logo</div>
    <div class="language">language</div>
    <div class="nav">導(dǎo)航</div>

</div>
<div class="content"></div>
<div class="footer"></div>

</body>
</html>

練習(xí)2: 內(nèi)容布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動流排版練習(xí)3</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            height: 100px;
            width: 980px;
            background-color: #f6c2d2;
            margin: 0 auto;
        }

        .content {
            height: 400px;
            width: 980px;
            background-color: #fefefe;
            margin: 0 auto;

            margin-top: 10px;
        }
        .content .aside {
            width: 320px;
            height: 400px;
            background-color: #fcfd00;
            float: left;
        }

        .content .article {
            width: 650px;
            height: 400px;
            background-color: #fefefe;
            float: right;
        }

        .content .articleTop {
            width: 650px;
            height: 350px;
            background-color: #fefefe;
        }
        .content .articleTopLeft {
            width: 400px;
            height: 350px;
            background-color: #fefefe;
            float: left;
        }
        .content .articleTopLeft .new1 {
            width: 400px;
            height: 200px;
            background-color: #e9289c;
        }
        .content .articleTopLeft .new2 {
            width: 400px;
            height: 140px;
            background-color: #3dd1fd;

            margin-top: 10px;
        }

        .content .articleTopRight {
            width: 240px;
            height: 350px;
            background-color: #acde3d;
            float: right;
        }


        .content .articleBottom {
            width: 650px;
            height: 40px;
            background-color: #b9950c;
            margin-top: 10px;
        }

        .footer {
            height: 40px;
            width: 980px;
            background-color: #ec6357;
            margin: 0 auto;

            margin-top: 10px;
        }

    </style>
</head>
<body>


<div class="header"></div>
<div class="content">
    <div class="aside"></div>
    <div class="article">
        <div class="articleTop">
            <div class="articleTopLeft">
                <div class="new1"></div>
                <div class="new2"></div>
            </div>
            <div class="articleTopRight"></div>

        </div>
        <div class="articleBottom"></div>

    </div>
</div>
<div class="footer"></div>

</body>
</html>

展示圖:

1.8 浮動元素高度問題(又稱父級塌陷)

在標(biāo)準(zhǔn)文檔流中,內(nèi)容的高度可以撐起父元素的高度.

在浮動流中,浮動的元素是不可以撐起父元素的高度的,當(dāng)子元素都浮動起來后,父親的內(nèi)容高度即height變?yōu)?

父元素就好像塌陷了一樣,所以我們叫這位父級塌陷.

練習(xí): 浮動的元素不再撐起父級元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素高度問題</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            border: 10px solid #741a7b;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: red;

            float: left;
        }
    </style>

</head>
<body>
<div>
    <p>我是p標(biāo)簽</p>
</div>
</body>
</html>

現(xiàn)象:父級塌陷給頁面帶來的影響

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            border: 5px solid #000;
        }

        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }

        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }

        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>

<div class="content">content</div>


</body>
</html>

頁面展示效果

1.9清除浮動

清除浮動的方式1(了解)

為浮動的那些子元素的父親設(shè)置一個高度.

注意點: 在企業(yè)中,這樣限定固定高度會使頁面操作不靈活,不推薦

清除浮動方式二：

clear : none | left | right| both

注意: clear 這個屬性必須設(shè)置在塊級,并且不浮動的元素中.

1、取值：

? none : 默認(rèn)值。允許兩邊都可以有浮動對象

? left : 不允許左邊有浮動對象

? right : 不允許右邊有浮動對象

? both : 不允許左右有浮動對象

2、把握住兩點：

1、元素是從上到下、從左到右依次加載的。
2、clear: left;對自身起作用，而不會影響其他元素。一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據(jù)這一點解決父級塌陷問題。

示范：clear：both解決父級塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .header {
            border: 5px solid #000;
        }
        
        .logo {
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .nav {
            width: 200px;
            height: 200px;
            background-color: green;

            float: left;
        }

        .content {
            width: 960px;
            height: 200px;
            background-color: yellow;

            /*該元素的左右兩邊都允許有浮動元素*/
            clear: both;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="logo">logo</div>
    <div class="nav">nav</div>
</div>

<div class="content">content</div>



</body>
</body>
</html>

注意1：
元素是從上到下、從左到右依次加載的。在右側(cè)元素還沒有加載到時，clear：right是無用的
注意2：
這種方式的弊端是：當(dāng)我們給某個元素添加clear屬性之后，那么這個屬性的margin-top屬性可能會失效，因而也不推薦直接用clear

清除浮動的方式三

隔墻法

1、外墻法

? 2.1 在兩個盒子中間添加一個額外的塊級元素

? 2.2 給這個額外添加的塊級元素設(shè)置clear：both；屬性

? 注意：

? 外墻法它可以讓第二個盒子使用margin-top屬性

? 外墻法不可以讓第一個盒子使用margin-bottom屬性，所以我們通常用墻的高度作margin的替代品

? 在企業(yè)開發(fā)中可以為墻添加一個類h20，然后設(shè)置h20的高度為20實現(xiàn)外間距，搜狐網(wǎng)站大量使用了外墻法

2、內(nèi)墻法

? 2.1 在第一個盒子中所有子元素最后添加一個額外的塊級元素

? 2.2 給這個額外添加的塊級元素設(shè)置clear：both；屬性

? 注意：

? 內(nèi)墻法它可以讓第二個盒子使用margin-top屬性

? 內(nèi)墻法可以讓第一個盒子使用margin-bottom屬性

? 內(nèi)墻法也可以為墻添加一個類h20，然后設(shè)置h20的高度為20實現(xiàn)外間距，搜狐網(wǎng)站大量使用了外墻法

3、內(nèi)墻法與外墻法的區(qū)別？
1、外墻法不可以撐起第一個盒子的高度，而內(nèi)墻可以

? 2、在企業(yè)開發(fā)中清除浮動，內(nèi)墻法與外墻法都不常用，因為添加一個無用的墻
? 在前端開發(fā)中推崇結(jié)構(gòu)與樣式分離，而隔墻法需要添加大量的沒有意義的空標(biāo)簽div

清除浮動的方式四(推薦)

? 本質(zhì)原理與內(nèi)墻法一樣，但我們用的css的偽元素選擇器實現(xiàn)的，就應(yīng)該用css來控制樣式，符合前端開發(fā)思想

詳細(xì)用法:

.clearfix:after {  <--- 在類名為"clearfix"的元素內(nèi)最后面加上內(nèi)容;
    content: "";  <--- 內(nèi)容空.也可以是別的內(nèi)容.
    display: block;  <--- 加入這個保證是一個塊級的元素.
    clear: both;  <-- 清除左右倆邊的浮動.
    visibiity: hidden;  <--- 可見度設(shè)置為隱藏,注意它和display:none;是有區(qū)別的visibiity: hidden;
    						任占內(nèi)容,而diaplay:none不會.
    line-height: 0; <--- 行高為0.
    height: 0; <---- 高度為0.
    font-size: 0 ;  <---- 字體大小為0.
    .header { *zoom:1;}         <----兼容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其余沒用
    整段代碼就相當(dāng)于在浮動元素后面跟了個寬高為0的空div，然后設(shè)定它clear:both來達(dá)到清除浮動的效果。
            之所以用它，是因為，你不必在html文件中寫入大量無意義的空標(biāo)簽，又能清除浮動。
            <div class="header"></div>
}

必須要寫的是下面三句話

{
    content: "";
    display: block;
    clear: both;
}

復(fù)習(xí)偽元素選擇器(CSS3中新增的為元素選擇器)

偽元素選擇器的作用就是給指定標(biāo)簽的內(nèi)容前面添加一個子元素
或者給指定標(biāo)簽的內(nèi)容后面添加一個子元素

格式：給指定標(biāo)簽的前面和后面添加子元素

標(biāo)簽名稱::before{
        屬性名稱：值；
    }

標(biāo)簽名稱::after{
	屬性名稱：值；
}

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>

        * {
            margin: 0;
            padding: 0;
        }
        .clearfix {
            *zoom:1
        }

        /*
            before的作用是子元素設(shè)置margin-top父元素不會一起被頂下來
            after的作用是清除浮動
        */
        .clearfix:before,.clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }



        .father {
            background-color: purple;
        }

        .box1 {
            width: 200px;
            height: 300px;
            background-color: red;
            margin-top: 100px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;

        }


    </style>
</head>
<body>

<div class="father clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

</body>
</html>

清除浮動的方式五：

? overflow:hidden，但其實它除了清除浮動還有其他方面的用途

可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉
清除浮動
可以通過overflow:hidden;
1. 讓里面的盒子設(shè)置margin-top屬性后,外面的盒子不被頂下來,這樣就不用為外邊的盒子添加外邊框了.

四定位流

-1. 相對定位就是相對于自己以往在標(biāo)準(zhǔn)流中的位置來移動.

格式:

position:relative;

需要配合以下四個屬性一起使用:

top: 值px;
left: 值px;
bottom: 值px;
right: 值px;

練習(xí):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: red;
        }
        .box2 {
            background-color: green;
            position: relative;
            /* 相對于自己源標(biāo)簽的盒子
                管控盒子移動位置
                不脫離標(biāo)準(zhǔn)文檔流
             */
            top: 20px;
            left: 20px;
            /* 也是相對于原盒子的位置移動 */
            margin-top: 100px;
        }
        .box3 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>

    <div class="box3">

    </div>
</body>
</html>

網(wǎng)頁效果圖:

-1.1 相對定位的注意點

在相對定位中同一個方向上的定位屬性只能有一個.
1. top/bottom 只能使用一個
2. left/right 只能使用一個
相對定位是不脫離標(biāo)準(zhǔn)流的,會繼續(xù)在標(biāo)準(zhǔn)流中占據(jù)一份空間.
由于相對定位是不脫離標(biāo)準(zhǔn)流的,所以相對定位中是區(qū)分塊級,行內(nèi),行內(nèi)塊級元素的.
由于相對定位搜索不脫離標(biāo)準(zhǔn)流的,并且相對定位的元素會占用標(biāo)準(zhǔn)中的位置.所以當(dāng)給相對定位的元素設(shè)置margin/padding等屬性是會影響到標(biāo)準(zhǔn)流的布局的.

即:給相對定位的標(biāo)簽設(shè)置margin或padding,是以該標(biāo)簽原來的位置為基礎(chǔ)來進(jìn)行偏移的.

-1.2 相對定位的應(yīng)用場景

用于對元素進(jìn)行微調(diào)
配合后面學(xué)習(xí)的絕對定位來使用

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位練習(xí)</title>
    <style>
        input {
            width: 500px;
            height: 50px;
        }
        input:focus {
            outline: none;
        }

        img {
            height: 50px;
            /* 會將一整行的盒子往下移. */
            /*margin-top: 21px;*/
            position: relative;
            top: 21px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" name="code" placeholder="請輸入驗證碼信息">
        <img src="0.jpg" alt="">
    </div>
</body>
</html>

-2. 絕對定位就是相對于body或者某個定位流中的祖先元素來定位的.

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: red;
            /*position: relative;*/
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
            /*position: absolute;*/
            /*position: fixed;*/
            /* 默認(rèn)使用該定位方式,靜態(tài)定位,就和沒定位一樣 */
            /*position: static; */
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            right: 0;
            bottom: 0;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>

2.1 絕對定位的參考點

默認(rèn)情況下所有的絕對定位的元素,無論有無祖先元素,都會移body作為參考點.
如果一個絕對定位的元素有祖先元素,并且祖先元素也是定位流,那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點.
1. 只要是這個絕對定位元素的祖先元素都可以用
2. 祖先必須是定位流,此時的定位流指的是絕對定位,相對定位,固定定位(定位流中只有靜態(tài)定位不行)
3. 如果一個絕對定位的元素有祖先元素,而且祖先元素中有多個元素都是定位流,那么這個絕對定位會以離它最近的那個定位流的祖先元素為參考點.

-2.2 絕對定位的注意點

絕對定位的元素是脫離標(biāo)準(zhǔn)文檔流的,所以決定定位的元素不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素
如果一個絕對定位的元素是以body作為參考點,那么其實是以網(wǎng)頁首屏的寬度和高度作為參考點,而不是以整個網(wǎng)頁的寬度和高度作為參考點,會相對于body定位會隨著網(wǎng)頁的滾動而滾動.
一個絕對定位的元素會忽略祖先元素的padding

-2.3 絕對定位水平居中

注意當(dāng)一個盒子絕對定位之后不能使用margin: 0 auto;讓盒子居中.
如果想讓一個絕對定位的盒子自身居中,可以使用left:50%; margin-left: 元素寬度的一半px;

練習(xí):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子絕父相</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            left: 50%;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">

        </div>
    </div>
</body>
</html>

-2.4 絕對定位的應(yīng)用場景

用以對元素進(jìn)行微調(diào)
配合相對定位來使用
企業(yè)開發(fā)中一般相對定位和絕對定位都是一起使用的,很少單獨(dú)使用===>子絕父相

那為什么要有子絕父相呢?看小圖

練習(xí)1：

******

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導(dǎo)航練習(xí)</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            width: 800px;
            height: 100px;
            list-style: none;
            margin: 0 auto;

        }
        ul>li {
            width: 100px;
            line-height: 100px;
            display: inline-block;
            float: left;
            text-align: center;
        }
        ul>li>a {
            display: inline-block;
            width: 100px;
            height: 100px;
            text-decoration-line: none;
            color: black;
            font-size: 21px;
            background-color: #5c5c62;
        }
        ul>li>a:link {
            color: black;
        }
        ul>li&gt;a:visited {
            color: burlywood;
        }
        ul>li>a:hover {
            color: honeydew;
            background-color: pink;
        }
        ul>li>a:active {
            background-color: #003399;
        }

        ul>li:nth-of-type(4) {
            position: relative;
        }

        img {
            position: absolute;
            height: 50px;
            top: -9px;
            left: 35px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">服裝城</a>
        </li>
        <li>
            <a href="#">美妝館</a>
        </li>
        <li>
            <a href="#">京東超市</a>
        </li>
        <li>
            <a href="#">全球購</a>
            <img src="https://dss1./70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2875143388,3177945145&fm=26&gp=0.jpg" alt="">
        </li>
        <li>
            <a href="#">閃購</a>
        </li>
        <li>
            <a href="#">團(tuán)購</a>
        </li>
        <li>
            <a href="#">拍賣</a>
        </li>
        <li>
            <a href="#">金融</a>
        </li>
    </ul>
</body>
</html>

練習(xí)2：輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration-line: none;
            color: #958b8b;
        }
        div {
            margin: 0 auto;
            height: 891px;
            width: 647px;
            position: relative;
        }
        div img {
            width: 647px;
        }
        div span {
            font-size: 55px;
            color: #8a8a8a;
            background-color: rgba(0,0,0,0.3);
        }
        div span:hover {
            background-color: rgba(0,0,0,0.7);
            margin: 3px;
            color: white;
        }
        div span:nth-of-type(1) {
            position: absolute;
            top: 50%;
            left: 0;
        }
        div span:nth-of-type(2) {
            position: absolute;
            top: 50%;
            right: 0;
        }
        div ul li {
            position: absolute;
            bottom: 0;
            right: 0;
            list-style: none;
            font-size: 24px;
        }
        div ul li:nth-of-type(1) {
            right: 120px;
            bottom: 30px;
        }
        div ul li:nth-of-type(2) {
            right: 90px;
            bottom: 30px;
        }
        div ul li:nth-of-type(3) {
            right: 60px;
            bottom: 30px;
        }
        div ul li:nth-of-type(4) {
            right: 30px;
            bottom: 30px;
        }
        div ul li a:hover {
            background-color: rgba(0,0,0,0.7);
            color: white;
        }
    </style>
</head>
<body>
    <div>
        <img src="1.jpg" alt="">
        <span>
            <
        </span>
        <span>
            >
        </span>
        <ul>
            <li>
                <a href="#">1</a>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </div>
</body>
</html>

練習(xí)3：淘寶物品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration-line: none;
        }
        .box2 {
            padding: 10px 20px 10px 20px;
            width: 200px;
            margin: 0 auto;
            text-align: left;
        }
        .box2:hover {
            border: 1px red solid;
        }
        img {
            width: 200px;
        }
        .box2 p span:first-of-type {
            color: #e66100;
            font-size: 12px;
        }

        .box2 p span:nth-of-type(2) {
            color: #e66100;
            font-size: 24px;
        }

        .box2 p:nth-of-type(2) {
            margin-top: 30px;
        }

        .box2 p span:nth-of-type(3) {
            color: #9ca0aa;
            font-size: 16px;
            float: right;
            margin-top: 10px;
        }
    </style>

</head>
<body>

<div class="box2">
    <img src="https://img./bao/uploaded/i4/72221026/TB2MGP3grJkpuFjy1zcXXa5FFXa_!!72221026.jpg_200x200q90.jpg_.webp"
         alt="">
    <p>
        <a >手工平底鍋雙耳平底鍋鐵匠手工鍛打鐵鍋平底鍋煎鍋鐵煎鍋</a>
    </p>
    <p>
        <span>￥</span>
        <span>140</span>
        <span>銷量:1000</span>
    </p>
</div>

</body>
</html>

-3. 固定定位

固定定位(和絕對定位高度相似，和背景的關(guān)聯(lián)方式也高度相似)

背景的關(guān)聯(lián)方式background-attachment: fixed;可以讓圖片不隨著滾動條滾動而固定定位可以讓某一個元素不隨著滾動條的滾動而滾動.
注意點:
1. 固定定位,就是相對瀏覽器窗口定位,頁面如何滾動,這個盒子顯示的位置不變.
2. 固定定位的元素是脫離標(biāo)準(zhǔn)流,不會占用標(biāo)準(zhǔn)流中的空間.
3. 固定定位和絕對定位一樣不區(qū)分行內(nèi),塊級,行內(nèi)塊級.
4. E6不支持固定定位.

練習(xí): 回到頂部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .bg {
            width: 600px;
            height: 1000px;
            border: 1px solid #000;
            background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }



        div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
        }

        .box2 {
            border: 1px solid #000;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;

            background-color: green;
            position: fixed;
            right: 0;
            bottom: 0;
        }

        .box3 {
            background-color: blue;
        }

        .box4 {
            background-color: yellow;
            height: 2000px;
        }



    </style>




</head>
<body>

<div class="bg"></div>

<div class="box1"></div>
<div class="box2"><a href="#">回到頂部</a></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

固定定位應(yīng)用場景

網(wǎng)頁對聯(lián)廣告
網(wǎng)頁頭部通欄(穿透效果)

-4. 靜態(tài)定位

什么是靜態(tài)定位?

默認(rèn)情況下標(biāo)準(zhǔn)流中的元素position屬性就是等于static,所以靜態(tài)定位其實就是默認(rèn)的標(biāo)準(zhǔn)流

-5. z-index

#1、z-index屬性：用于指定定位的元素的覆蓋關(guān)系
    1.1、z-index值表示誰壓著誰。數(shù)值大的壓蓋住數(shù)值小的。
    
    1.2、只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕 
            對定位、固定定位，都可以使用z-index值。而浮動的東西不能用。
    
    1.3、z-index值沒有單位，就是一個正整數(shù)。默認(rèn)的z-index值是0。

    1.4、如果大家都沒有z-index值（默認(rèn)所有元素z-index值為0），或者z- 
           index值一樣，那么誰寫在HTML后面，誰在上面能壓住別人。定位了 
           的元素，永遠(yuǎn)能夠壓住沒有定位的元素。

#2、注意點：從父現(xiàn)象（父親慫了，兒子再牛逼也沒用）
    父元素沒有z-index值, 那么子元素誰的z-index大誰蓋住誰
    父元素z-index值不一樣, 那么父元素誰的z-index大誰蓋住誰

練習(xí):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index屬性</title>
    <style>
        .father1 {
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
            /*  */
            z-index: 1;
        }
        .son1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 300px;
            top: 300px;
            /* father1 沒 father2 的z-index高,所以,son2的顯示在son1的上面 */
            z-index: 2;
        }

        .father2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
            z-index: 2;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 350px;
            top: 50px;
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="father1">
    <div class="son1"></div>
</div>

<div class="father2">
    <div class="son2"></div>
</div>
</body>
</html>

五練習(xí)

博客頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客頁面練習(xí)</title>
    <link rel="stylesheet" href="../css選擇器和三大特性/00-reset.css">
    <style>
        html,body {
            height: 100%;
        }
        .box {
            height: 100%;
        }
        .left_box {
            width: 22%;
            height: 100%;
            background-color: #8a8a8a;
            text-align: center;
            color: darkgrey;
            font-size: 16px;
            float: left;
        }
        .left_box .actor img {
            border: 6px solid white;
            border-radius: 50%;
            width: 120px;
            margin-top: 20px;
        }
        .left_box p:first-of-type {
            margin-top: 10px;
        }
        .left_box p:nth-of-type(2) {
            margin-top: 10px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        .left_box ul li {
            margin-bottom: 10px;
        }
        .left_box ul li a{
            color: darkgrey;
        }
        .left_box .course {
            margin-top: 30px;
        }
        .left_box a:hover {
            color: white;
            font-size: 15px;
        }
        .content_box {
            float: left;
            background-color: #e3e6ed;
            margin-top: 20px;
            padding-left: 10px;
            margin-left: 50px;
            width: 60%;
            border: 1px solid #8a8a8a;
        }
        .content_box div {
            margin-top: 20px;
            margin-bottom: 30px;
            border: 3px solid white;
        }
        .content_box .box1 {
            padding-left: 4px;
        }
        .content_box .box1 p{
            padding: 8px;
            float: left;
            font-size: 24px;
            font-weight: bold;
            border-left: 5px solid red;
        }
        .content_box .box1 span {
            float: right;
            margin-right: 10px;
        }
        .box2 p{
            margin-top: 50px;
            text-indent: 1em;
        }
        .box3 p{
            border-top: 2px #8a8a8a solid;
        }
        .box3 p span{
            display: inline-block;
            margin-left: 10px;
            margin-top: 10px;
        }
        .box3 p span:last-of-type{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left_box">
            <div class="actor">
                <img src="3.jpg" alt="">
            </div>
            <p>我的博客</p>
            <p>
                這個人很懶,什么都沒留下.
            </p>
            <ul>
                <li>
                    <a href="#">關(guān)于我們</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">公眾號</a>
                </li>
            </ul>
            <ul class="course">
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">Golang</a></li>
            </ul>
        </div>

        <div class="content_box">
            <div class="box1">
                <p>
                    魏老施
                </p>
                <span>2021-03-08</span>
            </div>
            <div class="box2">
                <p>
                    不想愛的愛情永久不會變壞，所以我們只曖昧、調(diào)情，卻不能相愛。
                </p>
            </div>
            <div class="box3">
                <p>
                   <span> # HTML</span>
                    <span># CSS</span>
                </p>
            </div>
        </div>
        <div class="content_box">
            <div class="box1">
                <p>
                    魏老施
                </p>
                <span>2021-03-08</span>
            </div>
            <div class="box2">
                <p>
                    不想愛的愛情永久不會變壞，所以我們只曖昧、調(diào)情，卻不能相愛。
                </p>
            </div>
            <div class="box3">
                <p>
                   <span> # HTML</span>
                    <span># CSS</span>
                </p>
            </div>
        </div>
        <div class="content_box">
            <div class="box1">
                <p>
                    魏老施
                </p>
                <span>2021-03-08</span>
            </div>
            <div class="box2">
                <p>
                    不想愛的愛情永久不會變壞，所以我們只曖昧、調(diào)情，卻不能相愛。
                </p>
            </div>
            <div class="box3">
                <p>
                   <span> # HTML</span>
                    <span># CSS</span>
                </p>
            </div>
        </div>
        <div class="content_box">
            <div class="box1">
                <p>
                    魏老施
                </p>
                <span>2021-03-08</span>
            </div>
            <div class="box2">
                <p>
                    不想愛的愛情永久不會變壞，所以我們只曖昧、調(diào)情，卻不能相愛。
                </p>
            </div>
            <div class="box3">
                <p>
                   <span> # HTML</span>
                    <span># CSS</span>
                </p>
            </div>
        </div>
    </div>
</body>
</html>