前言
? ?CSS盒模型（也被稱為框模型）是網(wǎng)頁(yè)布局的基礎(chǔ)——每個(gè)元素被表示為一個(gè)矩形的盒子盗棵，框的內(nèi)容(content)泽铛、內(nèi)邊距(padding)尚辑、邊框(border)和外邊距(margin)像洋蔥的膜那樣，一層包著一層構(gòu)建起來(lái)盔腔。瀏覽器渲染網(wǎng)頁(yè)布局時(shí)杠茬，他會(huì)算出每個(gè)盒子的內(nèi)容要用什么樣式，周圍的洋蔥層有多大弛随，以及盒相對(duì)于其他盒放在哪里瓢喉。
? ?元素盒的最里面是實(shí)際的內(nèi)容(content)，直接包圍內(nèi)容的是內(nèi)邊距(padding)舀透，或者叫做留白(padding)栓票，這個(gè)說(shuō)法是看到一篇文章提到的，我覺(jué)得很形象生動(dòng)盐杂。就像一幅畫(huà)一樣逗载，有主要的風(fēng)景人物，但畫(huà)卷上還有留白的地方链烈，增加了整幅畫(huà)的意境厉斟。既然內(nèi)容和留白都在畫(huà)卷上，那么我們可以想象得到元素盒模型的background屬性自然也應(yīng)用于內(nèi)容(content) + 留白(padding)區(qū)域了强衡。
? ?留白(padding)擦秽，邊框(border)和外邊距(margin)都是可選的，默認(rèn)值是零。但是感挥，不同的瀏覽器對(duì)于元素都有自己的默認(rèn)樣式缩搅。為了統(tǒng)一不同瀏覽器上的頁(yè)面樣式，一般將元素的margin和padding設(shè)置為0來(lái)覆蓋瀏覽器自帶樣式触幼。但是這種辦法比較粗暴和粗糙硼瓣，所以應(yīng)運(yùn)而生了，reset.css方法置谦，解決這個(gè)問(wèn)題堂鲤。其實(shí)本質(zhì)也就是，引入兼容不同瀏覽器的css代碼媒峡。
盒屬性
文檔的每個(gè)元素被構(gòu)造成文檔布局內(nèi)的一個(gè)矩形盒子瘟栖，盒子每層的大小都可以使用一些特定的CSS屬性調(diào)整。
標(biāo)準(zhǔn)盒模型和怪異盒模型
??標(biāo)準(zhǔn)盒模型很好理解谅阿，那就是業(yè)界統(tǒng)一遵循的一個(gè)規(guī)范化的盒模型半哟，也被稱作W3C標(biāo)準(zhǔn)模型。但是時(shí)代的發(fā)展中總會(huì)有不一樣的聲音签餐，不管其發(fā)聲目的是什么寓涨，他至少給了業(yè)界不一樣的景色。怪異盒模型就出自老大哥——微軟贱田，顧名思義就是不標(biāo)準(zhǔn)的盒模型缅茉，也被稱作IE標(biāo)準(zhǔn)模型或怪異盒模型。他們的區(qū)別就在于對(duì)于width和height的計(jì)算規(guī)則男摧。
- 在一個(gè)標(biāo)準(zhǔn)盒模型里蔬墩，盒子總寬度 = width + padding(左右) + border(左右) + margin(左右)
- 在一個(gè)IE標(biāo)準(zhǔn)盒模型里，盒子總寬度 = width + margin(左右) (即width已經(jīng)包含了padding和border值)
這樣就會(huì)造成一個(gè)問(wèn)題耗拓，對(duì)于一個(gè)給定width的div拇颅，如果是IE盒模型，那么增加/減少padding值乔询，div的內(nèi)容區(qū)域(content)的寬度是會(huì)受到牽連影響的樟插。
??那么如何區(qū)分是哪種盒模型呢？一般來(lái)說(shuō)竿刁，除IE外黄锤，其余的瀏覽器都默認(rèn)是W3C標(biāo)準(zhǔn)盒模型，同時(shí)css里的box-sizing屬性可以顯示的指明盒模型的類型食拜。
box-sizing: content-box || border-box || inherit;
其中conten-box表示是W3C標(biāo)準(zhǔn)盒模型鸵熟，border-box表示是IE標(biāo)準(zhǔn)盒模型。
width和height
? ?width和height設(shè)置內(nèi)容盒（content box）的寬度和高度负甸。內(nèi)容盒是盒內(nèi)容顯示的區(qū)域——包括盒內(nèi)的文本內(nèi)容流强，以及表示嵌套子元素的其他盒痹届。
注意：還有其它屬性可以更巧妙地處理內(nèi)容地大小——設(shè)置大小約束而不是絕對(duì)地大小。這些屬性包括
min-width打月、max-width队腐、min-height和max-height。
padding
? ?padding表示一個(gè)CSS盒子的內(nèi)邊距——這一層位于內(nèi)容盒的外邊緣與邊框的內(nèi)邊緣之間奏篙。padding屬性接受長(zhǎng)度值或百分比值柴淘，但不允許使用負(fù)值。其中百分?jǐn)?shù)值是相對(duì)于父元素的width計(jì)算的报破，要是父元素的width改變悠就，他們也會(huì)改變千绪。該層的大小可以通過(guò)簡(jiǎn)寫(xiě)屬性padding一次設(shè)置所有四個(gè)邊充易，或用padding-top、padding-right荸型、padding-bottom和padding-left屬性一次設(shè)置一個(gè)邊盹靴。
border
? ?CSS框的邊框(border)是一個(gè)分隔層，位于內(nèi)邊距的外邊緣以及外邊距的內(nèi)邊緣之間瑞妇。邊界的默認(rèn)大小為0——從而讓他不可見(jiàn)稿静。不過(guò)我們可以設(shè)置邊界的寬度、樣式和顏色讓他出現(xiàn)辕狰。border簡(jiǎn)寫(xiě)屬性可以讓我們一次設(shè)置所有四個(gè)邊改备，例如border:1px solid black; 但這個(gè)簡(jiǎn)寫(xiě)可以被各種普通書(shū)寫(xiě)的更詳細(xì)的屬性所覆蓋：
-
border-top,border-right,border-bottom,border-left:分別設(shè)置某一邊的邊界厚度/風(fēng)格/顏色。 -
border-width蔓倍、border-style悬钳、border-color：分別僅設(shè)置邊界的寬度/顏色/顏色，并應(yīng)用到全部四邊邊界偶翅。 - 你也可以單獨(dú)設(shè)置某一個(gè)邊的三個(gè)不同屬性默勾，如
border-top-width，border-top-style聚谁，border-top-color母剥，等。
? ?這里有一個(gè)css技巧形导，那就是可以通過(guò)border畫(huà)出三角形环疼，當(dāng)我們需要對(duì)話框上的三角形符號(hào)的時(shí)。
margin
外邊距（margin）代表CSS周圍的外部區(qū)域朵耕，稱為外邊距炫隶，他在布局中推開(kāi)其他CSS框爱榔。其表現(xiàn)與padding很相似慨默；簡(jiǎn)寫(xiě)屬性為margin胰柑，單個(gè)屬性分別為margin-top,margin-right,margin-bottom,margin-left。
注意：外邊距有一個(gè)特別的行為被稱作外邊距塌陷（margin collapsing）：當(dāng)兩個(gè)框彼此接觸時(shí)低缩，他們的間距將取兩個(gè)相鄰?fù)膺吔绲淖畲笾担皇莾烧叩目偤汀?/p>
當(dāng)margin值取auto時(shí)畜挥，表示外邊距的值由瀏覽器計(jì)算男图。
