設定元素矩形格子的寬。另外可以用 height 設定矩格的高。
設定區塊元素矩格的寬度，不可為負值。min-width, max-width 會改寫 width。可設為：
- 長度：用長度設定元素的寬度。
- 百分比：相對於包納區塊寬度的百分比，也就是父元素的寬度。如果包納區塊的寬度沒有宣告，而是由內容決定其寬度，則此參數與 auto 相同。
- auto：依據其它特徵決定寬度，此為預設值。
- 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> - 執行結果：
John F. Kennedy said:ask not what your country can do for you - ask what you can do for your country.
: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> - 執行結果：變寬變窄
