css设置中盒模型的margin详解

了解盒模型。

同时对网页布局有一些了解。

先来4个div，html代码： 

父div的id选择器cont,有三个子div,我们通过css设置不同宽度和颜色，以区别下：

加css代码：#cont{ height:120px; width:600px;background:gray;}#test{height:20px; width:100px;background:yellow;}#test2{height:20px; width:100px;background:red;}#test3{height:20px; width:100px;background:purple;}

我们让子div都左浮动，加上float:left;【注意在标记之间加 

效果如下：

如果在10px后加上20px,这样就变化了，上下是10px,左右是20px,效果tu:

说明了是按上、右、下、左的方式取值。如果缺省没有，就去取相对那边的值。如上例：10 20 30，就只有三个值，左边的没有，取对应右边的值20像素。