Thuộc tính max-width
được sử dụng để đặt chiều rộng tối đa của một phần tử đã cho. Nó ngăn không cho giá trị đã sử dụng của tài sản width
trở nên lớn hơn giá trị được chỉ định cho max-width
Thí dụ
In this example, the "child"
HTML
sao chép mã
The Mozilla community produces a lot of great software.
CSS
sao chép mã
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }
Giá trị nội dung phù hợp có thể được sử dụng để đặt chiều rộng của một phần tử dựa trên kích thước nội tại mà nội dung của nó yêu cầu
HTML
sao chép mã
Child Text
CSS
sao chép mã
#parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: -moz-fit-content; max-width: -webkit-fit-content; }
cú pháp
CSS
sao chép mã
/* value */ max-width: 3.5em; /* value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fill-available; /* Global values */ max-width: inherit; max-width: initial; max-width: unset;
giá trị
______45_______Chiều rộng không có giá trị lớn nhất.#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }0Xem
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }0 để biết các đơn vị có thể.
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }2Được chỉ định là
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }2 chứa chiều rộng của khối.
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4 Chiều rộng ưu tiên nội tại.
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5 Chiều rộng tối thiểu nội tại.
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6 Chiều rộng khối chứa trừ đi lề ngang, đường viền và phần đệm. Một số trình duyệt triển khai tên cổ cho từ khóa này,
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }7.
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8 Giống như
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }9
cú pháp chính thức
CSS
sao chép mã
| | none | max-content | min-content | fit-content | fill-available
Sự miêu tả
Thuộc tính max-width
được sử dụng để đặt chiều rộng tối đa của một phần tử đã cho. Nó ngăn không cho giá trị đã sử dụng của tài sản width
trở nên lớn hơn giá trị được chỉ định cho max-width
max-width
ghi đè width
, nhưng
Child Text5 ghi đè
max-width
Giá trị ban đầunone
Áp dụng cho tất cả các phần tử trừ các phần tử nội tuyến không được thay thế, các hàng trong bảng và các nhóm hàngInheritednoPercentagestham chiếu đến chiều rộng của khối chứaMediavisualComputed valuetỷ lệ phần trăm như đã chỉ định hoặc độ dài tuyệt đối hoặc none
Animatableyes, dưới dạng , hoặc calc[]; . Thứ tự chính tắcthứ tự không mơ hồ duy nhất được xác định bởi ngữ pháp chính thứcXem thêm
width
,Child Text
5,#parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: -moz-fit-content; max-width: -webkit-fit-content; }
3- Mô hình hộp,
#parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: -moz-fit-content; max-width: -webkit-fit-content; }
4
thông số kỹ thuật
SpecificationStatusComment Work Draft Thêm các từ khóa#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4,
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5,
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8 và
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6.
Cả bản nháp của Hộp CSS3 và Chế độ viết CSS3 đã xác định tại một số điểm những từ khóa này. Những bản nháp này được thay thế bởi thông số kỹ thuật này. Bản thảo làm việc Xác định
max-width
là hoạt hình. Đề xuất Định nghĩa ban đầu- máy tính để bàn
- di động
Tính năngChromeFirefox [Gecko]Internet ExplorerOperaSafari [WebKit]Hỗ trợ cơ bản1. 01. 0 [1. 7 hoặc sớm hơn]7. 04. 02. 0. 2 [416],
lỗi beforeáp dụng cho
/* value */ max-width: 3.5em; /* value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fill-available; /* Global values */ max-width: inherit; max-width: initial; max-width: unset;0[1] Không hỗ trợ[Có]Không hỗ trợ[Yes]No support
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4,
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5,
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8, and
/* value */ max-width: 3.5em; /* value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fill-available; /* Global values */ max-width: inherit; max-width: initial; max-width: unset;4
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }7 No support [3]3.0 [1.9]-moz [2] Không hỗ trợKhông hỗ trợNo support [3]
Tính năng AndroidFirefox Mobile [Gecko]IE PhoneOpera MobileSafari MobileHỗ trợ cơ bản ?????
[1] CSS2. 1 rõ ràng rời khỏi hành vi của max-width
với
/* value */ max-width: 3.5em; /* value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fill-available; /* Global values */ max-width: inherit; max-width: initial; max-width: unset;0 không xác định. Do đó, mọi hành vi đều là CSS2. 1-tuân thủ;
[2] Gecko triển khai thử nghiệm các định nghĩa được đưa ra trong CSS3 Basic Box. Cái này định nghĩa
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }7 chứ không phải
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6. Ngoài ra, định nghĩa của
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8 đơn giản hơn trong CSS3 Sizing
[3] WebKit triển khai một đề xuất trước đó để đặt chiều cao thành chiều cao nội tại. các từ khóa
| | none | max-content | min-content | fit-content | fill-available
1, thay vì #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4, và
| | none | max-content | min-content | fit-content | fill-available
3, thay vì #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5 Không có từ tương đương cho
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6 hoặc
#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8