标准盒子模型与怪异盒子模型的不同 和 浮动的讲解

标准盒子 与 怪异盒子的模型是一样的,如下:

在来一套程序:

<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模块的粗细，这里是实线，红色边框，2px

 （3）padding和margin可以赋1个至4个值：

 ①1个值，表示四边都是此距离

 ②2个值，表示上下的大小为第一个参数值，左右的大小为第二个参数值

③3个值，表示第一个参数为上，第二个参数为左右，第三个参数为下

④4个值，每个参数表示一边大小

（4）float：表示浮动，即该模块浮起来，与基本模块不在一层。浮起来的模块可以遮住底层模块。具体原理看下图：

如图一：当所有都是底层模块，则会按顺序向下排序。

图二：把框1浮动放在右边（float：right），后面的底层模块会不受浮动块影响，进行前后排序。

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

结论：底层模块改变前后位置。浮动模块改变左右位置，不会改变前后位置；