[分享]css3怪异盒模型

在我们学习CSS布局的时候，经常会提到“盒模型”，而CSS3中的“怪异盒模型”（boxsizing）更是成为了前端工程师必须掌握的知识点之一。所谓怪异盒模型，它主要是指在计算一个元素的总宽度时，它的元...

在我们学习CSS布局的时候，经常会提到“盒模型”，而CSS3中的“怪异盒模型”（box-sizing）更是成为了前端工程师必须掌握的知识点之一。

所谓怪异盒模型，它主要是指在计算一个元素的总宽度时，它的元素框所包含的内容区域（content-box）是否包括了padding和border。

在标准盒模型中，一个元素的总宽度 = content + padding + border + margin。如下所示的代码：

 .box {
    width: 200px;
    padding: 20px;
    border: 1px solid #000;
    margin: 20px;
  } 

在标准盒模型下，这个.box元素的总宽度应该为：200 + 20 * 2 + 1 * 2 + 20 * 2 = 283px。

而在怪异盒模型中，元素的总宽度（也就是盒模型的宽度）不包括padding和border，就是只计算content的宽度。只需在CSS中添加如下代码：

 .box {
    box-sizing: border-box;
  } 

此时.box元素的总宽度就是它的content宽度 + padding + border + margin。如上面的例子，这个.box元素在怪异盒模型下的总宽度应该是200px。

在实际开发中，使用怪异盒模型有一些好处。比如我们可以更方便地对某一个元素进行宽度的设定，而不需要手动计算padding和border的宽度。同时，当我们在设计响应式布局时，使用怪异盒模型能够更好地控制元素的尺寸和位置，从而更好地适应不同屏幕的设备。

当然，如果你在开发过程中使用了怪异盒模型，还需要注意一些其它方面的问题。例如，在做布局时需要特别注意在添加padding和border后，元素的实际大小是否与预期一致。

总之，怪异盒模型对于Web前端工程师来说是一个重要的知识点，学习它能够让我们更好地掌握CSS布局，从而更好地开发出各种精美的页面和应用。