盒模型——标准盒模型与怪异盒模型
盒模型是CSS中⼀种重要的思维模型，理解了盒模型才能进⾏更好的页⾯布局。顾名思义，我们把页⾯上所有的元素都看做是⼀个⽣活中常见的盒⼦，它具备内容（content），内边距（padding），边框（border），外边距（margin）四个属性，也就是我们所谓的盒模型。
让我们俯视这个盒⼦，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；
内边距（padding）可以理解为盒⼦⾥装的东西和边框的距离，也可以想象成为了保护盒⼦⾥的东西不被撞坏⽽填充的泡沫材料；边框（border）有厚薄和颜⾊之分，也就是盒⼦本⾝了；内容（content）就是盒⼦中间装的东西，⽐如元素，图⽚，或者是祥礼品盒⼀样⼀层套⼀层的⼩盒⼦。不过与现实中的盒⼦不同的是，现实中的盒⼦不能装⽐它本⾝⼤的东西，会撑坏，但是CSS中的盒⼦是有弹性的，它不会被撑坏，只会被撑⼤；外边距（margin）就是边框外⾯⾃动留出的⼀段空⽩，也可以看做是盒⼦与盒⼦之间不能放得太挤，为了⽅便拿出了留有的空隙。
盒模型分为两种：标准盒模型与怪异盒模型。
标准盒模型（ IE6及其更⾼的版本，还有现在所有标准的浏览器都遵循的是W3C标准盒模型）borderbox
标准盒模型：元素的宽度width=content的宽度，元素的⾼度height=content的⾼度
IE盒模型（IE盒模型是怪异模式（Quirks Mode）下的盒模型，IE6以下版本的浏览器遵循的是IE盒模型。）
)
例⼦：如下图所⽰，div1与div2都是width：100px；height：100px；padding：10px；border：5px；margin：30px；但给div2设置了box-sizing：border-box；所以它遵循IE盒模型。由此可以看出
div1占据的位置为100px+10px*2+5px*2+30px*2=190px；
div2占据的位置为70px+10px*2+5px*2+30px*2=160px；
盒模型的box-sizing属性：
CSS3新增了⼀个属性box-sizing: content-box / border-box / inherit，默认值为content-box。如果值为content-box，那元素遵循的是W3C 盒模型；如果值为border-box，那元素遵循的是IE盒模型；如果值为inherit，该属性的值应该从⽗元素继承。
为了让⽹页能兼容各个浏览器，让⽹页在各种浏览器中都按标准盒模型解析，就要在⽹页顶部增加DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这就是盒模型的基本内容啦~

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