CSS width 屬性
示例
設定三個 <div> 元素的寬度
div.a {
width: auto;
border: 1px solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width: 50%;
border: 1px solid black;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
width 屬性用於設定元素的寬度。
元素的寬度不包括內邊距、邊框或外邊距！
注意： min-width 和 max-width 屬性會覆蓋 width 屬性。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 語法
width: auto|值|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 預設值。瀏覽器會自動計算寬度 | 演示 ❯ |
| length | 以 px, cm 等為單位定義寬度。 閱讀關於長度單位 | 演示 ❯ |
| % | 定義包含塊寬度的百分比 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
將 <input type="text"> 元素的寬度設定為 100px。但是，當它獲得焦點時，將其寬度設定為 250px
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 高度和寬度
CSS 教程：CSS 盒模型
CSS 參考：height 屬性
HTML DOM 參考： width 屬性
