百分?jǐn)?shù)

如果width，內(nèi)邊距和外邊距設(shè)置為百分?jǐn)?shù)值，會(huì)應(yīng)用同樣的基本規(guī)則。值聲明為長(zhǎng)度還是百分?jǐn)?shù)并不重要。

百分?jǐn)?shù)可能很有用。假設(shè)你希望一個(gè)元素的內(nèi)容是其包含塊寬度的2/3，左、右內(nèi)邊距分別設(shè)置為5%，左外邊距為5%，余下的為右外邊距?？梢詫?xiě)作：

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

右外邊距會(huì)計(jì)算為包含塊寬度的18%(100%-67%-5%-5%-5%)。

不過(guò)網(wǎng)頁(yè)設(shè)計(jì)中，如果混合使用百分?jǐn)?shù)和長(zhǎng)度單位，可能很麻煩。考慮以下例子：

<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 =包含塊寬度

為了讓右外邊距的寬度計(jì)算為0，元素包含塊的寬度必須是27.272727em （元素內(nèi)容區(qū)寬度為18.272727em）。如果比這寬，右外邊距就會(huì)計(jì)算為一個(gè)正值，而比這窄時(shí)，右外邊距則會(huì)計(jì)算為一個(gè)負(fù)值。

如果再加入長(zhǎng)度值，情況還會(huì)更為復(fù)雜，如下：

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

另外，邊框的寬度不能是百分?jǐn)?shù)，而只能是長(zhǎng)度，這就使情況更復(fù)雜了。網(wǎng)頁(yè)設(shè)計(jì)基本原則是：只使用百分?jǐn)?shù)將無(wú)法創(chuàng)建完全靈活的元素布局（即所有屬性都可設(shè)置），除非你不想使用邊框。

替換元素

到目前為止，我們已經(jīng)介紹了網(wǎng)頁(yè)設(shè)計(jì)中正常文本流中非替換塊級(jí)元素的水平格式化。替換塊級(jí)元素管理起來(lái)更簡(jiǎn)單一些。非替換塊元素的所有規(guī)則同樣適用于替換塊元素，只有一個(gè)例外：如果width為auto，元素的寬度則是內(nèi)容的固有寬度。下例中的圖像寬度是20像素，因?yàn)檫@正是原圖像的寬度：

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

如果實(shí)際圖像的寬度是100像素，那么元素的寬度也將是100像素。

可以為width指定一個(gè)特定值覆蓋這個(gè)規(guī)則。假設(shè)將前例修改如下，將這個(gè)圖像顯示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;">

結(jié)果如圖7-12所示。

注意，元素的高度也會(huì)增加。如果網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)替換元素的width不同于其固有寬度，那么height值也會(huì)成比例變化，除非height自己也顯式設(shè)置為一個(gè)特定值。反過(guò)來(lái)也一樣：如果設(shè)置了height，但width保持為auto，則width將隨height的變化成比例調(diào)整。