【快速入门系列】CSS盒模型基础

最终渲染效果如下：W3Cboxmodel各部分取值：3.IEboxmodelIE8和belowbrowsers默认使用IE盒子模型。IE盒子模型也被称为“怪盒模型”。在这个标准下，我们在盒模型中定义元素的宽度值为border-left+padding-left+content的宽度值+padding-right+border-right的总和，高度值就是border的高度值-top+padding-top+boxmodel中的content+padding-bottom+border-bottom之和元素占用的宽度=margin-left+width+margin-right元素占用的高度=margin-top+height+margin-bottom上面同样的代码在IE盒子模型下会有如下效果：4.box-sizing下面是MDN对box-sizing属性的描述：box-sizing属性可以用来调整这些行为：content-盒子是默认的。如果将元素的宽度设置为100px，则元素的内容区域将为100px宽，所有边框和填充的宽度将添加到最终绘制的元素宽度中。border-box告诉浏览器理解你设置的border和padding值包含在width中。也就是说，如果你将一个元素的宽度设置为100px，那么这100px会包含其他的borders和padding，内容区域的实际宽度就是width减去border+padding的计算值。在大多数情况下，这使得设置元素的宽度和高度变得更加容易。我们可以简单理解为当box-sizing为content-box时，我们使用的是W3C盒模型，当box-sizing为border-box时，我们使用的是IE盒模型。更多关于box-sizing属性的使用，可以看这里：box-sizing|MDN结语盒模型概念在实战或者面试中是非常重要的基础知识点，需要掌握。本文是关于box模型的基本概念介绍，希望对您有所帮助。