Thuộc tính chiều rộng CSS
Thí dụ
Đặt chiều rộng của ba phần tử <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;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc widthtính đặt chiều rộng của một phần tử.
Chiều rộng của một phần tử không bao gồm phần đệm, đường viền hoặc lề!
Lưu ý: Thuộc tính chiều rộng tối thiểu và
chiều rộng tối đa ghi đè thuộc width
tính.
| Giá trị mặc định: | Tự động |
|---|---|
| Thừa hưởng: | không |
| Hoạt hình: | Đúng. Đọc về hoạt hình |
| Phiên bản: | CSS1 |
| Cú pháp JavaScript: | đối tượng .style.width = "500px" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Cú pháp CSS
width: auto|value|initial|inherit;
Giá trị tài sản
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The browser calculates the width | |
| length | Defines the width in px, cm, etc. Read about length units | |
| % | Defines the width in percent of the containing block | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Đặt chiều rộng của phần tử <img> bằng giá trị phần trăm:
img {
width: 50%;
}
Thí dụ
Đặt chiều rộng của phần tử <input type = "text"> thành 100px. Tuy nhiên, khi nó được lấy nét, hãy làm cho nó rộng 250px:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
Các trang liên quan
Hướng dẫn CSS: Chiều cao và Chiều rộng CSS
Hướng dẫn CSS: Mô hình CSS Box
Tham chiếu CSS: thuộc tính chiều cao
Tham chiếu DOM HTML: thuộc tính chiều rộng