深刻理解CSS網頁佈局-理論篇

時間  2019-11-13
標籤 深刻 理解 css 網頁 佈局 理論 欄目 CSS 简体版
原文   原文鏈接

在CSS網頁開發佈局中，須要對浮動和定位有深入的理解才能在開發中遊刃有餘。css

基於此，在博客園中作了本篇總結，這些總結來自實踐經驗和閱讀一些書籍後的理解總結，主要內容爲浮動，清除浮動，定位。html

（可點擊屏幕左邊的目錄查閱）ide

一. float屬性深刻理解

首先簡單佈局一下，代碼以下：佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css Test</title>
<style type="text/css">

#bigBox {
    border: 2px solid Gray;
    width: 500px;
    height: 400px;
    margin: 100px auto;
}

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
}


</style>
</head>
<body>

<div id="bigBox">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

</body>
</html>

效果圖：測試

圖p1spa

1. 脫離文檔流

脫離文檔流，即在元素原來的位置中脫離出來，能夠理解爲漂浮起來，可是要注意一些細節。3d

細節一

若浮動元素後面有不浮動的元素，那麼其後面不浮動的元素會把浮動元素視爲消失，而後頂到它的位置中。code

咱們來測試一下：對第二個div（id=box2）設置浮動，觀察第三個div的位置htm

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;

    float:left;/*測試內容*/
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
}

效果圖：對象

圖p2

咱們能夠看到第三個div頂到浮動div原來的位置上去了，這裏的float：left 設置爲right，也一樣，即第二個div消失了，後面的頂上去。

效果圖：

 圖p3

 

細節二

咱們不能理解爲設置float以後，這個元素就徹底漂浮在沒有設置float元素的上面，雖然在細節一中的效果圖中看是漂浮在上面（2在3的上面）。這個細節就是浮動只對後面的元素形成影響（所謂影響，就是後面的元素把它視爲消失），對於排在它前面的同級塊元素，不會對其位置形成影響。（即若是前面的同級塊元素沒有設置浮動，那麼它也不會漂浮到這個元素的上面）。細節一的p1例子已經驗證了這一特性（2仍是在1的下面）。

那麼，對於排在前面的同級內聯元素呢？對於同級內聯元素，設置了float屬性的元素與前面的內聯元素屬於同一層面，並且優先級高於前面的同級內聯元素，這裏的優先級指位置優先級，好比float：left，那麼前面的內聯元素若是原來佔據最左邊，那麼它因爲優先級低於浮動元素，因此它就會讓位與浮動元素，排在浮動元素的右邊。

咱們來看一下測試代碼（重點查看註釋的測試內容）：

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
    display: inline-block; /*測試內容*/
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;

    float:left;  /*測試內容*/
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
}

效果圖：

圖p4

分析：對於1（這裏用數字表明相應的div，上下同）來講，因爲排在浮動的2的前面，因此它不管是否爲塊元素，都和2屬於同一層面，再因爲它不是塊元素，因此它的位置優先級別低於2，因爲2的float：left，向左浮動，因此它靠最左，1被擠到它的右邊。對於3來講，2因爲是浮動，因此視爲消失了，可是因爲3是塊元素，因此獨佔一行，因而就有了上面的效果。

 

細節三

 文字永遠會被擠出。咱們把1,2設置浮動，把3註釋，而後添加p標籤。查看一下狀況：

<div id="bigBox">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <!-- <div id="box3">3</div> -->
    <p>HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! 10個HelloWorld！</p>
</div>

圖p5

實際上，並非P元素和1，2浮動元素並列排在了一塊兒，在細節一二中，咱們知道p元素必定是頂到1的位置中的，可是因爲文字永遠是被擠出來的，因此他們被擠到2的左邊，此時實現了一個文字環繞效果。咱們能夠給P元素添加背景色來查看一下實際：

p {
    background-color: red;
}

 圖p6

 

2. 沒有固定尺寸的父級元素沒法自適應浮動的子元素（全部子元素都爲浮動）

一樣的，父元素屬於文檔流，若是子元素中有設置浮動的，那麼也視爲消失，因此父元素不會包裹它，若是所有子元素都爲浮動，那麼至關於這個父元素裏面沒有子元素，此時的表現和子元素爲空同樣。

咱們先來看一下，在沒有浮動元素的文檔流中的狀況：

代碼：

body {
    margin: 0 300px;
}

#bigBox {
    border: 2px solid Gray;
