DIV+CSS布局开发的盒子模型

HTML的开发一般都使用div+css，用盒子进行布局，而盒子分为W3C盒子和IE盒子两种具体使用以及区别在下面。

基本属性：

1. margin：布局元素之间的间隙称外边距，例如父元素与子元素之间、兄弟元素之间。注：margin：兄弟元素之间，水平方向间隙margin的值相加，垂直方向间隙margin重叠
2. padding：填充属性又称内边距，元素内容与元素边框之间的距离。
3. border：元素边框，速记（border：宽度 线型 颜色 ）如下：

   div{
    border: 10px solid red;
   }

4. width，height：元素的宽、高度，单位可以是cm、mm、px等。
5. min-width，max-width：最小宽度，最大宽度。
6. min-height，max-height：最小高度，最大高度。
7. background-color：背景颜色。

这些仅仅是一些基本属性，css的属性还有很多，其他的就希望读者自行去使用练习。下面我们看一下两种盒子模型。

W3C盒子模型：

W3C盒子又称content-box、默认盒子、内容盒子，是最常用的盒子也是兼容性更好的盒子相比较于IE盒子。

我们写一个宽高均为200px，边框为10px的红色实线，内外边距都为20px的div

 div{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 20px;
            margin: 20px;
        }

看下面的盒子是我们刚写的content-box，内容大小为200，而盒子的大小则为200（内容）+20*2（padding）+10*2（border）=260，所占屏幕的大小为200（内容）+20*2（padding）+10*2（border）+20*2（margin）=200。

所以W3C盒子的特点就是你所写的宽高均为元素内容的宽高，盒子的宽高则需要加上padding、border、margin等的大小。

IE盒子模型：

IE盒子又称边框盒子和border-box，在浏览器IE6之前是IE所特有的一种布局形式，所以称为IE盒子，下面我们来看一下IE盒子是怎样的。

我们还是写一个宽高均为200px，边框为10px的红色实线，内外边距都为20px的div，注意需要加border-box的样式，W3C不需要加的原因是默认为content-box类型。

div{
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border: 10px solid red;
            padding: 20px;
            margin: 20px;
        }

下面的盒子就是我们刚写的border-box，内容大小为200（盒子）-10*2（border）-20*2（padding）=140，盒子大小为200，所占屏幕的大小为200（盒子）+20*2（margin）=240。

 所以IE盒子的特点就是你所写的元素的大小为盒子的大小，而元素内内容的大小需要减去边框和内边距的大小。

再次，懂了W3C盒子与IE盒子的区别后希望大家在开发的时候注意布局哟，根据需要选择合理的盒子模型。