CSS - max-block-size Thuộc tính: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào các pháp sư CSS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CSS, cụ thể là khám phá thuộc tính max-block-size. Đừng lo lắng nếu bạn là người mới; tôi sẽ là hướng dẫn viên thân thiện của bạn, và chúng ta sẽ cùng nhau giải quyết chủ đề này từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi舒适的, và cùng nhau lặn sâu vào!

max-block-size là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu max-block-size là về điều gì. Hãy tưởng tượng bạn đang xây dựng một tháp bằng khối. Thuộc tính max-block-size giống như việc bạn đặt giới hạn chiều cao của tháp. Trong thuật ngữ CSS, nó xác định kích thước tối đa của một phần tử theo hướng block.

"Nhưng chờ đã," bạn có thể hỏi, "hướng block là gì?" Đó là một câu hỏi tuyệt vời! Hướng block thường là hướng dọc trong các ngôn ngữ viết ngang (như tiếng Anh), và hướng ngang trong các ngôn ngữ viết dọc (như tiếng Nhật truyền thống).

Cú pháp và các giá trị có thể

Hãy nhìn cách chúng ta có thể sử dụng max-block-size trong CSS của mình:

.my-element {
max-block-size: value;
}

Bây giờ, chúng ta có thể đặt gì vào vị trí "value"? Dưới đây là bảng tiện ích với tất cả các giá trị có thể:

Giá trị	Mô tả
<length>	Một độ dài cố định, như 300px hoặc 20em
<percentage>	Một phần trăm của kích thước khối chứa
none	Không có giới hạn (đây là mặc định)
max-content	Kích thước tối đa nội tại ưa thích
min-content	Kích thước tối thiểu nội tại
fit-content	Tương tự như auto, nhưng có một số khác biệt
auto	Trình duyệt quyết định kích thước tối đa

Áp dụng cho

Không phải tất cả các thuộc tính CSS đều áp dụng cho mọi phần tử HTML. Thuộc tính max-block-size áp dụng cho tất cả các phần tử ngoại trừ:

• Các phần tử inline không thay thế
• Các hàng của bảng
• Các nhóm hàng

Đừng lo lắng nếu bạn chưa quen thuộc với các thuật ngữ này. Khi bạn tiến hóa trong hành trình CSS của mình, bạn sẽ gặp chúng và hiểu tại sao chúng là ngoại lệ.

CSS max-block-size - Hiệu ứng writing-mode

Bây giờ, hãy xem điều thú vị! Thuộc tính max-block-size thay đổi hành vi của nó dựa trên writing-mode của văn bản. Hãy nhìn một số ví dụ:

Ví dụ 1: Chế độ viết ngang

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
This is a box with horizontal writing mode and max-block-size set to 200px.
</div>

Trong ví dụ này, max-block-size sẽ giới hạn chiều cao của hộp ở 200 pixel vì hướng block là dọc trong chế độ viết ngang.

Ví dụ 2: Chế độ viết dọc

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
This is a box with vertical writing mode and max-block-size set to 200px.
</div>

Trong trường hợp này, max-block-size sẽ giới hạn chiều rộng của hộp ở 200 pixel vì hướng block là ngang trong chế độ viết dọc.

CSS max-block-size - Giá trị <length>

Khi chúng ta sử dụng giá trị độ dài, chúng ta đang đặt một kích thước cố định. Hãy xem nó trong hành động:

.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="fixed-size">
This box has a max-block-size of 150px. If the content exceeds this height, it will overflow.
</div>

Trong ví dụ này, bất kể có bao nhiêu nội dung chúng ta đặt trong div, nó sẽ không cao hơn 150 pixel.

CSS max-block-size - Giá trị <percentage>

Phần trăm là tương đối so với kích thước của khối chứa. Dưới đây là cách nó hoạt động:

.parent {
height: 300px;
background-color: lightgray;
}

.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="parent">
<div class="child">
This child div has a max-block-size of 50% of its parent's height.
</div>
</div>

Trong trường hợp này, div con sẽ không bao giờ cao hơn một nửa chiều cao của khối chứa.

CSS max-block-size - Giá trị <max-content>

Giá trị max-content rất hữu ích khi bạn muốn phần tử của bạn lớn như nội dung yêu cầu, nhưng không lớn hơn. Hãy xem một ví dụ:

.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="max-content-box">
This box will expand to fit its content, but no more than that.
</div>

Hộp này sẽ mở rộng để phù hợp với nội dung, nhưng không vượt quá đó.

CSS max-block-size - Với văn bản ngang và dọc

Hãy kết thúc với một ví dụ kết hợp văn bản ngang và dọc:

.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="mixed-text">
This is horizontal text with max-block-size of 200px.
<div class="vertical-text">
This is vertical text with max-block-size of 100px.
</div>
</div>

Trong ví dụ này, chúng ta có một container với văn bản ngang và chiều cao tối đa là 200px. Trong đó, chúng ta có một div khác với văn bản dọc và chiều rộng tối đa là 100px.

Và đó là tất cả! Chúng ta đã khám phá thuộc tính max-block-size từ nhiều góc độ. Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy, đừng ngần ngại thử nghiệm với các ví dụ này, chỉnh sửa chúng, và xem会发生什么. Chúc bạn may mắn và các khối của bạn luôn đúng kích thước!

Credits: Image by storyset