css網頁佈局

阿新 • • 發佈：2020-09-18

一、網頁佈局方式

#1、什麼是網頁佈局方式
佈局可以理解為排版，我們所熟知的文字編輯類工具都有自己的排版方式，比如word，nodpad++等等

而網頁的佈局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的
#2、網頁佈局/排版的三種方式
2.1、標準流2.2、浮動流2.3、定位流

二標準流

標準流的排版方式，又稱為：文件流/普通流，所謂的文件流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。
#   1 瀏覽器預設的排版方式就是標準流排版方式

#   2 在CSS中將元素分為三類：分別是
        塊級
        行內
        行內塊級

#  3 在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版

        垂直排版，如果元素是塊級元素，那麼就會垂直排版
        水平排版，如果元素是行內元素或行內塊級元素，那麼就會水平排版

三浮動流

1、浮動流是一種半脫離標準流的排版方式那什麼是脫離文件流？什麼又是半脫離文件流？

1.1 什麼是脫離文件流？

1、浮動元素脫離文件流意味著
#1、不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版
#2、無論是什麼級的元素都可以設定寬高
綜上所述，浮動流中的元素和標準流總的行內塊級元素很像

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        *  
{
            margin: 0;
            padding: 0;
        }
        /*
        不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版：span和p都顯示到一行
        無論是什麼級的元素都可以設定寬高：span這種行內元素也可以設定寬高
        */
        .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>

示範

例：

2、浮動元素脫標文件流意味著
#1、當某一個元素浮動走之後，那麼這個元素看上去就像被從標準流中刪除了一樣，這個就是浮動元素的脫標

#2、如果前面一個元素浮動走了，而後面一個元素沒有浮動，那麼垂直方向的元素會自動填充，浮動元素重新歸位後就會覆蓋該元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動元素脫標</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>

示範

View Code

注意點：

　　1、浮動流只有一種排版方式，就是水平排版，它只能設定某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值

　 2、一旦使用了浮動流，則margin:0 auto;失效

1.2 那什麼又是半脫離文件流？

脫離分為：半脫離與完全脫離，

其中完全脫離指的是元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣

而之所以稱為半脫離：是因為浮動元素浮動之後的位置取決於它在浮動之前的標準流中的位置，跟標準流還是有一定的關係，比如說浮動的元素在浮動之前處於標準流的第二行，那麼他浮動之後也是處於浮動流的第二行，不會去找其他行的浮動元素去貼靠，打一個比方就是：浮動流就是在標準流上面覆蓋的一層透明薄膜，元素浮動之後就會被從標準流中扔到浮動流這個薄膜上，他在這個薄膜上的位置還是以前在標準流的位置上找同方向的浮動元素進行貼靠，貼靠的準則就是：

（1）同一個方向上誰先浮動，誰在前面

（2）不同方向上左浮動找左浮動，右浮動找右浮動

1.3浮動元素貼靠問題

當父元素的寬度足夠顯示所有元素時，浮動的元素就會並列顯示
當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素
直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了

1.4 浮動元素字圍現象

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

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

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

        p {
            background-color: #b9950c;
        }



    </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日出生於新疆烏魯木齊市，中國內地影視女演員。2013年，迪麗熱巴因主演個人首部電視劇《阿娜爾罕》而出道。2014年，她主演了奇幻劇《逆光之戀》。2015年，迪麗熱巴憑藉愛情劇《克拉戀人》贏得高人氣，並獲得國劇盛典最受歡迎新人女演員獎。2016年，其主演的現代劇《麻辣變形計》播出；同年，她還憑藉喜劇片《傲嬌與偏見》獲得中英電影節最佳新人獎。2017年，迪麗熱巴因在玄幻劇《三生三世十里桃花》中飾演青丘白鳳九而獲得白玉蘭獎最佳女配角提名。2018年 ...
    迪麗熱巴（Dilraba），1992年6月3日出生於新疆烏魯木齊市，中國內地影視女演員 [1]  。
2013年，迪麗熱巴因主演個人首部電視劇《阿娜爾罕》而出道 [2]  。2014年，她主演了奇幻劇《逆光之戀》 [3]  。2015年，迪麗熱巴憑藉愛情劇《克拉戀人》贏得高人氣，並獲得國劇盛典最受歡迎新人女演員獎 [4]  。2016年，其主演的現代劇《麻辣變形計》播出 [5]  ；同年，她還憑藉喜劇片《傲嬌與偏見》獲得中英電影節最佳新人獎 [6]  。2017年，迪麗熱巴因在玄幻劇《三生三世十里桃花》中飾演青丘白鳳九而獲得白玉蘭獎最佳女配角提名 [7]  。2018年4月20日，主演的愛情喜劇電影《21克拉》上映 [8]  。
    迪麗熱巴出生於新疆烏魯木齊市，父親是新疆歌舞團的獨唱演員。因受父親影響，迪麗熱巴從小便對各種藝術類的東西頗感興趣，並主動要求學習鋼琴、舞蹈、小提琴、吉他等 [9]  。
