Thuộc tính chiều rộng CSS
Ví 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;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính width
thiết lập 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 tính width
.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | đối tượng .style.width="500px" Hãy dùng thử |
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 | Demo |
---|---|---|
auto | Default value. The browser calculates the width | Demo ❯ |
length | Defines the width in px, cm, etc. Read about length units | Demo ❯ |
% | Defines the width in percent of the containing block | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví 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;
}
Hãy tự mình thử »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