設定元素矩形格子的寬。另外可以用 height 設定矩格的高。
width
設定區塊元素矩格的寬度,不可為負值。min-width, max-width 會改寫 width。可設為:
- 長度:用長度設定元素的寬度。
- 百分比:相對於包納區塊寬度的百分比,也就是父元素的寬度。如果包納區塊的寬度沒有宣告,而是由內容決定其寬度,則此參數與 auto 相同。
- auto:依據其它特徵決定寬度,此為預設值。
- inherit:繼承父元素特徵。
max-width
設定元素矩格的最大寬度,不可為負值;只能用在區塊元素。可設為:
元素矩格的寬度不可超過 max-width,如果 width 小於 max-width,會以 width 作為矩格的寬度。元素只有設 max-width 時,會以其值為矩格的寬度。
- IE6 無此項;Firefox, Safari, Chrome 有支援。
CSS hack max-width。IE6 沒有 max-width,可以利用 expression() 與 clientWidth 達成 max-width 的功能。expression() 限用於 IE6, IE7。下例中
- IE6 不認得 max-width:該行會被 IE6 忽略;IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
- IE8, Firefox, Safari, Chrome 不認得 expression(),該行會被忽略。
- 上例中,必須加上 overflow:auto,否則 IE6 會延伸寬度。這與真正的 max-width 有差異。
min-width
設定區塊元素矩格的最小寬度,不可為負值。可設為:
width 小於 min-width 時,以 min-width 為矩格的寬度。width 大於 min-width 時,以 width 為矩格的寬度。
- IE6 無此項;Firefox, Safari, Chrome 有支援。
CSS hack min-width。IE6 沒有 min-width,可以利用 expression() 與 clientWidth 達成 min-width 的功能。expression() 限用於 IE6, IE7。下例中
- IE6 不認得 min-width:該行會被 IE6 忽略;IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
- IE8, Firefox, Safari, Chrome 不認得 expression(),該行會被忽略。
- expression() 與真正的 min-width 有差異,使用時最好多測試。
:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
javascript 應用。可以用 style 物件 的特徵 width 作動態變化。