文章目录
- Intro
- 谨记
- `box-sizing` 两个不同赋值的效果区别？
- 宽高的数值计算
- 标准盒模型 `box-sizing: content-box; `
- box-sizing 属性的全局设置
Intro
先问一句：box-sizing 和它的两个属性值是做什么用的？以前我并不知道它的存在，也做了很久的前端开发。
答：box-sizing 的两个不同的赋值：content-box(默认值) 和border-box 会影响 如width/height/max-width/min-width/... 等宽高属性的值 究竟落实到盒子box的哪一部分？
是 仅content —— 这是 content-box
还是 content + 两边的padding + 两边的border —— 这是 border-box
下文只重点介绍一个 CSS 属性 的用法：
box-sizinghttps://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing- The box model https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
谨记
box-sizing 两个不同赋值的效果区别？
两种值：
content-box默认值。我们设置的 width/height 等属性设置的是仅content部分的宽高border-box我们设置的 width/height 等属性设置的是 content+border+margin 的宽高
宽高的数值计算
见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
首先，你要回忆一下盒模型的各个部分 (从中间向外围依次是)：
content < padding < border < margin < outline
当对一个用作容器的DOM元素设置了height/width属性之后，再设置box-sizing的值：在content-box 和 border-box 之间切换。
观察这个容器DOM的边界大小：
标准盒模型 box-sizing: content-box;
### 替代盒模型
box-sizing 属性的全局设置
对于新的 web 站点，可以直接对所有DOM元素应用指定的CSS属性值：
* {
box-sizing: border-box;
}
或：
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
如下图：在 <html> 元素上设置 box-sizing 属性，并将所有其他元素设置为继承该值。
见 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model 。
