怎么样才能简单明了理解W3C中CSS盒模型

1、现今网页编写程序就是通过由css定义的不同大小的盒子和盒子嵌套完成的。

2、我们先来认识一下，盒子的结构，中间content，内容，padding，填充，border，边框，margin，边界

3、然后，盒子的宽度，由左边界（也称为：外边距，外补丁）+左边框+左填充（内边距，内补丁）+内容+右填充+右边框+右边界组成

4、通俗的理解，可以这样认为，css盒子相当于日常生活中的盒子，从上面往下看，边框相当于盒子的厚度，内容就是我们要存放的东西，填充，保护里面东西的泡沫或者是塑料，边界呢，可以认为是盒子周围留空的空间，是不是这样就很容易理解盒模型了。

5、为什么说，我们web前端开发，需要用到这种盒子模型呢，原因在于这种排版方式的网页代码简洁，表现和内容相分离，维护起来很方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

6、举个简单的例子，我们在平常使用的DW中，新建一个css，定义一个css规则，宽500，高400，左浮动，背景绿色的简单演示