CSS Box大小

如何在CSS中使用框大小

浏览器在计算元素宽度时的默认行为是将计算出的宽度和高度应用于内容区，而不考虑任何填充，边框和边距。

实践证明，这种方法非常复杂。

您可以通过设置box-sizing财产。

这box-sizing财产是一个很大的帮助。它具有2个值：

content-box是默认设置，是我们之前使用的默认设置box-sizing成为一件事。

border-box是我们正在寻找的新事物和伟大的事物。如果您将其设置在元素上：

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

宽度和高度的计算包括填充和边框。仅保留了边距，这是合理的，因为在我们看来，我们通常也将其视为单独的内容：边距不在框内。

此属性变化不大，但影响很大。 CSS技巧甚至声明了国际包装大小认识日，只是说一句，建议使用以下方法将其应用于页面上的每个元素：

*, *:before, *:after {
  box-sizing: border-box;
}

免费下载我的CSS手册