重新认识box-sizing

重新认识box-sizing

之前只是知道box-sizing设置成border-box,那么布局的时候，元素的宽高就是我们设置的宽高，省心方便。

今天仔细看了下 box-sizing的定义,有了新的认识

The box-sizing CSS property sets how the total width and height of an element is calculated.

摘自：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

定义很准确：box-sizing决定了元素在屏幕上占的总宽高如何被计算

• 是我们设置的宽高 （border-box）
• 还是要加上 border、padding的宽高 （content-box）

content-box

• 实际占用的屏幕宽高 要加上border、padding
• 内容区的宽高不会被挤压

border-box

• 实际占用屏幕的宽高就是我们设置的宽高，
• 内容区的 宽高会被padding margin 挤压