Thuộc tính kích thước khối tối đa của CSS
Ví dụ
Đặt kích thước tối đa của phần tử <div> thành 60 pixel theo hướng khối:
div {
max-block-size: 60px;
}
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 max-block-size
chỉ định kích thước tối đa của một phần tử theo hướng khối.
Nếu nội dung nhỏ hơn kích thước tối đa theo hướng khối, giá trị thuộc tính max-block-size
không có hiệu lực.
Nếu nội dung lớn hơn kích thước tối đa theo hướng khối, giá trị thuộc tính max-block-size
sẽ được áp dụng.
Lưu ý: writing-mode
thuộc tính CSS liên quan xác định hướng khối và điều này ảnh hưởng đến kết quả của thuộc tính max-block-size
. Đối với các trang bằng tiếng Anh, hướng khối là hướng xuống và hướng nội tuyến là từ trái sang phải.
Thuộc tính max-block-size
của CSS rất giống với thuộc tính CSS max-height
và max-width
, nhưng thuộc tính max-block-size
phụ thuộc vào hướng khối.
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: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.maxBlockSize="60px" 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 | |||||
---|---|---|---|---|---|
max-block-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 |
Cú pháp CSS
max-block-size: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default max-block-size value. | Demo ❯ |
length | Specifies max-block-size in px, pt, cm, etc. Read about length units | Demo ❯ |
% | Specifies max-block-size in percent relative to size of parent element on the corresponding axis. | 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ụ
Chế độ viết
Với giá trị thuộc tính writing-mode
của phần tử <div> được đặt thành Vertical-lr, hướng khối được thay đổi từ hướng xuống sang hướng ngang và điều này ảnh hưởng đến cách hoạt động của thuộc tính max-block-size
:
div {
max-block-size: 60px;
writing-mode: vertical-lr;
}
Hãy tự mình thử »Kích thước khối tối đa so với kích thước khối
Xem cách một phần tử <div> có block-size
100px và một phần tử <div> khác có max-block-size
100px, phản ứng khác nhau như thế nào khi thay đổi kích thước nội dung:
#div1 {
max-block-size: 100px;
}
#div2 {
block-size: 100px;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính kích thước khối CSS: Thuộc tính CSS Block-size
Thuộc tính CSS min-block-size: Thuộc tính CSS Min-block-size
Thuộc tính chiều cao tối đa của CSS: Thuộc tính CSS Max-height
Thuộc tính chiều rộng tối đa của CSS: Thuộc tính chiều rộng tối đa của CSS
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS