10.3 计算宽度和margin - acelan86/css GitHub Wiki

10.3.1 行内，不可被重放置元素

width属性不适用。如果margin-left和margin-right计算值为'auto'，其使用值为0

10.3.2 行内，可被重放置元素

如果margin-left和margin-right计算值为'auto'，其使用值为0。

如果height和width的计算值都为'auto'，并且该元素有固有宽度，指定使用值为固有宽度。 如果height和width的计算值都为'auto'，如果该元素没有固有宽度，但是有固有高度和固有比例；或者width值为'auto'，height有其它计算值，并且该元素有固有比例；宽度的使用值为： （使用高度） * （固有比例）

10.3.3 正常流中的块级，不可被重放置元素

使用值之间必须满足一下约束：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

如果width不为'auto'并且'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width'大于包含块宽度，margin-left和margin-right的'auto'值在上述等式中作为0值计算。 如果上面各属性计算值都不为'auto'，称之为过度约束。其中一个使用值将与其计算值不同。如果包含块的direction属性值为ltr，指定的margin-right值被忽略以满足上面等式。如果direction属性值为rtl，margin-left值被忽略。

如果只有一个值为'auto'，它的使用值满足上述等式。

如果width设置为'auto'，其它'auto'值作为0处理，width满足上述等式。

如果margin-left和margin-right值都为auto，它们的使用值相等，该元素在包含块中水平居中。

译者注：margin padding border属性都不能继承，如果没有指定值就取初始值，margin padding 初始值为0。border各个初始值不同，各borde-color初始值取color，各border-width初始值取medium，各border-style初始值为none，详见第八章盒模型。块级非替换元素width-margin计算例子 ---by fedeoo

10.3.4 正常流中的块级，可被重放置元素

width的使用值取值规则按照行内替换元素指定的操作。margin计算按照上述规则。

10.3.5 浮动，非替换元素

如果margin-left或margin-right计算值为auto,它们的使用值为0。如果width计算值为auto，其使用值是shrink-to-fit值。shrink-to-fit值的计算方法与自动表格布局中单元格的宽度计算方法类似。 大致为：

计算格式化内容时除了发生明确的换行外不发生换行的时首选宽度（preferred width），以及首选最小宽度（preferred minimum width），比如，尝试所有可能的换行。而 CSS2.1 没有定义精确的算法。

其次，在这种情况下，找出可用宽度（available width），这个宽度为包含块减去 'margin-left'、'border-left-width'、'padding-left'、'padding-right'、'border-right-width'、'margin-right'以及所有相关滚动条的宽度。 综上所述：

shrink-to-fit 的宽度 = min ( max (首选最小宽度, 可用宽度) , 首选宽度)

10.3.6 浮动，可被重放置元素

如果margin-left或margin-right计算值为auto,它们的使用值为0。width使用值按照inline替换元素规则计算。

10.3.7 绝对定位，非替换元素

为了说明这节和下节内容，引入术语静态位置：元素在正常流中的位置。准确的说：

1. 静态位置包含块是一个假想盒的包含块。假定元素的position值为static，float为none

元素的属性值满足下式： left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

如果left width right都为auto，首先设置margin-left和margin-right的auto值为0。如果包含块的direction属性值为ltr，设置静态位置为left,使用下面的规则3。否则，diirection值为rtl，设置为right,使用下面规则1。

如果这三个值都不是auto:如果margin-left和margin-right是auto，计算等式时添加两个margin相等的额外约束条件。 如果得到margin值为负数，包含块的direction是ltr（rtl），设置margin-left(margin-right)为0，计算margin-right(margin-left)。 如果margin-left和margin-right其中一个值为auto，根据等式计算另一个值。 如果等式存在过度约束，忽略left值（包含块direction为rtl）或则right值（包含块direction为ltr），计算等式。

否则，设置margin-left和margin-right的auto值为0。应用以下规则：

1. left和width是auto，而right不是auto，width取shrink-to-fit值，根据等式计算left值。
2. left和right是auto，width不是auto。then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
3. width和right是auto，left不是auto，width取shrink-to-fit值，计算right值。
4. left是auto，width和right不是auto，计算left值。
5. width是auto，left和right不是auto，计算width值。
6. right是auto，left和width不是auto，计算right值。

关于这部分的内容与css2中描述的不一样，不如css2中容易理解。

10.3.8 绝对定位，可被重放置元素

对于这种情况，10.3.7上面的规则依然适用。10.3.7余下部分使用下面规则替换：

1. width的使用值由行内替换元素替换，如果margin-left或margin-right值是auto，使用值由采用下面规则。
2. 如果left和right都是auto值，如果创建静态位置包含块元素的direction属性是ltr(rtl)，设置left(right)为静态位置。
3. 如果left或right是auto值，将margin-left或margin-right的auto值设为0。
4. 如果这时margin-left和margin-right值依然是auto，计算等式加上两个margin值必须相等的约束。如果计算得到的margin值为负值，则根据包含块的direction属性，如果为ltr(rtl)，设置margin-left(margin-right)为0，计算margin-right(margin-left)值。
5. 如果这时还有auto值，根据等式计算该值。
6. 如果这时存在过度约束，包含块direction属性为rtl(ltr)时，忽略left(right)值，计算等式。

10.3.9 正常流中'Inline-block'， 不可被重放置元素

如果width是auto，使用值是shrink-to-fit值。计算值为auto的margin-left和margin-right，值为0。

10.3.10 正常流中'Inline-block'， 可被重放置元素

和行内替换元素相同。