1、盒子模型簡述
盒子模型是css布局中最基本組成部分，在頁面上每個元素都以乙個矩形的表現形式存在，每個矩形由元素的內容(content)、內補丁(padding)、邊框(border)和外補丁(margin)組成。乙個元素的盒子模型有多大，那麼該元素在頁面中所佔的空間也將有多大。
盒子模型有兩種，分別是w3c標準盒子模型和ie盒子模型。
標準盒子模型
盒子模型的寬度=margin-left的值+border-left-width的值+padding-left的值+width的值+padding-right的值+border-right-width的值+margin-right的值；
盒子模型的高度=margin-top的值+border-top-width的值+padding-top的值+height的值+padding-bottom的值+border-bottom-width的值+margin-bottom的值；
ie盒子模型
觸發quirks(怪異模式)後的ie瀏覽器的盒子模型的計算方式是將邊框（border）和內補丁（padding）的值歸入盒子模型的寬度（width）及高度（height）中，也就是說盒子模型的總寬度及總高度應該為：
盒子模型的寬度=margin-left的值+width的值+margin-right的值；
盒子模型的高度=margin-top的值+height的值+margin-bottom的值；
2、quirks(怪異模式)和standard(標準模式)
(x)html檔案必須有宣告，預設情況下，chrome、ff與ie的解釋標準不一樣，也就是說如果乙個網頁沒有宣告，它就會以預設的解釋下面的html。
ie瀏覽器有兩種渲染方式：quirks(怪異模式)和standard(標準模式)。
在standard(標準模式)中，瀏覽器根據規範表現頁面；
在quirks(怪異模式)中，頁面以一種比較寬鬆的向後相容的方式呈現。
quirks(怪異模式)通常模擬老式瀏覽器的行為以防止老站點無法工作。
因此，學習網頁標準、瀏覽器相容、認識標籤很有必要的。
3、doctype文件型別
定義和用法
宣告必須是 html 文件的第一行，位於 標籤之前。
宣告不是 html 標籤；它是指示 web 瀏覽器關於頁面使用哪個 html 版本進行編寫的指令。
在 html 4.01 中， 宣告引用 dtd，因為 html 4.01 基於 sgml。dtd 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
html5 不基於 sgml，所以不需要引用 dtd。
html 4.01 中有三種 宣告，即strict（嚴格型別）、transitional（過渡型別）和frameset（框架型別）。
html5 中只有一種：
參考 w3cschool api 文件參考 《css那些事兒》
盒子模型及浮動
效果圖 效果圖 有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動布局。浮動可以讓多個塊元素一行排列顯示。網頁布局第一準則 多個塊級元素縱向排列找標準流，多個元素橫向排列找浮動 浮動特性一 浮動的元素會脫離標準流 脫標 浮動的元素會一行內顯示並且元素頂部對齊的。浮動的元素會具有行內塊元素的特性...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...