CSS | 盒模型的宽度计算规则

前言

以下内容默认以标准盒模型即content-box为标准。

width 属性

width 属性：
在标准盒模型中，width指定了盒的内容宽度（content width）

属性	取值
可选值	指定长 / 百分比 / auto / inherit
默认值	auto
适用元素	除非替换的行内元素，表格行和行组（row group） 外的所有元素
可继承性	否

取值含义：

取值	含义
auto	宽度取决于其它属性的值
指定长度	用具体长度指定内容区宽度，负值非法。
百分比	参照包含块的宽度，以百分比形式指定当前盒宽度。注意：1.如果包含块的宽度取决于该元素宽度，使用百分比布局是未定义的。2.绝对定位元素的百分比参考的是其第一个非static祖先元素的padding box宽度。

详细计算规则

盒模型的总宽度计算中，将涉及元素的属性left, margin, padding, border, width, right，以下将根据不同盒类型和场景进行分类解析：
其中相对定位元素的left与right值的计算规则请参考相对定位下，盒偏移量计算规则

计算值与应用值

下面的表述将涉及计算值与应用值两个概念。
计算值是经过层叠的指定值，直白地说，即初始值，继承值和用户指定值三者中最终参与计算的值。
应用值为实际用于布局时的值。大多数时候，应用值与计算值是相同的，都会根据规则将auto替换成相应合适的值。但下文将遵循文档原文，以“当计算值为XXX，其应用值为XXX”的语句来描述规则。

行内非替换元素

• width属性不适用。行内非替换元素的宽度由实际内容宽度决定。

• 当margin-left/margin-right的计算值为auto时，其应用值为0

 span{
   
            margin: auto
      }

行内替换元素，常规流中的替换inline-block，浮动的替换元素

• 当margin-left或margin-right的计算值为auto时，其应用值为0

• 当height和width计算值都为auto，若该元素具有固有宽度，width的应用值为固有宽度值。

• 当height和width的计算值都为auto，若该元素没有固有宽度，但具有固有高度或指定高度值，且拥有固有比例；则width的应用值 = (高度的应用值) * (固有比例)

• 当height和width的计算值都为auto，若该元素没有固有宽高，则width的应用值是未定义的。

常规流中的块级非替换元素

常规流中的块级非替换元素的宽度计算规则满足以下恒等式：
margin-left + border-left + padding-left+ width + padding-right + border-right + margin-right = 包含块宽度

其中 margin，padding，border的默认值为0

此计算规则与BFC中块级元素“独占一行”的特性相吻合

• 当width不为auto且 border + padding + width < 包含块宽度时，若margin-left/margin-right均有指定值，则margin被过度约束：
  此时，若包含块的direction为ltr，则margin-left的指定值有效，margin-right指定值无效，根据恒等式重新计算该值。若包含块的direction为rtl，则margin-right的指定值有效。
  示例：
  下例中，包含块direction为ltr，margin-left指定值有效。

  .container {
   
            direction: ltr;

            background: orangered;
            width: 200px;
            height: 200px;
            margin: 50px;
        }

        .son {
   
            margin-left: 10px;
            margin-right