1.盒模型的基本概念根据MDN的描述，在对文档进行布局时，浏览器的渲染引擎会遵循其中的一个标准CSS基本盒模型（CSSbasicboxmodel），将所有元素表示为一个矩形盒（box）。1.一个框的组成图1*contentarea（内容区域），大小是contentwidth（或content-boxwidth），contentheight（或content-boxheight）。这个概念是区分标准盒模型和IE盒模型的关键。*padding区域，大小为padding-boxwidth和_padding-boxheight_。*边框区域，尺寸为边框框宽度和_边框框高度_。*边距区域，尺寸为边距框宽度和_边距框高度_；由于框之间共享边距，边距不容易计算(BFC)。对于行内元素，如果设置了padding和border，占用的空间由line-height属性决定，即使padding和border也会在内容周围显示；此时，width和height设置为无效，只有margin-left和margin-right对外边距有效。如图2span{width:50px;高度：50px；背景色：#ffa238；填充：10px；边界半径：10px；边框：2px实心#000；边距：10px；}图22，标准框模型图3浏览器默认设置，box-sizing:content-box，顾名思义，内容框，内容的宽高就是框的宽高，不包括填充和边框。（个人不使用此模型，当设置元素宽高为100%时，如果元素还包含padding和border，会溢出。）3.IE盒模型（怪异模式）图4元素css设置box-sizing：border-box，顾名思义，宽度和高度以border为界，盒子的宽度和高度包括padding和border。（经常使用）
