1、概述
html任何乙個元素都可以看作乙個盒子，這個盒子不可見，但是它存在於頁面的每個角落，也正是由於它不可見、不直觀，很多人在初學css的時候不能透徹得理解盒模型的概念，導致在頁面布局**現各種各樣的問題。
乙個盒子包括了content（實際內容）、border（邊框）、padding（內邊距）和margin（外邊距）。
2、content
盒子的內容，顯示文字和影象。我們給元素設定的width和height其實是content的寬高，如果指定高度大於顯示內容所需高度，多餘的高度會產生類似內邊距一樣的效果；如果指定高度小於顯示內容所需高度，會出現滾動條。如果元素內容的高度（手動設定content的height時）大於元素邊框的高度，瀏覽器的具體行為取決於overflow屬性。
3、border
元素的邊框是圍繞元素內容的內邊距的一條或多條線。邊框由粗細、樣式和顏色三部分組成，如border:1px solid red。
4、padding
content到border之間的空白區域，內邊距是透明的，取值不能為負，受盒子的background屬性影響，padding是有背景的。
5、margin
在元素外建立額外的空白區域，可理解成元素與元素的間距，這個空白區域通常指不能放其他元素的區域（可用定位的方式在這個空白區域中放元素），而且在這個區域中可以看到父元素的背景（padding能看到本元素的背景）。margin經常取負值實現定位的作用。
外邊距問題：
1.相鄰兄弟元素外邊距合併問題：當兩個垂直外邊距相遇時，它們將進行合併最後形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
對於水平相鄰的元素，它們的水平間距是相鄰外邊距之和。
2.父子元素外邊距合併問題：當乙個父元素沒有border、padding，且子元素有margin-top時，子元素的margin-top會成為父元素的margin-top，除非為父元素新增border-top或padding-top
margin雖不可見，但是它確實在文件中佔據了空間，我們要區分兩個概念即：盒子所佔空間(計入margin)和盒子實際的大小(不計入margin)。
6、兩種盒子模型
盒模型有兩種，分別是ie盒子模型（ie6以下版本瀏覽器)和標準w3c盒子模型，區別在於前者content的寬度和高度包括了border和padding。
css3中，可用box-sizing屬性為元素設定盒模型。
box-sizing有三個取值：
1.content-box:使元素遵循標準 w3c 盒子模型（預設值）。
元素的實際寬度=width+(padding-left)+(padding-right)+(border-left)+(border-right)
元素的實際高度=height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)
元素所佔空間寬度=元素實際寬度+(margin-left)+(margin-right)
元素所佔空間高度=元素實際高度+(margin-top)+(margin-bottom)
在顯式設定了width和height的前提下，padding和border的設定會加大盒子的寬高
2.border-box:使元素遵循ie 盒子模型。
元素的實際寬度=width
元素的實際高度=height
元素所佔空間寬度=元素實際寬度+(margin-left)+(margin-right)
元素所佔空間高度=元素實際高度+(margin-top)+(margin-bottom)
元素內容的寬度=width-(padding-left)-(padding-right)-(border-left)-(border-right)
元素內容的高度=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)
在顯式設定了width和height的前提下，padding和border值的設定會減少元素內容的寬高
不管如何設定padding和border（小於width/2），它只在盒子裡面伸縮，不影響整體的寬高，但它會影響content，如果padding和border太大，會把內容擠掉。
3.inherit:規定應從父元素繼承 box-sizing 屬性的值。
注意：行內元素的寬高始終為元素內容的寬高
width/height、margin是可以設定為auto的，那麼這個auto到底是多大呢？
假設padding和border為0，以width、margin-left、margin-right為例進行說明。
這3個值加起來往往是父級元素的width值。
如果任意乙個為auto，另外2個未固定值，那麼這個auto=父元素width-兩個固定值之和
如果設定margin-left，width為auto，margin-right為固定值，width=父元素width-子元素margin-right margin-left為0
如果設定width，margin-right為auto，margin-left為固定值，width=父元素width-子元素margin-left margin-right為0
如果設定margin-left，margin-right為auto，width為固定值，auto=(父元素width-子元素width)/2 表示將元素居中
如果這3個屬性都設定為auto，子元素的width=父元素width，margin-left、margin-right為0
總結：只有margin-left和margin-right同時為auto且width為固定值時，margin的auto才有意義，否則margin的auto都為0
7、兩種盒子模型寬高計算示例
假設乙個盒子的 margin 為 20px，border 為 2px，padding 為 10px，content 的寬為 200px、高為 50px。
當box-sizing為content-box時：
元素的實際寬高:200+10*2+2*2=224,50+10*2+2*2=74
元素所佔空間寬高：224+20*2=264,74+20*2=114
當box-sizing為border-box時：
元素的實際寬高:200,50
元素所佔空間寬高：200+20*2=240,50+20*2=90
元素內容寬高：200-10*2-2*2=176,50-10*2-2*2=26
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...