DIV CSS盒子模型浅谈

最近几天用简单的css加上div做一些简单的网页，打代码都打的做梦都是在排版布局了。有了这几天的学习，自己也有了一些简单的认识，那就说说吧。

先说说自己理解的什么是盒子，首先我们要知道这样几个属性，内容(content)、填充(padding)、边框(border)、边界(margin)，直接上图看看



这就是一个盒子，我们在网页用css加div排版的时候就是用这样的盒子来完成的，这样的盒子可以把网页分为一个一个的板块，对一个板块里的元素做单一的调整，就不会牵一发而动全身，利用盒子的嵌套又可以在管理自己的时候不脱离整体，网页布局瞬间就变的简单了。在上一个图让大家理解一下。



是不是有更深入的了解了，我们接下来在看看一个为什么要用div加css盒子来排版网页。据说当年都是用的table来做网页，这个我也没有经历过，不知道，但是table有个很麻烦的东西就是，你改变一个格子里的内容，其他格子的也会变化，你用table嵌套table这样真的可以说是牵一发而动全身了，在加上现在网页内容的可变性和js的神奇之处，用table不是找死吗，用盒子像搭积木一样一块一块的安装好不是很好吗。

我们在来看看div和css盒子的结构与表现分离，div定义结构的语义化，比如我要第一几个网页的一些部分，就可以写成这样：

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>

是不是一目了然，如果我想让这些盒子有一个宽度还有居中，我就可以直接用css对body设置，而不用一个一个的对他们设置，我们在来看一个列子：

<style type="text/css">
<!--
#photoList img{
　　height:80;
　　width:100;
　　margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>

===============================================================

<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05.jpg" width="100" height="80" align="middle" />

上面的两种方法都可以实现对图片的控制，很明显第一中看着爽，这就是结构和表现分离，div定义结构语义化，css给盒子加上属性，这样的方法又好写又语义化，看着也舒服。

在说说盒子的两种模型，盒子的模型有两种，一种是标准的w3c盒子模型，一种是IE盒子模型（说IE就不爽，这个垃圾）我们先看看标准的盒子模型吧。



这个图可以看出w3c的模型包涵那些，我上面都说了的。

现在看看IE这个大杀器的模型吧。



从上两图可以看出，IE盒子模型中的content还包括了padding和border。现在我问一个问题，你会选择用那个模型，想都不用想都是w3c的标准模型，但是你选择了就要告诉浏览器，所以要加上DOCTYPE声明，加了这个声明，浏览器就知道了你用的是w3c的盒子模型了，要是你不声明的话，其他的浏览器基本都会认为你用的是w3c的模型，但是IE这东西就会认为你的是IE盒子模型（这垃圾东西），那样你的页面就会出现各种扭曲变形，让你崩溃不止，所以，抵制IE从我做起。