/*    width: 500px;
    height: 400px;*//*測試內容：這裏要設置去掉寬高*/
    margin: 100px auto;
}

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
}
<body>

<div id="bigBox">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

</body>

效果圖：

圖p7

這裏的div（id=bigBox，1,2,3的父級元素）沒有設置寬高，因此自動支撐起了子元素的寬高，因爲1,2,3都是塊元素，因此獨佔一行，寬度自動適應爲body的寬度，因此如效果圖所示，這是沒有設置浮動的狀況。

咱們把2設置爲浮動，查看一下效果：

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
    float: left; /*測試內容*/
}

效果圖：

圖p8

父元素仍是能夠適應，不過視2爲消失。

下面咱們把所有子元素都設置爲浮動，查看一下效果：

body {
    margin: 0 300px;
}

#bigBox {
    border: 2px solid Gray;
/*    width: 500px;
    height: 400px;*/
    margin: 100px auto;
}

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
    float: left; /*測試內容*/
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
    float: left; /*測試內容*/
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
    float:left; /*測試內容*/
}

圖p9

 

咱們把1,2,3去掉，查看沒有子元素的父元素的效果圖，而後對比一下：

<body>

<div id="bigBox">
  <!--   <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div> -->
</div>

</body>
</html>

圖p10

結果和p9是同樣的，也就是p9中父元素把1,2,3視爲消失了。

 

二. 清除浮動

1. 清除浮動方法（非父元素受影響）

方法一：設置clear屬性，這個屬性設置在受影響的元素（非父級）上

clear屬性值有left，right，both，通常狀況下對使用both清除浮動，咱們來看一下：

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
    float: left; /*測試內容*/
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
    clear:both; /*測試內容*/
}

圖p11

請對比p2，能夠這樣形象理解，把原來2的消失變成了可見，而後就排在它的後面。

 

方法二：額外添加一個空元素，並設置clear屬性

<div id="bigBox">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="clear"></div> <!-- 測試內容 -->
    <div id="box3">3</div>
</div>
#clear {
    clear: both;
}

一樣能夠達到預期效果：

 圖p12

 

2. 清除浮動方法（父元素受影響）

圖p7中咱們看到父元素把子元素1,2,3視爲消失，因此沒法自適應子元素的寬度，爲了消除子元素浮動對父元素的影響，這裏有三個方法能夠解決問題，咱們來測試分析一下。

先把父元素受影響的代碼和效果圖貼出來：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css Test</title>
<style type="text/css">

body {
    margin: 0 300px;
}

#bigBox {
    border: 2px solid Gray;
/*    width: 500px;
    height: 400px;*/
    margin: 100px auto;
    /*clear: both;*/
}

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
    float: left; /*測試內容*/
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
    float: left; /*測試內容*/
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
    float: left; /*測試內容*/
}

#clear {
    clear: both;
}

</style>
</head>
<body>

<div id="bigBox">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

</body>
</html>
View Code

圖p13

 

方法一：在父元素裏面添加一個空的子元素，放在最後面，並設置clear屬性

<div id="bigBox">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <!-- 這是一個清除浮動的空標籤 -->
    <div id="clear"></div>
</div>

效果圖：

圖p14

分析：原理很簡單，空div設置了clear屬性，因此它不受前面1,2,3的影響，因此它就會排在1,2,3的後面，形成了空div與頂部之間有了必定的距離，這個距離就拉大了父元素的尺寸，因此從表現上看，就像是清除了浮動，達到咱們想要的效果。

此方法的弊端就是添加了額外的無心義的標籤。

 

方法二：在父元素上設置overflow:hidden;

#bigBox {
    border: 2px solid Gray;
/*    width: 500px;
    height: 400px;*/
    margin: 100px auto;
    overflow:hidden; /*測試內容*/
}

效果圖：

 圖p15

 

深刻理解overflow屬性

overflow的屬性值有：visible（默認值），hidden，scroll，auto，inherit

經常使用的是hidden屬性，除了visible以外，不算inherit（繼承）在內的其餘三個屬性值，若是設置了，那麼該元素就會與浮動元素在同一個層面。咱們能夠看到文章開頭的圖p2中，2浮動在3的上面，由於它們不在同一個層面，若是對3設置overflow：hidden；（三個屬性均可），那麼他們就屬於同一個層面，此時3雖然受浮動的影響，可是因爲同一個層面的關係，因此它排在了2的後面，咱們來測試一下。

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
    float: left; /*測試內容*/
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
    overflow: hidden;/*測試內容*/
}

效果圖：

