CSS width 寬度屬性

CSS width 寬度屬性是用來控制網頁元素寬度的功能，width 可以接受自動判斷寬度（auto）、自訂寬度百分比（%）或者是繼承自父層的 wi dth 屬性值，CSS width 屬性可以用在 DIV 區塊、span 區域、圖片（img 標籤）、文字輸入欄位（textarea）、按鈕（button）… 等諸多網頁元素的寬度設計，並且受到所有主瀏覽器的支援，CSS width 寬度屬性常常與用來設計網頁元素高度的 height 屬性一起使用。

CSS width 寬度屬性語法

width: 寬度值;

CSS 的 width 屬性只需要將屬性値填入即可使用，而 width 可接受的屬性值整理如下表：

寬度值	語法	說明
auto	width:auto;	自動判斷網頁元素的寬度。
長度	width:數字+單位;	可接受的單位有 px, em, cm 等網頁標準單位。
%	width:數字%;	利用百分比設定網頁元素寬度，需要有比較的參考。
inherit	width:inherit;	繼承自父層的寬度屬性值。

最後一個 inherit 屬性值在 IE 瀏覽器並不支援，不建議使用。

CSS width 寬度屬性範例一、設置圖片寬度

自動判斷圖片寬度<br>
<img src="upload/20141007145509.png" style="width:auto;"><br><br>
將圖片寬度設為 100px<br>
<img src="upload/20141007145509.png" style="width:100px;"><br><br>
將圖片寬度設為 50%<br>
<img src="upload/20141007145509.png" style="width:50%;"><br>

範例輸出結果

自動判斷圖片寬度

將圖片寬度設為 100px

將圖片寬度設為 50%

範例一提供各位三張利用 CSS width 屬性修改過的圖片，第一張圖片使用的是「width:auto;」讓瀏覽器自動判斷圖片的寬度，以此範例來說，判斷的結果就是圖片的原始大小，第二張圖片利用「width:100px;」將圖片寬度強制修改為 100px，高度則是瀏覽器自動等比例縮小的結果，第三張圖片是利用「width:50%」將圖片自動縮放至頁面的 50%，這樣的設計會讓圖片根據網頁顯示區域自動縮放，關於網頁圖片本身的語法以及寬度調整，可參閱以下兩篇的詳細介紹。

CSS width 寬度屬性範例二、設置 DIV 區塊寬度

範例輸出結果

這個 DIV 寬度為 200px

這個 DIV 寬度為 400px

範例二是兩個 DIV 區塊的寬度設計，透過 width:200px 以及 width:400px 設計出兩個寬度相差一倍的 DIV 區塊，CSS width 是 DIV 區塊寬度設計的標準語法，除了範例所使用的 px 單位之外，其他常用標準網路單位如 em, cm, % 都可以使用，想進一步研究 DIV 寬度設計，請參閱《CSS DIV 寬度與高度的設定》篇的詳細介紹。

CSS width 寬度屬性的應用範圍非常廣，泛除了可以直接使用 width 屬性來設計網頁元素的寬度之外，網頁設計師還可以採用更高階的的 min-width, max-width 等進階屬性，來限制網頁元素最小寬度極限與最大寬度極限。

延伸閱讀