百分数

如果width，内边距和外边距设置为百分数值，会应用同样的基本规则。值声明为长度还是百分数并不重要。

百分数可能很有用。假设你希望一个元素的内容是其包含块宽度的2/3，左、右内边距分别设置为5%，左外边距为5%，余下的为右外边距。可以写作：

<p style="width: 67%; padding-right: 5%; padding-lefc: 5%; margin-right: auto; margin-left: 5%;">playing percentages</p>

右外边距会计算为包含块宽度的18%(100%-67%-5%-5%-5%)。

不过网页设计中，如果混合使用百分数和长度单位，可能很麻烦。考虑以下例子：

<p style="width: 67%; padding-right: 2em; padding-left: 2em; margin-right: auto; margin-left: 5em;"> mixed lengths</p>

在这种情况下，元素框可能定义如下：

5em + 0 + 2em + 67%+ 2em + 0 + auto =包含块宽度

为了让右外边距的宽度计算为0，元素包含块的宽度必须是27.272727em （元素内容区宽度为18.272727em）。如果比这宽，右外边距就会计算为一个正值，而比这窄时，右外边距则会计算为一个负值。

如果再加入长度值，情况还会更为复杂，如下：

<p style="width: 67%; padding-right: 15px; padding-left: 10px; margin-right: auto; margin-left: 5em;">more mixed lengths</p>

另外，边框的宽度不能是百分数，而只能是长度，这就使情况更复杂了。网页设计基本原则是：只使用百分数将无法创建完全灵活的元素布局（即所有属性都可设置），除非你不想使用边框。

替换元素

到目前为止，我们已经介绍了网页设计中正常文本流中非替换块级元素的水平格式化。替换块级元素管理起来更简单一些。非替换块元素的所有规则同样适用于替换块元素，只有一个例外：如果width为auto，元素的宽度则是内容的固有宽度。下例中的图像宽度是20像素，因为这正是原图像的宽度：

<img src="smile.png" style="display: block; width: auto; margin: 0;">

如果实际图像的宽度是100像素，那么元素的宽度也将是100像素。

可以为width指定一个特定值覆盖这个规则。假设将前例修改如下，将这个图像显示3次，每一次的width值都不同：

<img src="smile.png" styles="display: block; width: 25px; margin: 0;">

<img src="smile.png" style="display: block; width: 50px; margin: 0;">

<img src="smile.png" style="display: block; width: 100px; margin: 0;">

结果如图7-12所示。

注意，元素的高度也会增加。如果网页设计中一个替换元素的width不同于其固有宽度，那么height值也会成比例变化，除非height自己也显式设置为一个特定值。反过来也一样：如果设置了height，但width保持为auto，则width将随height的变化成比例调整。