標準盒子 與 怪異盒子的模型是一樣的,如下:
在來一套程式:
我們通過css來對這塊邊框進行設定大小。這裡的width和height設定 是 兩個盒子的差別之處。
（1）標準盒子這裡設定的值，表示的是對content區域的大小。而怪異盒子表示的是content+padding+border整體的大小。
（2）程式中
border就是設定途中border模組的粗細，這裡是
實線，紅色邊框，2px
（3）padding和margin可以賦1個至4個值：
①1個值，表示四邊都是此距離
②2個值，表示上下的大小為第乙個引數值，左右的大小為第二個引數值
③3個值，表示第乙個引數為上，第二個引數為左右，第三個引數為下
④4個值，每個引數表示一邊大小
（4）float：表示浮動，即該模組浮起來，與基本模組不在一層。浮起來的模組可以遮住底層模組。具體原理看下圖：
如圖一：當所有都是底層模組，則會按順序向下排序。
圖二：把框1浮動放在右邊（float：right），後面的底層模組會不受浮動塊影響，進行前後排序。
圖三，圖四，看圖也很清楚了。
結論：底層模組改變前後位置。浮動模組改變左右位置，不會改變前後位置；
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
CSS標準盒子模型和IE怪異盒子模型
css中的盒子模型 box model 分為兩種 w3c標準盒子模型和ie標準盒子模型。大多數的瀏覽器都採用w3c標準，而ie採用的是ie標準。而怪異模式是指 部分瀏覽器在支援w3c標準的同時還保留了原先的解析模式 怪異模式主要表現在ie核心的瀏覽器中。通過對比來分析標準模式和怪異模式對於塊大小的定...
盒子模型（怪異模型）
css盒子模型 box model 就是在網頁設計中經常用到的css技術所使用的一種思維模型。網頁中所有元素都具備以下四個屬性 上面所說的盒子模型是基於w3c標準的盒子模型，大多數瀏覽器都採用標準盒模型。而還有一種怪異盒子模型，這種怪異模式主要表現在ie核心的瀏覽器 div 在標準模式下 總寬度為1...