CSS2.1SPEC：视觉格式化模型之width属性详解(上)

在介绍了包含块之后，CSS2.1标准中介绍了width属性和height属性，这两个属性在我们的页面布局中也发挥着重要的作用。在盒模型中，width和height包围了一个框的内容区域(content area)， 是否拥有显式的定义、框的类型、框的布局方式、框与其他框之间的关系以及其他的额外信息 都会影响一个框的最终的width和height值，本文首先介绍width属性以及视觉格式化模型中如何决定width值的相关算法。

阅读本文前，应该首先理解CSS包含块的概念，可参考： CSS2.1SPEC：视觉格式化模型之包含块

1 width属性剖析

首先看一下css标准中对于width属性的定义：

1.1 取值

可以看出，width属性有几种不同的取值方式，有几下几种：

(1)宽度值：也就是用CSS长度值来明确地规定一个盒子的宽度，取值单位可以用CSS中支持的长度单位，比如px,em等。

(2)百分比：百分比是根据 包含块的宽度来计算的。但是如果包含块的宽度需要根据包含的内容来决定，那么最终的布局是未定义的，也就是标准中没有明确规定如何计算宽度值。另外，如果盒子是绝对定位的，那么它的百分比长度在计算时是根据包含块的 padding edge的宽度来计算的。

注： 经过试验发现，如果一个元素的宽度为百分比值，而其包含块的宽度又需要根据包含块的内容来决定时，不同的情况以及不同的浏览器都会有完全不相同的结果，因此建议在布局时不要在这种情况下使用百分比定义宽度值。具体规律还需要再进行总结，有研究过的朋友可以分享一下。

(3)auto：根据CSS标准中规定的宽度计算方法来计算，具体的算法下文中将详细介绍

(4)inherit：事实上width属性是不可继承的，很奇怪为什么会有inherit这个选项，实际情况中width属性一般也很少用到inherit值

其中，默认取值为auto

1.2 适用元素

width适用于除了  非置换的行内元素(默认情况下的span,em等元素), 表格行(tr), 表格行组(tbody)元素之外的所有其他元素。比如说，我们为span设置一个width，这个width是不会产生任何效果的，除非把span的display属性修改为inline-block或者block。另外如1.1中提到的，width属性是不能继承的。

2 width,left,right,margin-left,margin-right值的计算问题

2.1 关于几个属性的默认值

在css盒模型中，影响一个框在页面中所占空间大小的属性包括width、height、margin、border、padding，另外left,right,top和bottom值也会在某些条件(position为非static)下影响框在页面中的位置。如果我们为这几个属性定义了明确的值(数值或者百分比)，那么最终的使用值(used value)就是这个明确的值(对于height和width来说，可能还会受max或者min值的影响)。这篇文章只讨论影响元素框在水平方向上的尺寸和位置的属性(width、margin-left、margin-right、padding-left、padding-right、border-left-width、border-right-width、left、right)

对于border-width和padding来说，它们的默认值就是0，而且没有auto值，所以默认情况下，这两个值的取值就为0，另外 margin-left、margin-right 默认情况下的值也是0，但是它们 有auto值 。

但是对于 width、left、right的默认取值为auto，这些属性在默认情况下，就需要css为auto值计算出最终的使用值，而如何计算默认情况下的auto值就是下文将要重点阐述的内容。

2.2几个尺寸和位置属性值的计算方法

首先看一下标准中的阐述：

The values of an element's ’width’, ’margin-left’, ’margin-right’, ’left’ and ’right’ properties as used for layout depend on the type of box generated and on each other. (The value used for layout is sometimes referred to as the used value) In principle, the values used are the same as the computed values, with ’auto’ replaced by some suitable value, and percentages calculated based on the containing block, but there are exceptions. 

也就是说元素所使用的width,margin-left,margin-right,left,right属性会依赖于它们所产生的框的类型以及彼此之间的关系，总的来说，最终的使用值与计算值是相同的：即auto被替换成合适的值，百分比依据包含块进行计算。但是也存在例外，而例外的情况才是重点所在。

另外标准中还特别指出：

Note. The used value of ’width’ calculated below is a tentative value, and may  have to be calculated multiple times, depending on ’min-width’ and ’max-width’, see  the section Minimum and maximum widths below.

 也就是说，通过计算出的width值是一个不确定的值，因为width可能还会受到min-width或者max-width值的影响，本文最后也会对此进行介绍。

注：为了显示效果，本文所有的demo中都为body赋予了10px的margin，10px的padding，以及3px的border

2.2.1 非置换的行内元素

对于非置换的行内元素，margin的auto值将被赋予0，而width属性是不适用的。对于非置换的行内元素来说，它的实际宽度要取决于其包含的实际内容(一般都为文本)，同时还会受到word-break，word-wrap以及white-space属性的影响。这里列举一个例子：

##DEMO 1  行内非置换元素的宽度问题

有如下的一个span：

   
   
   

    
    
    <
    
    
    body
    
    
    >
   
   
   

   
   
   

    
    
    <
    
    
    span
    
    
    >
   
   
   
   
   
   

    
    
        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
   
   
   

   
   
   

    
    
    </
    
    
    span
    
    
    >
   
   
   

   
   
   

    
    
    </
    
    
    body
    
    
    >
   
   
   

我们知道，英文字符来说，如果没有出现空格或者标点符号，那么是不允许换行的，所以我们看到span的宽度为：

可以看到，span的宽度为1736px&#x