2009/01/20

width, max-width, min-width

max-width | min-width | width

設定元素矩形格子的寬。另外可以用 height 設定矩格的高。

width

設定區塊元素矩格的寬度,不可為負值。min-width, max-width 會改寫 width。可設為:

  1. 長度:用長度設定元素的寬度。
  2. 百分比:相對於包納區塊寬度的百分比,也就是父元素的寬度。如果包納區塊的寬度沒有宣告,而是由內容決定其寬度,則此參數與 auto 相同。
  3. auto:依據其它特徵決定寬度,此為預設值。
  4. inherit:繼承父元素特徵。
max-width

設定元素矩格的最大寬度,不可為負值;只能用在區塊元素。可設為:

  1. 長度:用長度設定元素的寬度。
  2. 百分比:相對於包納區塊寬度的百分比。如果包納區塊的寬度沒有宣告,而是由內容決定其寬度,則此參數與 auto 相同。
  3. inherit:繼承父元素特徵。

元素矩格的寬度不可超過 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。下例中

  1. IE6 不認得 max-width:該行會被 IE6 忽略;IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
  2. IE8, Firefox, Safari, Chrome 不認得 expression(),該行會被忽略。
  • 上例中,必須加上 overflow:auto,否則 IE6 會延伸寬度。這與真正的 max-width 有差異。
min-width

設定區塊元素矩格的最小寬度,不可為負值。可設為:

  1. 長度:用長度設定元素的寬度。
  2. 百分比:相對於包納區塊寬度的百分比。如果包納區塊的寬度沒有宣告,而是由內容決定其寬度,則此參數與 auto 相同。
  3. inherit:繼承父元素特徵。

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。下例中

  1. IE6 不認得 min-width:該行會被 IE6 忽略;IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
  2. IE8, Firefox, Safari, Chrome 不認得 expression(),該行會被忽略。
  • expression() 與真正的 min-width 有差異,使用時最好多測試。

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

javascript 應用。可以用 style 物件 的特徵 width 作動態變化。


©2008 -2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。