2001年，9歲的迪麗熱巴被父親帶去一所藝術學院參加考試，當時她以為是上興趣班，結果被錄取後才發現是一個專業的舞蹈院校，而迪麗熱巴也開始了為期六年的民族舞、芭蕾舞專業學習。2007年，從藝術學院畢業的迪麗熱巴成為了新疆歌舞團的舞蹈演員 [10]  。2009年，迪麗熱巴還在東北師範大學民族學院讀了一年預科，在此期間她還參加了吉林省的首屆少數民族新歌大賽，並最終獲得了省級三等獎的成績 [11]  。
之後，迪麗熱巴卻慢慢發現這並不是自己想要的生活。於是決定繼續求學，去看看外面的世界，因為有不錯鋼琴基礎，所以本來想報考的是中央音樂學院，可報名時卻看到了中戲和上戲在招生，便突然決定改學表演。而迪麗熱巴會有這樣的決定則是受到了她鋼琴老師的指點。2010年，迪麗熱巴順利考入了上海戲劇學院表演系戲劇影視專業；同年，她參加了陸川執導的古裝片《王的盛宴》女主角“虞姬”的上海站海選 [12]  ，並因此獲得了頗多關注 [13]  。
</p>


</body>
</html>

示範一:圖文混排

例：圖文混排

規律：

#注意：在企業開發中，如何對網頁進行佈局
#1、垂直方向的佈局用標準流佈局，水平方向用浮動流佈局
#2、從上至下佈局
#3、從外向內佈局
#4、水平方向可以先劃分為一左一右再對左邊後者右邊進一步佈局

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

#1、在標準流中,內容的高度可以撐起父元素的高度
#2、在浮動流中,浮動的元素是不可以撐起父元素的高度的，當子元素都浮動起來後，父親的內容高度即height變為0，父元素就好像塌陷了一樣，因而又稱為父級塌陷

1.7 清除浮動

清除浮動的方式四
    本質原理與內牆法一樣，但我們用的css的偽元素選擇器實現的，就應該用css來控制樣式，符合前端開發思想
            #I、詳細用法
            .header:after {             <----在類名為“clearfix”的元素內最後面加入內容；
            content: ".";                 <----內容為“.”就是一個英文的句號而已。也可以不寫。
            display: block;               <----加入的這個元素轉換為塊級元素。
            clear: both;                  <----清除左右兩邊浮動。
            visibility: hidden;           <----可見度設為隱藏。注意它和display:none;是有區別的。
                                               visibility:hidden;仍然佔據空間，只是看不到而已；
            line-height: 0;               <----行高為0；
            height: 0;                    <----高度為0；
            font-size:0;                  <----字型大小為0；
            }
            
            .header { *zoom:1;}         <----相容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其餘沒用
            
            
            整段程式碼就相當於在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。
            之所以用它，是因為，你不必在html檔案中寫入大量無意義的空標籤，又能清除浮動。
            <div class="header"></div>


            #II、必須要寫的是下面這三句話
            content: '.';
            display: block;
            clear: both;

            
            #III、新浪首頁清除浮動的方法，也是採用偽元素
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;

#1、複習偽元素選擇器(CSS3中新增的為元素選擇器)
    偽元素選擇器的作用就是給指定標籤的內容前面新增一個子元素
    或者給指定標籤的內容後面新增一個子元素


#2、格式：給指定標籤的前面和後面新增子元素
    標籤名稱::before{
        屬性名稱：值；
    }

    標籤名稱::after{
        屬性名稱：值；
    }

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

        body {
        }

        .header:after {
            /*必須要寫這三句話*/
            content: '.';
            height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }
        .header {
            /*相容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其餘沒用*/
            *zoom: 1;
        }

        .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>
</body>
</html>

示範

例：

#通用寫法
.clearfix {
    *zoom:1
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

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

    <style>

        * {
            margin: 0;
            padding: 0;
        }
        .clearfix {
            *zoom:1
        }
        
        /*
            before的作用是子元素設定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>

示範