標準盒子 與 怪異盒子的模型是一樣的,如下:

在來一套程式:

<style type="text/css">
.box{
width: 200px;
height: 200px;
border: solid red 2px;
margin: 10px;
float: left;
}
</style>

我們通過css來對這塊邊框進行設定大小。這裡的width和height設定 是 兩個盒子的差別之處。

 （1）標準盒子這裡設定的值，表示的是對content區域的大小。而怪異盒子表示的是content+padding+border整體的大小。

 （2）程式中border就是設定途中border模組的粗細，這裡是

 （3）padding和margin可以賦1個至4個值：

 ①1個值，表示四邊都是此距離

 ②2個值，表示上下的大小為第一個引數值，左右的大小為第二個引數值

③3個值，表示第一個引數為上，第二個引數為左右，第三個引數為下

④4個值，每個引數表示一邊大小

（4）float：表示浮動，即該模組浮起來，與基本模組不在一層。浮起來的模組可以遮住底層模組。具體原理看下圖：

如圖一：當所有都是底層模組，則會按順序向下排序。

圖二：把框1浮動放在右邊（float：right），後面的底層模組會不受浮動塊影響，進行前後排序。

圖三，圖四，看圖也很清楚了。

結論：底層模組改變前後位置。浮動模組改變左右位置，不會改變前後位置；