css三大模塊：盒子模型、浮動、定位

時間 2020-08-10

標籤 css 三大模塊盒子模型浮動定位欄目 CSS 简体版

原文原文鏈接

1、盒子模型css

把HTML頁面中的元素看做是一個矩形的盒子（裝內容的容器），每一個矩形都由元素的內容、內邊距padding、邊框border和外邊距margin組成。css3

看下面的代碼：瀏覽器

<style> 
        .box{
            width: 200px;
            height: 200px;
            float: left;
            padding: 100px;
            margin: 100px; 
            border: 50px solid orangered;
            background-color: bisque;
        }
</style>
<div class="box"></div>

代碼效果以下：工具

瀏覽器下的效果	在Chrome的開發者工具中 box的二維分析圖

盒子模型通常分爲兩種：IE盒模型（又稱怪異盒模型）和標準盒模型佈局

css3中能夠經過box-sizing來指定盒模型，以下：spa

標準盒模型：設計

box-sizing: content-box;   /*盒子大小爲：width+padding+border*/

IE盒模型：code

box-sizing: border-box;   /*盒子大小爲：width  即padding和border是包含到width裏面的*/

代碼以下：cdn

        <style> 
        div{
            width: 200px;
            height: 200px;
            float: left;
            padding: 100px;
            margin: 100px; 
            border: 50px solid orangered;
            background-color: bisque; 
        }
        .box1{            
            box-sizing: content-box;   /*盒子大小爲：width+padding+border*/
        }
        .box2{            
            box-sizing: border-box;   /*盒子大小爲：width  即padding和border是包含到width裏面的*/
        }
    </style>
    <div class="box1">box1</div> 
    <div class="box2">box2</div>

兩種盒模型效果圖以下（box1爲標準盒模型、box2爲IE盒模型）：blog

瀏覽器下的效果	在Chrome的開發者工具中兩個盒子的二維分析圖

網頁佈局的本質：把網頁元素（文字、圖片等），放入到盒子裏面，而後利用css擺放盒子的過程。

css的定位機制有3種：普通流（亦稱標準流或文檔流）、浮動和定位。

所謂文檔流，實際上就是一個網頁內標籤元素從上到下，從左到右的排列順序。好比塊級元素會獨佔一行，行內元素會按順序依次先後排列，按照這種大前提的佈局排列之下不會出現例外的狀況叫作標準流佈局。

2、浮動

浮動最開始是用來作文字環繞效果的。代碼以下：

    <style>
        div{
            width: 250px;
            height: 250px;
            padding: 10px;
            color: #fff;
            border: 1px solid orange;
            background-color:orangered;
            line-height: 22px;
        }
        img{
            width: 100px;
            padding: 10px;
        }
    </style>
    <div>
        山一程,水一bai程,身向榆關那畔行,夜深du千賬燈.風一更,雪一更,聒碎鄉心夢不成,故園無此聲.<br/>
        
        <img src="https://ae01.alicdn.com/kf/Hbf6c93e6d94f4bc8aef35d23034b941aN.jpg" alt="">        
        人生若只如初見,何事秋風悲畫扇.等閒變卻故人心,卻道故人心易變.驪山語罷清宵半,淚雨零鈴終不怨.何如薄倖錦衣郎,比翼連枝當日願.
    </div>

     修改img樣式以下：

     img{
            width: 100px;
            padding: 10px;
            float: right; /*給圖片添加浮動*/
    }

效果對比圖：

標準流（從上而下按順序依次排列）	圖片添加浮動（文字環繞效果）

元素的浮動是指設置了浮動屬性的元素會脫離標準流的控制，移動到父元素指定位置的過程。

在css中，能夠經過float屬性來定義浮動，其基本語法格式以下：

選擇器{float：屬性值;}

屬性值	描述
left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認值）

浮動的特性：會脫離標準流，不佔位置，會影響標準流，浮動元素漂浮在其它標準流盒子上面。浮動只有左右浮動。

代碼以下：

    <style>
        div{
            width: 200px;
        }
        div:first-child{
            background-color: green;
            height: 200px;
            float: left; /*設置爲浮動*/
        }
        div:last-child{
            height: 300px;
            background-color:orangered;
        }
    </style>
    <div></div>
    <div></div>

效果圖以下：

標準流（未設置浮動）	浮動（第一個div設爲浮動後，不佔位，並漂浮在標準流的上方，所以會蓋住了一部分第二個div的內容）

若是要讓多個div在同一行顯示，必須每一個元素都添加浮動

代碼以下：

<style>
        div{
            width: 200px;
            height: 200px;
            float: left;
        }
        div:first-child{
            background-color: orangered;
        }
        div:nth-child(2){
            background-color: yellowgreen;
        }
        div:last-child{
            background-color: skyblue;
        }
    </style>
    <div></div>
    <div></div>
    <div></div>

效果圖：

總結：浮動的目的就是爲了讓多個塊級元素在同一行上顯示。

注：塊級/行內元素，添加浮動後，都具備行內塊的特性（行內塊沒有指定寬度時，寬度爲內容的寬度）。

經常使用佈局設計：利用浮動實現兩列左窄右寬佈局（左邊固定，右邊自適應）

代碼以下：

<style>  
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 100%; 
        height: 500px;
        background-color: #eee;
    }
    .main div:first-child{ 
        width: 200px;
        height: 500px;
        float: left;
        color: #fff;
        background-color: orangered; 
    }
    .main div:last-child{ 
        margin-left: 210px; 
    }
