(2) 將前面的標(biāo)記保存為example_2-2.html。圖2-2顯示了width:auto;應(yīng)用于<div>元素的效果。

圖  2-2

工作原理

所有帶width屬性的元素都有一個(gè)默認(rèn)的auto值，但在使用自動(dòng)寬度時(shí)，并不是所有元素都具有相同的效果。例如，<table>元素只是水平擴(kuò)展以容納其中的數(shù)據(jù)，這種方法稱為“收縮適應(yīng)”(shrink-to-fit)。另一方面，<div>元素則盡可能水平擴(kuò)展其寬度，這種方法稱為“擴(kuò)展適應(yīng)”(expand-to-fit)。

示例2-1和示例2-2中對(duì)每個(gè)元素都設(shè)置了背景，這樣用戶可以看到其寬度。邊框勾勒出每個(gè)元素的邊界，準(zhǔn)確顯示了每個(gè)元素占用的空間。第8章將詳細(xì)介紹width屬性的工作原理。

關(guān)鍵字通常調(diào)用一些特殊的、預(yù)定義的行為。這里通過CSS border屬性再給出一個(gè)示例：邊框可以使用3個(gè)獨(dú)立的關(guān)鍵字來(lái)定義它在瀏覽器中呈現(xiàn)的樣式：

border: thin solid black;

該示例使用3個(gè)關(guān)鍵字值(thin、solid和black)定義了一個(gè)屬性。每個(gè)值都表示不同特征的邊框外觀：thin表示度量，solid表示樣式，black表示顏色：

有時(shí)候設(shè)計(jì)人員需要引用樣式表中的內(nèi)容、文件路徑、名稱中包含空格的字體名稱或者HTML元素的屬性值。為了實(shí)現(xiàn)這些功能，CSS提供了另一種屬性值—— 字符串。