文章目录
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属性值:
css
* {
box-sizing: border-box;
}
或:
css
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 。