圖p16

咱們比較圖p2和p16，就能夠看出overflow的這一特性。

回到咱們討論的父元素上面，父元素設置overflow屬性，因此它就與全部浮動的子元素在同一層面上，因此就支撐了起來。不過它的弊端就是overflow的三個屬性會對子元素超出父元素的部分不顯示出來，可能形成信息缺失。

 

特別注意

在ie6及如下版本中（怪異模式），overflow的設置仍是不起做用，這裏就要用到ie特有的一個屬性zoom來解決，只要設置zoom：1，即原來的大小便可，代碼以下：

#bigBox {
    border: 2px solid Gray;
/*    width: 500px;
    height: 400px;*/
    margin: 100px auto;
    overflow: hidden;
    zoom:1;/*添加這個屬性，可兼容ie6*/
}

 

方法三：使用自定義僞類，設置清除屬性

這是最實用和推薦的方法，通常把這個僞類的名稱設置爲 -XXX-clearFix，好比新浪微博就是用 -weibo-clearFix，在使用的過程當中，咱們習慣性的使用僞對象after的方法，在clearFix後面添加一些清除浮動的屬性。

.-test-clearFix:after {
    clear: both;
    display: block;
    visibility: hidden; /*設置不可見*/
    height: 0;
    line-height: 0;
    content: ""; /*after僞對象必須的屬性，能夠設置內容爲空*/
}

.-test-clearFix {}

在父級div裏面添加這個類便可：

<div id="bigBox" class="-test-clearFix">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

效果圖：

圖p17

 

三. 相對定位和絕對定位

1. 相對定位

特色一

相對自身偏移。

相對定位比較好理解，它相對於自身進行了定位，所設置的偏移屬性的參照物爲自己原來的位置。

特色二

元素原來的位置不脫離文檔流，佔據了位置。

對於特色1、二，咱們來測試一下：

#bigBox {
    border: 2px solid Gray;
    width: 500px;
    height: 400px;
    margin: 100px auto; 
}

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
    float: left;
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;

    float: left;
    position: relative;/*測試內容*/
    top: -140px;
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;

    float: left;
}

圖p18

2佔據了原來的位置，因此3不會靠左移動。

 

2.絕對定位：absolute

特色一

脫離文檔流

絕對定位和float屬性有類似之處，設置了這個屬性的元素會脫離文檔流，脫離文檔流後的表現和float同樣，可是它沒法清除浮動也不佔據位置。

#bigBox {
    border: 2px solid Gray;
/*    width: 500px;
    height: 400px;*/
    margin: 100px auto;
    position: relative; /*測試內容*/
}

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
    position: absolute;/*測試內容*/
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
    position: absolute; /*測試內容*/
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
    position: absolute; /*測試內容*/
}

效果圖：

圖p19

圖中能夠看出1,2,3進行了絕對定位，而且重疊在了一塊兒。其重疊特性爲下面的特色二。

 

特色二

排再文檔流後面的絕對定位元素顯示的優先級高於前面的絕對定位元素。

爲了區分，咱們來給出必定的位移，觀察先後優先級：

#bigBox {
    border: 2px solid Gray;
/*    width: 500px;
    height: 400px;*/
    margin: 100px auto;
    position: relative; /*測試內容*/
}

#box1{
    background: yellow;
    width: 100px;
    height: 100px;
    position: absolute;/*測試內容*/
}

#box2{
    background: SkyBlue;
    width: 120px;
    height: 100px;
    position: absolute; /*測試內容*/
    left: 50px;
    top:40px;
}

#box3{
    background: pink;
    width: 140px;
    height: 100px;
    position: absolute; /*測試內容*/
    left: 80px;
    top: 20px;
}

圖p20

圖中能夠看出優先級 3>2>1

 

特色三

絕對定位，其父級元素若是沒有設置定位屬性，則以更高級別的有設置定位屬性的做爲參照物進行定位，若是父級元素都沒有定位屬性，則以body做爲參照。

（代碼參考"特色一"中的代碼#bigBox裏面，設置了relative屬性，裏面的1,2,3以該父級元素進行絕對定位）

 

3. 絕對定位：fixed

這個定位屬性是最簡單的，其特色是脫離文檔流，不佔據位置，而後固定在屏幕，不會對文檔流形成影響。這裏就不進行代碼驗證。

 

深刻理解了這些屬性，就能夠在實際工做中靈活應用，後續會總結一些佈局實戰。本文如有不妥之處，歡迎批評指正。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程