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盒子設(shè)為包裹住全部raw content。
像素(pixels)讓你可以精確調(diào)節(jié)box的尺寸?(width and height)骆姐。當elements被設(shè)為以像素為單位時镜粤，在所有設(shè)備上其尺寸都是一致的——這也意味著在筆記本屏幕上合適的大小，在手機屏幕上可能會溢出（overflow ）诲锹。
Borders
Borders 就是環(huán)繞在 element 周圍的線，類似于一幅畫的相框涉馅。Borders 可設(shè)定具體的 width,?style 和 color.
width?— border的厚度.它可被設(shè)為 pixels 或以下關(guān)鍵詞:?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被設(shè)為5px。
當你將border-radius的value設(shè)為100%時缕碎，則創(chuàng)造出一個圓褥影。
Padding
Padding 指的是contents 和 borders 之間的距離，類似于相片和相框之間的間距咏雌。
若想精確調(diào)節(jié)某一側(cè)的padding凡怎，可使用以下properties：
padding-top
padding-right
padding-bottom
padding-left
上例表示，該paragraph只有底部會有10px的padding赊抖。
Margins
Margin指box之外的距離。上例意味著注暗，其他HTML elements不可以距paragraph’s border 20px以內(nèi)坛缕。
若需調(diào)整某側(cè)margin，可使用以下屬性：
margin-top
margin-right
margin-bottom
margin-left
其余規(guī)則同border捆昏。
Auto
Margin property 也可使 content?左右居中赚楚。
若需居中 an element, 則必須給其設(shè)置一個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-設(shè)置此value后， 超出的部分將會隱藏粘捎。
scroll- 設(shè)置此value后薇缅， a scrollbar will be added to the element’s box 。出現(xiàn)滾動條晌端。
visible- 設(shè)置此value后捅暴，超出的部分將會展示在?containing element外。這也是默認的value咧纠。
The overflow property 一旦被添加到 a parent element中蓬痒，則其下所有的child elements都將以此方式被瀏覽器渲染。
Resetting Defaults重設(shè)默認樣式
當缺少an external stylesheet時漆羔，各大瀏覽器都會有一個?default values for padding and margin.梧奢。它影響開發(fā)者設(shè)計排布樣式。
故在設(shè)計之初演痒，人們往往會重設(shè)默認值為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)，也就意味著盒子的總體尺寸保持不變千扔。