</style>

    <div class="main">
       <div>我是左邊</div>
       <div>
           我是右邊 
       </div>
    </div>

效果圖以下：

另外，浮動的使用可能會致使父元素由於子級浮動而引發內部高度爲0

即若是子盒子1和子盒子2都設置了浮動，因爲浮動元素不佔有位置，而父盒子又沒有設置高度，此時底下的盒子就會往上跑。

代碼以下：

<style>  
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 500px;  
    }
    .main div{ 
        width: 200px;
        height: 300px;
        float: left; 
    }
    .main div:first-child{ 
        background-color: orangered;  
    }
    .main div:last-child{ 
        background-color: purple;  
    }
    .bottom{
        width: 500px;
        height: 100px;
        background-color: green;
    }
</style>

<div class="main">
       <div>我是左邊</div>
       <div>
           我是右邊 
       </div>
</div>
<div class="bottom">
        我是底部
</div>

效果圖：

如何解決浮動帶來的這個問題呢？固然，若是浮動的子盒子的高度是固定的，直接計算出父盒子的高度並設置就能解決。

可是，浮動的子盒子高度不固定時，就須要用到清除浮動了。

清除浮動的本質：爲了解決父級元素由於子級元素浮動引發內部高度爲0的問題。

解決方案：

①額外標籤法。在浮動盒子後加一個空盒子clearfix，css設置爲
.clearfix{clear:both;}
此方法不推薦。雖然通俗易懂、書寫方便，但添加了一些無心義標籤，結構化較差。

②父級元素添加overflow屬性（經過觸發BFC的方式）
也不推薦。代碼簡潔，但內容多時，容易形成不會自動換行、內容被隱藏。

/* 添加 :after僞元素清除浮動。
符合閉合浮動思想，結構語義化正確。IE6-7不支持（使用zoom:1 觸發haslayout）
使用方法：父級添加類clearfix
*/
.clearfix::after{
  content: "."; /*儘可能不爲空，不然低版本瀏覽器有空隙*/
  display: block; /*轉爲塊級元素*/
  height: 0;
  visibility:hidden;/*隱藏盒子*/
  clear: both;/*清除浮動*/         
}
/* ie6-7瀏覽器 清除浮動的處理方式*/
.clearfix{
  *zoom:1;  /*  *表明ie6-7能識別的特殊符號*/
}

/* 使用::before和::after雙僞元素清除浮動 
推薦。代碼更簡潔。IE6-7不支持（使用zoom:1 觸發haslayout）
使用方法：父級添加類clearfix::before和clearfix::after
*/
.clearfix::before,.clearfix::after{
  content: "";
  display: table;
}
.clearfix::after{
  clear: both;
}
/* ie6-7瀏覽器 清除浮動的處理方式*/
.clearfix{
  *zoom: 1;
}

清除浮動後的效果圖：

3、定位

position定位相對於float浮動更爲靈活。若是用標準流或者浮動，實現會比較複雜或者難以實現的，能夠經過定位的屬性設置，將某個元素定位到指定的位置。

定位：position 主要包括定位模式和邊偏移兩部分。即定位須要和邊偏移搭配使用

1.邊偏移

邊偏移屬性	描述
top	頂端偏移量，定義元素相對其父級元素上邊線的距離，單位爲px。例如 top:50px;
bottom	底部偏移量，定義元素相對其父級元素下邊線的距離，單位爲px。例如 bottom:50px;
left	左側偏移量，定義元素相對其父級元素左邊線的距離，單位爲px。例如 left:50px;
right	右側偏移量，定義元素相對其父級元素右邊線的距離，單位爲px。例如 right:50px;

2.定位模式

在css中，position屬性用於定義元素的定位模式，基本語法格式以下：

選擇器{position:屬性值;}

position屬性的經常使用值

屬性值	描述	是否脫標占有位置
static	默認。靜態定位，對偏移無效，可用來清除定位	不脫標，正常模式（就是標準流）
relative	相對定位，相對於自身位置移動	不脫標，佔有位置
absolute	絕對定位，相對於定位父級移動，如父級無定位，以body爲準。經常使用子絕父相（子元素絕對定位，父元素相對定位）	徹底脫標，不佔有位置
fixed	固定定位，相對於瀏覽器移動	徹底脫標，不佔有位置

當對多個元素同時設置定位時，定位元素之間有可能發生重疊。

因此，須要經過css的z-index屬性來調整定位元素的堆疊順序。

z-index默認值爲auto，能夠設置正整數，也能夠設置爲負整數。數字後面不能添加單位。

z-index取值越大，定位元素在層疊元素中越居上層；當取值相同時，根據書寫順序，後來者居上。

代碼以下：

<style>
        *{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .main{
            width: 400px;
            height: 300px;
            background-color: #eee;
            position: relative;/*父元素添加相對定位*/
        }
        .main div{
            width: 200px;
            height: 100px;
            text-align: right;
            position: absolute;/*子元素添加絕對定位*/
        }
        /*當未設置盒子的疊放順序時，三個盒子會根據書寫順序依次疊放
        假如入設置第二個盒子的z-index爲1時,此盒子會在最上方顯示
        */
        .main div:first-child{
            background-color: green;
            top: 50px;
            left: 50px;
        }
        .main div:nth-child(2){
            background-color:tomato;
            top: 100px;
            left: 100px;
            z-index: 1;/*設置疊放順序*/
        }
        .main div:last-child{
            background-color: blue;
            top: 150px;
            left: 150px;
        }
    </style>
<div class="main">
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
 </div>