CSS 两种盒模型 box-sizing content-box 和 border-box

文章目录

• • Intro
  • 谨记
  • • [`box-sizing` 两个不同赋值的效果区别？](#box-sizing 两个不同赋值的效果区别？)
    • 宽高的数值计算
    • [标准盒模型 `box-sizing: content-box; `](#标准盒模型 box-sizing: content-box; )
  • [box-sizing 属性的全局设置](#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-sizing https://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 。