CSS网页中的盒子

css盒子模型（也叫框模型）是在网页中常用的css技术所使用的一种思维模型。盒子模型和生活中的盒子很像能装东西是一种容器。它包括属性有：边框（border），内边距（padding），外边距（margin）和内容（content）。

盒子模型的尺寸

标准盒子尺寸计算：

盒子的宽度+内容（content）宽度+左右边框宽度+左右内边距+左右外边距

盒子的高度=内容（content）高度+上下边框宽度+上下内边距+上下外边距

我们在设置内容的大小时还有其他属性可以更巧妙地处理内容大小设置大小约束而不是绝对的大小。这些属性包括min-width，min-height最小宽高。max-width，max-height最大宽高。进行灵活运用。

◆懂得缩写非常重要对编写网页可以减少很多代码量。

◇其中边框有两种比较实用的缩写形式：边框四条边的缩写：border：5px solid red;但是这个简写可以被各种不同书写的更详细的属性所覆盖。比如：指定一条边的缩写：border-top：3px solid red;会优先执行。

◇外边距margin有三种比较实用的缩写形式：margin:3px;同时设置四边外边距，margin:3px 5px;设置上下和左右两边的外边距，margin:3px 3px 3px 3px;设置各个边的外边距，注意：外边距有一个特别的行为被称之为外边距塌陷；当两个框彼此接触时，它们的间距将取两个相邻外边距的最大值，而非两者的总合。外边距还有一个实用的特点就是可以使用负数来调整盒子的位置。

◇内边距padding有三种比较实用的缩写形式：padding:3px;同时设置四边内边距，padding:3px 5px;设置上下和左右两边的内边距，padding:3px 3px 3px 3px;设置各个边的内边距，

IE盒子与W3C盒子的区别

W3C盒子的width=content

IE盒子的width=content+border+padding

W3C盒子的尺寸=width+margin+border+padding

IE盒子的尺寸=width+margin

最终IE盒子和W3C标准盒子的总尺寸是一样的

另外css3的box-sizing属性提供了选择盒子模型的解析方式。W3C盒子方式被称为“content-box”，IE的被称为“border-box”。

box-sizing:content-box              box-sizing:border-box