CSS盒子模型



    今天来给大家详细剖析一下盒子模型。

 

    盒子的构成：内容(content)、填充(padding)、边框(border)、边界(margin)。

    盒子模型既然说是盒子模型，那么可以猜到这个模型来源于生活中的盒子。

   假设你想送别人一个水晶娃娃。那么你肯定会把娃娃精美的包装起来，又因为娃娃是水晶的，很怕摔坏，所以在包装的时候就要在里面添加一些防震的东西，向泡沫，或者布条啦。

    如果把整个包装好的礼物用盒子模型来解释的话：

    内容：就是水晶娃娃。

    Padding：里面填充的防震东西。

    Border：就是整个的盒子了，盒子有厚度属性。

    Margin:假设别人，也送了一个盒子礼物，主人将两个礼物放在一起，一个礼物与另外一个礼物之间的距离，就用 Margin描述。

盒子模型有了两种：ＩＥ盒子模型和标准盒子模型

区别就在于设置一个块级元素时的width和height属性从图中可以看出来。

     那么有两个盒子模型，我们用那个啊？当然是使用标准的盒子模型了---------标准 W3C 盒子模型

     如何使用那？就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

在网页设计中

每个HTML属性都可以看做一个盒子。

内填充与边界的规则：

如果有四个参数：表示上右下左,也可以单单指定某个方向

如果只有一个参数：表示上右下左

如果有两个参数： 第一个参数表示上下 第二个参数表示左右

如果三个参数：表示上 左右 下

举个例子：

对于盒子嵌套盒子的问题，内部的盒子是以外部盒子的Content为标准的，从content的地方开始算内部盒子的margin.

如果在嵌套盒子里一个自盒子Float：right。那么这个盒子没有脱离父盒子的控制。

子DIV没有浮动之前的父ＤＩＶ的content。

这个是子ＤＩＶ左右浮动之后

Float1,2的margin是从父DIV输入father之后的下边线为基准的。但是这时候父DIV只是给他们一个基准，当其左右浮动之后的content已不再包含他们。

对于并排的盒子是从两个盒子的margin开始计算的

下一篇接着讲解