大多數網頁用的是盒子模型進行布局，所以在乙個網頁製作的過程中最基礎的也正是對盒模型的理解。
首先，要了解盒模型的組成：
乙個盒模型是由margin（外邊距）、border（邊框）、padding（內邊距）、content（內容）組成的，其中真正屬於盒子的是border、padding、content。
接下來，講一下我對它們的理解：
margin：起限制盒子的位置的作用，就好像在乙個房間規定你的盒子離哪面牆距離多遠。
border：控制盒子邊框的厚度的作用，就好像乙個盒子內壁與外壁之間的厚度。
padding：起限制內容位置的作用，就好像在盒子內四周放上填充物，限制了盒子裡所放物體的位置。
content：盒子的內容區域，裡邊放著在網頁上顯示的文字』、圖畫等等。
對於一般盒子模型大小的計算就和現實中盒子大小的計算類似：
例如：給定的盒子margin：20px；border：2px；padding：10px；width： 100px；height：50px；
那麼，盒子的寬=2*2+10*2+100=124px；
盒子的高=2*2+10*2+50=74px。
對盒模型的理解
首先這是我第一次寫部落格，請大家多關照。寫的不好的地方請指出來。下面由我來說下我對盒模型的理解。我呢是乙個剛入門三個禮拜的小白，我自認為學前端跟其他的科目是不一樣的。前端是聽得懂，但自己動手時就不會去做。可能這都是小白的必經之路吧。盒模型是網頁布局的基石，盒模型由盒子內容 盒子內填充 盒子本身 盒子...
對盒模型的理解
盒模型分為兩種，一種是ie盒模型，一種是w3c盒模型。ie盒模型用於ie6一下版本的瀏覽器，它的content的寬度是包括了padding和border的 w3c盒模型 content的寬度不包括padding和border 此外兩種盒模型都包括margin 外邊距 在元素外建立額外的空白，空白通常...
box sizing與盒模型的認識
box sizing屬性 content box default border box。content box，border和padding不計算入width之內 border box，border和padding計算入width之內，其實就是怪異模式了 盒模型一共有兩種模式，一種是 標準模式 st...