box-sizing属性决定了元素的总宽度和高度如何计算。content-box将边框和内填充包含在内，实际尺寸超出设置的宽高；而border-box则按设定的宽高计算，内容区域会受到内填充和边框的影响。理解这一属性对于前端布局至关重要。
重新认识box-sizing
之前只是知道box-sizing设置成border-box,那么布局的时候，元素的宽高就是我们设置的宽高，省心方便。
今天仔细看了下 box-sizing的定义,有了新的认识
The
box-sizingCSS 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 挤压
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
