盒子模型的屬性
邊框內邊距
外邊距盒子模型的計算
盒子模型的應用
在網頁中，元素可以產生乙個矩形的框，這些框會影響元素之間的距離、元素內容的距離等，就像小時候做板報，從多張報紙剪取所需的內容塊，再重新排列組成一張新的板報。同樣，網頁設計的時候也將這些框重新進行排列，達到我們所需要的網頁效果。
生活中的盒子，我們都用來存放相應的物品，例如我們的紙盒、包裝盒等，同時在盒子裡面也可以存放其他的盒子。生活中我們通常用寬度、高度、厚度來表述乙個盒子，而邊框又可以從粗細、形狀和顏色等方面進行描述；盒子和盒子之間的距離我們用間距來表示，盒子和盒子內容之間的距離我們稱之為對應方向的填充。
網頁中的盒子和生活中的盒子其實是類似的，網頁中的盒子模型用來存放網頁中的各個元素。我們網頁設計中的像文字、等內容，都可以看作乙個個盒子，這些盒子也可以巢狀進入乙個div元素方便管理。這些盒子通過巢狀、疊加或者排列等方式組織在一起，形成我們所需要的乙個頁面。
假如我們要寄兩套杯子，為了防碎，我們分別在杯子的外層包裹上一層泡沫，然後把包裹泡沫的杯子分別放在兩個盒子裡，同時再把這兩個盒子放進乙個大盒子裡面，把它寄出。
這裡所說的杯子，就是我們網頁設計中所說的內容。內容通常用高度和寬度來表示；而包裹的泡沫在網頁中稱為內邊距或填充，用padding來表示；盒子厚度則對應網頁中的邊框，用border來表示；這兩套杯子之間的距離在網頁中的盒子模型裡使用外邊距，也就是margin來表示。
width：長度值 | 百分比 | auto
max-width（最大寬度）：長度值 | 百分比 | auto
min-width（最小寬度）：長度值 | 百分比 | auto
注意：
百分比是該元素相對于父元素的百分比，下同。
如果同時設定了max-width和min-width，且前者小於後者，則前者的值會轉換成後者的值並且顯示的就是min-width的值，下同。
最值寬度有相容性問題，ie6下是不相容這個屬性的，下同。
height：長度值 | 百分比 | auto
max-height（最大高度）：長度值 | 百分比 | auto
min-height（最小高度）：長度值 | 百分比 | auto
說明：設定塊級元素和和替換元素的內容高度。
屬性名描述
dotted
定義點線邊框
dashed
定義虛線邊框
solid
定義實線邊框
double
定義兩個邊框，兩個邊框的寬度和 border-width 的值相等
groove
定義3d凹邊框，效果取決於邊框的顏色值
ridge
定義3d凸邊框，效果取決於邊框的顏色值
inset
定義3d嵌入邊框，效果取決於邊框的顏色值
outset
定義3d突出邊框，效果取決於邊框的顏色值
上面所說的都是對整個邊框進行修改，如果想要單獨修改某一條邊的屬性，則可表示為border-left/right/top/bottom-width/color/style
padding-left：長度值 | 百分比
padding-right：長度值 | 百分比
padding-top：長度值 | 百分比
padding-bottom：長度值 | 百分比
說明：值不能為負值
padding的縮寫形式有下：
padding：value1；//四個方向內邊距都為value1
padding：value1 value2；//上下內邊距為value1，左右內邊距為value2
padding：value1 value2 value3；//上內邊距為value1，左右內邊距為value2，下內邊距為value3
padding：value1 value2 value3 value4；//上右下左內邊距依次為value1 value2 value3 value4（以上方為起點的順時針方向）
margin-left：長度值 | 百分比 | auto
margin-right：長度值 | 百分比 | auto
margin-top：長度值 | 百分比 | auto
margin-bottom：長度值 | 百分比 | auto
說明：值可以為負值
margin的縮寫形式有下：
margin：value1；//四個方向外邊距都為value1
margin：value1 value2；//上下外邊距為value1，左右外邊距為value2
margin：value1 value2 value3；//上外邊距為value1，左右外邊距為value2，下外邊距為value3
margin：value1 value2 value3 value4；//上右下左外邊距依次為value1 value2 value3 value4（以上方為起點的順時針方向）
注意：預設情況下，相應html塊級元素存在外邊距：body、h1~h6、p等。
宣告margin屬性，覆蓋預設樣式body,h1,h2,h3,h4,h5,h6,p設定margin值為auto時，會實現水平方向居中顯示，此時由瀏覽器計算margin的值。
在垂直方向上的兩個相鄰盒子同時設定了margin，會合併為較大的那乙個margin。
width和height的物件是content（內容）
盒子在頁面中所佔的寬度是由左邊距+左邊框+左填充+內容寬度+右填充+右邊框+右邊距組成
盒子在頁面中所佔的高度是由上邊距+上邊框+上填充+內容高度+下填充+下邊框+下邊距組成
width和height的物件是content+padding+border（內容+內邊距+邊框）
注意：為文件型別宣告
如果沒有doctype文件型別宣告，各瀏覽器按照自己的方式解析。
如果有doctype文件型別宣告，按照標準盒子模型來解析。
屬性名描述
inline
元素將顯示為內聯元素，元素前後沒有換行符
block
元素將顯示為塊級元素，元素前後會帶有換行符
inline-block
行內塊元素，元素呈現為inline，具有block相應特性
none
此元素不會被顯示
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...