Introduction to the Box Model
瀏覽器載入HTML element時會帶有默認的位置的值，而這種默認的值往往不是我們想要的。理解“盒子模型”，對我們了解elements是如何在網(wǎng)頁上顯示和展示極為重要。
所有的網(wǎng)頁內(nèi)的elements都被瀏覽器都被解譯為“l(fā)iving"在一個盒子里面。這就是為什么稱其為“盒子模型”。
例如，當你改變了某一element的背景色，你其實改變的是整個盒子的背景色。
The Box Model
盒子模型包含一套屬性，其定義了elements如何占據(jù)網(wǎng)頁空間，包括：
Width and height — 確定了 content area 的寬高
Padding — 確定了 content area 和 border 之間的空間
Border — 確定了環(huán)繞content area和 padding的邊框的厚度和樣式
Margin —確定了border和其他elements之間的距離
Height and Width
一個element的content area有兩個維度：Height and Width。默認情況下，他們的值被HTML盒子設為包裹住全部raw content。
像素(pixels)讓你可以精確調節(jié)box的尺寸?(width and height)。當elements被設為以像素為單位時，在所有設備上其尺寸都是一致的——這也意味著在筆記本屏幕上合適的大小，在手機屏幕上可能會溢出（overflow ）。
Borders
Borders 就是環(huán)繞在 element 周圍的線，類似于一幅畫的相框。Borders 可設定具體的 width,?style 和 color.
width?— border的厚度.它可被設為 pixels 或以下關鍵詞:?thin,?medium, thick.
style?— ?border的樣式（實現(xiàn)、虛線之類）。 瀏覽器能渲染不同的樣式. 包括:?none,?dotted, solid, dashed。
color?— ?border的顏色。
上例表示：border 3px寬，實線，coral（珊瑚色）。所有三個屬性都可寫進一行代碼。
默認border屬性是medium none color，color就是當前element的顏色。若其中某一value沒有被寫入CSS文件，則瀏覽器會賦予其默認樣式。
你也可以通過 border-radius?property來修改border的圓角。上例中，四個corner被設為5px。
當你將border-radius的value設為100%時，則創(chuàng)造出一個圓。
Padding
Padding 指的是contents 和 borders 之間的距離，類似于相片和相框之間的間距。
若想精確調節(jié)某一側的padding，可使用以下properties：
padding-top
padding-right
padding-bottom
padding-left
上例表示，該paragraph只有底部會有10px的padding。
Margins
Margin指box之外的距離。上例意味著，其他HTML elements不可以距paragraph’s border 20px以內(nèi)。
若需調整某側margin，可使用以下屬性：
margin-top
margin-right
margin-bottom
margin-left
其余規(guī)則同border。
Auto
Margin property 也可使 content?左右居中。
若需居中 an element, 則必須給其設置一個width的value。否則, auto無效。
Margin Collapse
Horizontal margins (left and right), 和padding一樣 ，實際距離為elements相鄰的margin相加。
而vertical margins 取決于相鄰elements中margin-top或margin-bottom中較大的那個，而非相加。
上例中，horizontal margin=10+10=20px；vertical margin=30px（直接取下面元素的margin-top的value因為它更大） 。
Minimum and Maximum Height and Width
因網(wǎng)頁可能在不同尺寸屏幕上展示，內(nèi)容也會經(jīng)受這種尺寸變化。為避免這個問題，CSS提供4種屬性來限制element’s box的size的極限值。
min-width— this property ensures a minimum width of an element’s box.
max-width— this property ensures a maximum width of an element’s box.
min-height— this property ensures a minimum height for an element’s box.
max-height— this property ensures a maximum height of an element’s box.
Overflow
當 an element ?比 its parent’s containing area 大時，The?overflow property 控制如何顯示超出的部分，它有三個值：
hidden-設置此value后， 超出的部分將會隱藏。
scroll- 設置此value后， a scrollbar will be added to the element’s box 。出現(xiàn)滾動條。
visible- 設置此value后，超出的部分將會展示在?containing element外。這也是默認的value。
The overflow property 一旦被添加到 a parent element中，則其下所有的child elements都將以此方式被瀏覽器渲染。
Resetting Defaults重設默認樣式
當缺少an external stylesheet時，各大瀏覽器都會有一個?default values for padding and margin.。它影響開發(fā)者設計排布樣式。
故在設計之初，人們往往會重設默認值為0。
當value為0時，可以不加px。
此代碼常常作為外部CSS的第一條語句。
Box Model: Border-Box
盒子模型中，the border thickness 和 padding 是被加到整個盒子尺寸中的，這樣不便于對開發(fā)者對盒子尺寸進行整體把控。為消除這種影響，可使用：border-box。
這個代碼固定了所有HTML elements的 height and width of the box，同時?border thickness and padding將被包含在盒子內(nèi)，也就意味著盒子的總體尺寸保持不變。
