1.盒子模型本質上是乙個盒子，封裝周圍的html元素，包括：邊距（margin)、邊框(border)、填充(padding)、內容（content)。
2.在設定css元素的高度和寬度時，僅僅只是設定了box模型中content的高度和寬度。
3.盒子模型中元素的實際寬度和高度的計算：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
4.盒子模型的定位
網頁預設的布局方式
文件流指文件中能夠明確顯示物件在排列時所占用的具體方位。文件流不但是盒子模式定位的基礎所在，它也是html中預設的網頁布局模式，在沒有特殊要求的情況下，頁面中的塊狀元素呈現自上而下的動態分布形式，內聯元素則是按照從左到右的方式存在。如果我們想要改動某一漢字或是符號在網頁中的具體方位，只能有一種方式可以選擇，就是通過操作網頁結構中漢字或是符號的先後位置和分布位置來實現自己的目的和想法。
浮動所謂浮動就是讓設定的標籤產生漂浮效果，脫離原來在頁面本應出現的空間位置，不再占用任何文件流空間。元素設定為浮動以後，會生成乙個塊級元素，而不論它本身是何種元素。且要指明乙個寬度，否則它會盡可能地窄；另外當可供浮動的空間小於浮動元素時，它會跑到下一行，直到擁有足夠放下它的空間。
position定位
頁面布局使用最多的是相對定位和絕對定位。
相對定位：這種定位方式下元素不脫離文件流，仍然保持其未定位前的形態並且保留它原來所佔空間。偏移時以自身位置的左上角作為參照物，通過left、top、right和bottom四個方向的屬性來定義偏移的位置。下面通過比較定位前和定位後的兩種狀態來分析相對定位的效果。
絕對定位：這種定位方式下元素將脫離文件流，不佔據空間，文件流中的後續元素將填補它留下的空間。下面通過比較定位前和定位後的兩種狀態來分析絕對定位的效果。
5.瀏覽器的相容性
一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
ie8 及更早ie版本不支援設定填充的寬度和邊框的寬度屬性。
解決ie8及更早版本不相容問題可以在html頁面宣告 即可。
盒子模型 筆記
images cssbase.css layout.css index.css 脫離文件流 寬度不夠會掉下來 行內元素支援寬高 塊元素會根據內容撐開寬高 文字環繞 用到浮動必須清浮動 不要用inline block，用浮動 相對定位 根據自己定位 不會脫離文件流 絕對定位 脫離文件流 根據父級定位 ...
盒子模型筆記
border 1px solid ccc 第乙個表示邊框粗細 第二個表示邊框線型 第三個表示邊框顏色 border width 邊框粗細 border style 邊框線型 border color 邊框顏色 負責兩個盒子之間的距離 margin 10px 上下左右都為10px margin top...
盒子模型（自學筆記）
把網頁元素比如文字等等，放入盒子，然後利用css擺盒子的過程，就是網頁布局 屬性作用 值border width 邊框粗細 畫素值border style 邊框樣式 solid 實線 dashed 虛線 dotted 點線 border color 邊框顏色 red blue等 連寫一般按照以下順序...