Định nghĩa và sử dụng
Thuộc tính max-width thiết lập chiều rộng tối đa cho thành phần.
Cấu trúc
tag {
max-width: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| max-width | đơn vị | max-width: 50px; | Chiều cao tính từ mép bên trái ngoài cùng của thành phần, đơn vị có thể là px, em, %, ... |
| none | max-width: none; | Không sử dụng chiều rộng lớn nhất, đây là dạng mặc định. | |
| inherit | max-width: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
HTML viết:
<html> <head></head> <body> <div> <p>Đoạn text này có chiều rộng lớn nhất là 120px.</p> </div> </body> </html>
Giả sử ban đầu CSS viết:
div {
border: 1px solid red;
}
Hiển thị trình duyệt khi chưa có thuộc tính max-width:
Đoạn text này có chiều rộng lớn nhất là 120px.
Thêm thuộc tính max-width vào CSS:
div {
border: 1px solid red;
max-width: 120px;
}
Hiển thị trình duyệt khi đã thêm max-width vào CSS:
Đoạn text này có chiều rộng lớn nhất là 120px.
Khi đã sử dụng thuộc tính max-width thì chiều rộng của box sẽ không vượt quá giá trị của max-width
Trình duyệt hỗ trợ
Thuộc tính max-width được hỗ trợ trong đa số các trình duyệt, ngoại trừ IE6.
Giá trị "inherit" trình duyệt IE8 đòi hỏi phải có !Doctype