width, max-width, min-width

max-width | min-width | width

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

width

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

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

<div style='width: 300px; background:white'> <p style='width: 70%; background:#733'> John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country. </p> </div>

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {width:150px; height:100px; background:blue; } .hvr:hover {width:200px;} .hvr:active {width:250px;} </style> <p class=hvr> 射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲. </p>

javascript 應用。可以用 style 物件 的特徵 width 作動態變化。 <div id='test' style='background:#339; width:100px'>變寬變窄</div> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'","'+ms+'")', ms); } toggleCSS("test", "width", "200px", "300px", 500); </script>