CSS.box

admin管理员组

文章数量:1794759

CSS.box

前言

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

CSS3 box-sizing 属性 | 菜鸟教程

本文标签： cssbox