DIV+CSS布局开发的盒⼦模型
HTML的开发⼀般都使⽤div+css，⽤盒⼦进⾏布局，⽽盒⼦分为W3C盒⼦和IE盒⼦两种具体使⽤以及区别在下⾯。
基本属性：
padding是外边距还是内边距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盒⼦的区别后希望⼤家在开发的时候注意布局哟，根据需要选择合理的盒⼦
模型。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。