盒模型-回頭看看基本功（盒子）

盒模型的二次理解。

1定義

所謂盒模型，就是瀏覽器爲頁面中的每一個HTML元素生成的矩形盒子。

1.1排布

這些盒子們都要按照可見版式模型在頁面上排布，版式模型由position,display,float這三個屬性來控制，position屬性控制頁面上元素間的位置關係，用於定位；display屬性控制元素顯示的本質（inline:默認值，顯示爲內聯元素；block：塊級元素；inline-block:行內塊級；table:做爲塊級表格來顯示；none:不會被顯示......）這些值能夠令元素輕鬆擁有其餘屬性的特色~float屬性也是做用於元素的位置關係，不過和position相比貌似調皮了一些，浮動是徹底脫離文檔流，定位的值中只有absolute,fixed徹底脫離了文檔流，默認值static即在常規文檔流中，相對定位relative是相對於它原來在文檔流中的位置（或者默認位置）。

1.2屬性

默認狀況下每一個盒子的邊框不可見，背景也是透明的，屬性可分爲三組：邊框（border）,內邊框(padding)，外邊框(margin)。

CSS爲邊框，內邊框和外邊框分別規定了簡寫屬性，這樣對不一樣邊框樣式相同的就能夠一條聲明設定了。可是不一樣樣式的最好單獨聲明，利於後期的單獨更改和語義化表達，如{margin:1px 2px 3px 4px;}最好用{margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;}，也能夠將二者混合使用，這樣只須要把不一樣的那一個屬性單獨拿出來寫就能夠了，能夠很大程度上減少工做量，注意css文件的讀取順序。

2 盒子邊距

2.1  The  basic

盒子的內邊距（padding）指盒子內容區與盒子邊框之間的距離，盒子的外邊距相對來講就複雜一些了，由於盒子之間的距離會出現「垂直方向上疊加」的狀況，eg:有3個段落咱們設置 p{margin-top:10px;margin-bottom:20px;}，那麼第一個段落和第二段落，以及第二個和第三段落之間的距離是多少？（10+20=30）嗎？實際距離是20px,也就是說值較大的外邊距決定兩個元素最終的距離，垂直外邊距疊加，直到一個元素的外邊距碰到令一個元素的邊框爲止。不過要注意的是疊加只是用於垂直方向的哦，水平的相鄰的元素他們之間的距離是相鄰外邊距之和。

2.2 The extend

爲文本元素設置外邊距時一般須要混合使用不一樣的單位，eg:一個段落的左右外邊距可使用像素，這樣該段文本始終與包含元素邊界保持固定間距，不受字號變化的影響。然而對於上下邊距，以em,rem(rem是相對與body字體的相對字體，em是相對與父級字體的相對字體，因此使用rem更好控制一些)當字體變大時，段間距也會相應變大，就比較和諧了。

3盒子有多大

3.1不一樣盒子模型

盒子模型有兩種，分別是 IE 盒子模型和標準 W3C盒子模型。他們對盒子模型的解釋各不相同。標準盒子模型的寬度只是內容的寬度，IE的盒子模型寬度包括內容，內邊距(padding),邊框(border)。因此在佔據位置相同的狀況下，盒子的大小是不一樣的。so~咱們須要在網頁的頂部加上doctype聲明，這樣就能避免不一樣瀏覽器按本身想法理解盒子模型進而出現不一樣瀏覽效果的狀況了。

3.2盒子的寬度

若是不設置塊級元素的width屬性，那麼這個屬性的默認值就是auto,結果會讓元素的寬度擴展到與父元素同寬。添加水平邊框，內邊距和外邊距，會致使內容寬度減小，減小的量爲添加的水平邊框，內邊距和外邊距的和。設定寬度值後，添加內邊距元素的width值不變，可是元素佔的地方比以前寬了2倍內邊距。說明width屬性只是盒子內容區的寬度，而非盒子所佔的寬度。