一、盒模型
盒子是css中的基礎(chǔ)概念，可見元素會(huì)在頁面中占據(jù)一個(gè)矩形區(qū)域，這個(gè)區(qū)域就是元素的盒子。我們需要使用它來配置元素的外觀以及文檔的整體布局。
二、使用盒模型
1、為元素應(yīng)用內(nèi)邊距
應(yīng)用內(nèi)邊距會(huì)在元素的內(nèi)容和邊框之間添加空白。
屬性說明屬性值
padding-top設(shè)置元素的上內(nèi)邊距長(zhǎng)度值或者百分比
padding-right設(shè)置元素的左內(nèi)邊距長(zhǎng)度值或者百分比
padding-bottom設(shè)置元素的下內(nèi)邊距長(zhǎng)度值或者百分比
padding-left設(shè)置元素的左內(nèi)邊距長(zhǎng)度值或者百分比
padding一次聲明所有的內(nèi)邊距1~4長(zhǎng)度值或者百分比
如果使用百分?jǐn)?shù)值指定內(nèi)邊距，百分?jǐn)?shù)總是和包含塊（父元素的內(nèi)容盒子成為子元素的塊容器）的寬度有關(guān)，高度不考慮在內(nèi)。此處的div元素的padding 與其父元素的content區(qū)域的寬度有關(guān)系。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 border:red 2px solid; 9 width:100px;10 height: 200px;11 background: yellow;12 background-clip: content-box;13 padding: 10%;14 }15 </style>16 </head>17 <body>18 <div>19 22 </div>23 </body>24 </html>
padding屬性指定四個(gè)值，分別是上、右、下、左的內(nèi)邊距，如果省略左邊的值，默認(rèn)使用右邊的，如果省略下邊的，默認(rèn)使用上邊的，如果只有一個(gè)值，那么四個(gè)內(nèi)邊距都是這個(gè)值。
2、為元素設(shè)置外邊距
外邊距是元素邊框和頁面上圍繞在它周圍的所有東西之間的空白區(qū)域。
屬性說明屬性值
margin-top設(shè)置元素的上外邊距長(zhǎng)度值或者百分比
margin-right設(shè)置元素的右外邊距長(zhǎng)度值或者百分比
margin-bottom設(shè)置元素的下外邊距長(zhǎng)度值或者百分比
margin-left設(shè)置元素的左外邊距長(zhǎng)度值或者百分比
margin一次設(shè)置元素的所有外邊距1~4個(gè)長(zhǎng)度值或者百分比
設(shè)置百分?jǐn)?shù)值時(shí)，百分?jǐn)?shù)的值和包含塊的寬度有關(guān)。當(dāng)一次設(shè)置多個(gè)外邊距時(shí)，和padding屬性類似。當(dāng)為display設(shè)置成inline的元素設(shè)置外邊距，頂邊和底邊的外邊距不會(huì)顯示。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 span{ 8 background: blue; 9 /* margin: 10px;*/10 }11 </style>12 </head>13 <body>14 <span>I love China!</span>15 <span>I love China!</span>16 </body>17 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 span{ 8 background: blue; 9 margin: 10px;10 }11 </style>12 </head>13 <body>14 <span>I love China!</span>15 <span>I love China!</span>16 </body>17 </html>
3、控制元素的尺寸
瀏覽器會(huì)基于頁面上內(nèi)容的流設(shè)置元素的尺寸，使用尺寸相關(guān)的屬性可以覆蓋這些行為。
屬性說明屬性值
width設(shè)置元素的寬度auto、長(zhǎng)度值或者百分?jǐn)?shù)
height設(shè)置元素的高度auto、長(zhǎng)度值或者百分?jǐn)?shù)
min-width設(shè)置元素的最小可接受的寬度auto、長(zhǎng)度值或者百分?jǐn)?shù)
min-height設(shè)置元素最小可接受的高度auto、長(zhǎng)度值或者百分?jǐn)?shù)
max-width設(shè)置元素最大可接受的寬度auto、長(zhǎng)度值或者百分?jǐn)?shù)
max-height設(shè)置元素最大可接受的高度auto、長(zhǎng)度值或者百分?jǐn)?shù)
box-sizing設(shè)置尺寸應(yīng)用的元素盒子的那一部分
content-box、border-box
屬性值為auto時(shí)，瀏覽器會(huì)為我們?cè)O(shè)置好元素的寬度和高度。百分?jǐn)?shù)值是根據(jù)包含塊的寬度來計(jì)算的（高度也是根據(jù)包含塊的高度來計(jì)算的）。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 img{ 8 width: 100%; 9 min-width: 10px; 10 max-width: 1000px;11 }12 </style>13 </head>14 <body>15 <img src="1.png" alt="">16 </body>17 </html>
如果包含塊沒有指定確切的高度（非百分比），那么不要使用百分比來設(shè)置元素的高度，因?yàn)榘瑝K的高度是由其所包含的元素的高度決定的。
當(dāng)包含塊只有一個(gè)元素的時(shí)候，我們將元素的高度設(shè)置為100%時(shí)，但是包含塊的高度默認(rèn)是等于元素的高度所以沒有作用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div { 8 width: 30%; 9 height: 100%;10 background: red;11 }12 </style>13 </head>14 <body>15 <div class="div1">div1</div>16 </body>17 </html>
但是包含塊包含多個(gè)塊元素時(shí)，我們給元素的高度設(shè)置為100%，然后包含塊的高度又是其所包含的所有的元素的高度，會(huì)造成無限循環(huán)去計(jì)算這個(gè)高度，所以這個(gè)高度計(jì)算不會(huì)生效。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 30%; height: 100%; background: red; } </style></head><body> <div class="div1">div1</div> <div class="div2">div2</div></body></html>
我們可以給html設(shè)置高度為100%，這樣html的高度等于窗口的大小。
box-sizing屬性
其中content-box是默認(rèn)值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 img{ 8 background: red; 9 border: 2px solid yellow;10 }11 img.first{ 12 width: 100px; 13 height: 100px;14 box-sizing: border-box;15 }16 img.second{17 width: 100px; 18 height: 100px;19 box-sizing: content-box;20 }21 </style>22 </head>23 <body>24 <img src="1.png" alt="" class="first">25 <img src="1.png" alt="" class="second">26 </body>27 </html>
4、處理瀏覽器溢出
如果設(shè)置了元素的尺寸，當(dāng)內(nèi)容太大，元素的內(nèi)容盒無法完全顯示的時(shí)，默認(rèn)處理方式是內(nèi)容溢出?？梢酝ㄟ^overfolow-x,overflow-y,overflow屬性來設(shè)置溢出方式，overfolow-x,oberflow-y屬性分別設(shè)置水平和方向的溢出方式,overflow可以一次設(shè)置兩個(gè)方向的溢出方式，屬性值如下：
其中當(dāng)屬性值設(shè)置為scroll時(shí)，必定會(huì)有滾動(dòng)條。當(dāng)設(shè)置為auto時(shí)，只有內(nèi)容溢出太會(huì)顯示滾動(dòng)條。
5、設(shè)置元素的可見性
visibility 屬性規(guī)定元素是否可見。
提示：即使不可見的元素也會(huì)占據(jù)頁面上的空間。請(qǐng)使用 "display" 屬性應(yīng)用none來創(chuàng)建不占據(jù)頁面空間的不可見元素。此外，還可以使用全局屬性hidden來創(chuàng)建不占據(jù)頁面空間的不可見元素。
1 <html> 2 <head> 3 <style type="text/css"> 4 .coll 5 { 6 visibility:collapse 7 } 8 </style> 9 </head>10 <body>11 <table border="1">12 <tr class="coll">13 <td>Adams</td>14 <td>John</td>15 </tr>16 <tr>17 <td class="coll">Bush</td>18 <td>George</td>19 </tr>20 </table>21 </body>22 </html>
6、設(shè)置元素的盒類型
display 屬性規(guī)定元素的盒類型。
當(dāng)display設(shè)置成run-in值時(shí)，元素的盒類型取決于周圍的元素，稱作插入元素。主流瀏覽器對(duì)該屬性值并不友好。
1）當(dāng)插入元素包含一個(gè)display屬性值為block的元素，那么插入元素就是塊級(jí)元素。
2）當(dāng)插入元素周圍的相鄰兄弟元素是塊級(jí)元素，那么插入元素就是兄弟元素中第一個(gè)行內(nèi)元素。
3）其他情況下，插入元素均作為塊級(jí)元素對(duì)待。
7、創(chuàng)建浮動(dòng)盒
float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
注釋：假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過程會(huì)持續(xù)到某一行擁有足夠的空間為止。
left 元素在所在行漂浮起來，移動(dòng)元素，使元素左邊界挨著包含塊的左邊界或者另一個(gè)元素的右邊界。該元素的位置可以被其他元素占領(lǐng)，堆疊在其他元素的上面。
right 元素在所在行漂浮起來移動(dòng)元素，使元素的右邊界挨著包含塊的右邊界或者另一個(gè)元素的左邊界。該元素的位置可以被其他元素占領(lǐng)，堆疊在其他元素的上面。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 30%; 9 height: 100px;10 background: red;11 }12 .div1{13 float: left;14 background: rgba(0,0,0,0.2);15 16 }17 .div2{ 18 background: yellow;19 }20 .div3{21 22 }23 </style>24 </head>25 <body>26 <div class="div1"></div>27 <div class="div2"></div>28 <div class="div3"></div>29 </body>30 </html>
由于給div1設(shè)置了浮動(dòng)，div1漂浮移動(dòng)到所在行的最左邊，div2會(huì)占據(jù)原來div1的位置。將div1的顏色設(shè)置成透明的，所以看見的是div2的顏色。
8、阻止浮動(dòng)堆疊
clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。如果聲明為左邊或右邊清除，會(huì)使元素的上外邊框邊界剛好在該邊上浮動(dòng)元素的下外邊距邊界之下。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 30%; 9 height: 100px;10 background: red;11 }12 .div1{13 float: left;14 background: rgba(0,0,0,0.2);15 16 }17 .div2{ 18 clear: left; 19 background: yellow;20 }21 .div3{22 23 }24 </style>25 </head>26 <body>27 <div class="div1"></div>28 <div class="div2"></div>29 <div class="div3"></div>30 </body>31 </html>
