css三大模組：盒子模型、浮動、定位
一、盒子模型
把HTML頁面中的元素看作是一個矩形的盒子（裝內容的容器），每個矩形都由元素的內容、內邊距padding、邊框border和外邊距margin組成。
看下面的程式碼：
<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來指定盒模型，如下：
標準盒模型：
box-sizing: content-box; /*盒子大小為：width+padding+border*/
IE盒模型：
box-sizing: border-box; /*盒子大小為：width 即padding和border是包含到width裡面的*/
程式碼如下：
<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盒模型）：
| 瀏覽器下的效果 | 在Chrome的開發者工具中 兩個盒子的二維分析圖 |
網頁佈局的本質：把網頁元素（文字、圖片等），放入到盒子裡面，然後利用css擺放盒子的過程。
css的定位機制有3種：普通流（亦稱 標準流或文件流）、浮動和定位。
所謂文件流，實際上就是一個網頁內標籤元素從上到下，從左到右的排列順序。比如塊級元素會獨佔一行，行內元素會按順序依次前後排列，按照這種大前提的佈局排列之下 不會出現例外的情況 叫做標準流佈局。
二、浮動
浮動最開始是用來做文字環繞效果的。程式碼如下：
<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;
}
清除浮動後的效果圖：
三、定位
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>
設定疊放次序前後對比：
注：元素添加了浮動、絕對與固定定位之後，元素模式會發生轉換==>轉為行內塊模