CSS自减盒子的弊端

一.自减盒子的取值

box-sizing属性有两个可选值：

1. content-box（默认值）：默认的盒模型。元素的宽度和高度仅包括内容区域，不包括内边距、边框和外边距。在计算尺寸时，内边距和边框会增加元素的实际尺寸。

2. border-box：元素的宽度和高度包括内容区域、内边距和边框。在计算尺寸时，内边距和边框不会增加元素的实际尺寸，它们会从内容区域中减去。

示例用法：

---

---

二.自减盒子的弊端:

    1. 布局不一致性：由于border-box考虑内边距和边框在内，这在设置相对定位或定位上下文时可能会导致布局不一致。尺寸计算的不一致性可能使得元素的位置和布局出现预料之外的变化，导致困惑和难以维护的布局。

      html结构:

        

       css样式:

     结果:导致各分一半的盒子变小,元素之间的布局发生变化

---

     2.盒模型混淆：使用border-box盒模型时，为元素指定的尺寸（包括宽度和高度）将包括内边距和边框。这可能导致在处理复杂布局时难以准确计算和控制元素的尺寸，特别是在嵌套和相对定位的元素时。

      html结构:

 

     css样式: 

 

 

---

     3.当在使用box-sizing: border-box盒模型时，在悬停状态下添加边框可能会导致盒子抖动

   html结构:

  css样式: 

 

解决代码:

 

☆问题出险的根本原因 : 由于边框会从总宽度中减去，当我们悬停在盒子上时，边框的出现将会导致盒子的总尺寸增加1px，从而导致盒子的抖动效果。这是因为在悬停状态下，从无边框到有边框的变化会影响盒子的尺寸

☆解决办法 : 提前添加同样的透明边框 (所以悬停之后盒子并未撑大则不会抖动)