CSS框的大小的处理方法

如何在CSS中处理盒子的大小

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

事实证明，这种方法在工作中是相当复杂的。

你可以通过设置box-sizing 属性来改变这种行为。

box-sizing 属性是一个很大的帮助。它有2个值。

• border-box
• content-box

content-box 是默认值，在 成为一个东西之前，我们已经使用了很长时间。box-sizing

border-box 是我们正在寻找的新的和伟大的东西。如果你在一个元素上设置了它。

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

宽度和高度的计算包括padding和border。只有margin被排除在外，这是合理的，因为在我们的头脑中，我们通常也把它看作是一个独立的东西：margin是在框外的。

这个属性是一个很小的变化，但却有很大的影响。CSS技巧甚至宣布了一个国际框选意识日，只是说说而已，建议把它应用于页面上的每个元素，在框外，用这个。

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