前言
css中width属性经常用,但这个属性本来就含义不清楚,如果没有边框和填充当然没问题,如果设置了,再不明白box-sizing样式就容易出问题。搜了几篇文章,讲的各种糊涂。
下面请你看完,你才能明白box-sizing属性的设计最初思想, 一次性搞懂再也不管了。
实际场景
物流体积计算冲突
想一个场景:物流按照体积计费,那这个宽高按照啥计费呢?如下图:如果按照外边计费消费者亏了,如果按照里边计费,物流商占不到便宜。
差距在哪呢:纸箱子的厚度和里边填充的泡沫的厚度
运输的两种场景
- 集装箱场景:集装箱就那么大,里边放啥我不管
- 包装设备场景:设备生成出来就那么大,得需要按照设备大小,设计外边的泡沫厚度和箱子的厚度,至于最终你看到的箱子大小那无所谓了
总结概念
- 宽度:width,太泛,如果不指定上面那种场景,width也不清楚是啥,但无非是实物设备的宽度,或者集装箱的宽度
- 实物宽度:这个东西能占用的宽度,不包含泡沫和箱子的,就是这个容易能放东西的体积宽度
- 包装宽度:东西包装后,外边看起来包括箱子的体积的宽度
- 填充厚度:padding(内边距),泡沫的厚度
- 纸箱子厚度:border,有的用那种木架子包裹,厚度能达到几厘米,当然不能忽略不计
- 公式:包装宽度 = 实物宽度 + 左右填充的宽度 + 左右箱子的厚度
- 使用场景抽象:box-sizing,箱子大小模式
- 集装箱模式:border-box 边框固定, 集装箱里边填充多少泡沫都算运输的内容
- 包装设备模式:content-box内容固定,设备大小固定了,是填充泡沫还是用木架子运输是你的事,反正东西不能坏
box-sizing模式
既然width意思不确定,跟运输的两种模式有关系,那么就设置这么一个选型。box-sizing 箱子大小模型,取值两个:集装箱场景对应border-box,包装设备场景对应content-box
content-box
width就是实物宽度,如txtbox,width=100px,实际内容占用的就是100px宽度,但实际咱们看到整个宽度是:包装宽度=width(实物宽度)+padding厚度+border厚度=100+(20+30)+10*2=170
border-box
width是包装宽度100px,箱子宽度是10px*2,padding填充的宽度是20 px +30px,这么算下来:实物宽度=包装宽度-箱子宽度-填充的宽度=100-10*2-(20+30)=40px,也就是说你不能放超过40px的东西,否则你放不下。
width含义
box-sizing:content-box时,width标识实物宽度
box-sizing:border-box时,width标识包装宽度
box-sizing不写该属性,默认content-box
使用场景
- 如果给你的空间跟集装箱一样固定,那就用border-box模式
- 如果里边装的内容长度固定,就用content-box模式
- 看英文含义:border-box,边框宽度固定模式;content-box,内容宽度固定模式,这句话一定得在明白上面的过程后再看,老外命名不是糊命名的。
修正Padding理解
padding理解为填充更形象,内边距只是国人自己理念后造的概念,已经失去一定含义了,说内边距也对,但太抽象,并且失去实际生活中填充的泡沫的含义。这就是看英文原版和中文翻译的区别,一些人自以为自己很牛逼,就喜欢造新词,就跟沟通模型一样,新造个词跟padding映射,自然会损失一些信息。
参考
css-布局- box-sizing 的含义及作用_sj206327327206的博客-CSDN博客_box-sizing