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

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của CSS và tìm hiểu một thuộc tính có thể听起来有点吓人 ban đầu, nhưng tôi đảm bảo rằng bạn sẽ thấy nó rất thú vị một khi chúng ta phân tích nó. Hãy cùng nhau thảo luận về thuộc tính min-block-size!

min-block-size là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu min-block-size thực sự có nghĩa là gì. Hãy tưởng tượng bạn đang xây dựng một tháp bằng các khối. min-block-size giống như nói, "Nào, bất kể gì xảy ra, tháp này cần phải cao ít nhất THIS!" Nó xác định kích thước tối thiểu của một phần tử theo hướng block.

Hiện tại, bạn có thể đang tự hỏi, "Hướng block là gì?" Ở hầu hết các trường hợp đối với tiếng Anh và các ngôn ngữ tương tự, nó là hướng vertial. Nhưng đừng lo lắng, chúng ta sẽ khám phá thêm về điều này sau!

Các giá trị có thể sử dụng

Hãy cùng nhìn vào các giá trị khác nhau mà chúng ta có thể sử dụng với min-block-size:

Giá trị	Mô tả
<length>	Một kích thước cố định như 100px, 2em, v.v.
<percentage>	Phần trăm của kích thước block của phần tử bao
auto	Trình duyệt tính toán kích thước block tối thiểu
max-content	Kích thước block ưa thích nội tại
min-content	Kích thước block tối thiểu nội tại
fit-content	Sử dụng không gian khả dụng, nhưng không nhỏ hơn min-content hoặc lớn hơn max-content

Đừng lo lắng nếu chúng có vẻ rối rắm lúc này. Chúng ta sẽ khám phá từng giá trị với các ví dụ!

Áp dụng cho

Thuộc tính min-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

Cú pháp

Cú pháp cơ bản rất đơn giản:

min-block-size: giá trị;

Hãy cùng vào một số ví dụ để xem điều này hoạt động trong thực tế!

CSS min-block-size - Giá trị

Hãy bắt đầu với một ví dụ đơn giản sử dụng một kích thước cố định:

<div class="box">
Đây là một hộp có min-block-size đặt là 100px.
</div>

.box {
min-block-size: 100px;
background-color: lightblue;
padding: 10px;
}

Trong ví dụ này, chúng ta đang告诉 trình duyệt, "Bất kể nội dung bên trong hộp này là gì, hãy đảm bảo nó cao ít nhất 100 pixel." Nếu nội dung nhỏ hơn 100px, hộp vẫn sẽ cao 100px. Nếu nó lớn hơn, hộp sẽ mở rộng để phù hợp với nội dung.

CSS min-block-size - max-content Giá trị

Bây giờ, hãy nhìn vào giá trị max-content:

<div class="container">
<div class="box">
Hộp này sẽ mở rộng để phù hợp với nội dung, nhưng không nhỏ hơn kích thước max-content của nó.
</div>
</div>

.container {
width: 200px;
background-color: #f0f0f0;
}

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

Trong trường hợp này, max-content告诉 trình duyệt để làm cho hộp cao như cần thiết để phù hợp với tất cả nội dung mà không làm断裂 các dòng. Nếu bạn thay đổi kích thước cửa sổ trình duyệt, bạn sẽ thấy rằng hộp luôn cao đủ để phù hợp với tất cả văn bản trong một dòng.

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

Bây giờ, hãy thử một chút mạo hiểm và xem min-block-size hoạt động như thế nào với các hướng văn bản khác nhau:

<div class="horizontal">
Đây là văn bản ngang
</div>
<div class="vertical">
Đây là văn bản dọc
</div>

.horizontal, .vertical {
min-block-size: 150px;
background-color: lightyellow;
margin-bottom: 20px;
padding: 10px;
}

.vertical {
writing-mode: vertical-rl;
}

Trong ví dụ này, chúng ta có hai hộp với cùng một min-block-size. Đối với văn bản ngang, điều này thiết lập chiều cao tối thiểu. Nhưng đối với văn bản dọc, nó thiết lập chiều rộng tối thiểu! Điều này vì min-block-size luôn tham chiếu đến hướng block, điều này thay đổi khi chúng ta thay đổi chế độ viết.

Ứng dụng thực tế

Bạn có thể đang tự hỏi, "Tôi thực sự sẽ sử dụng điều này khi nào trong cuộc sống thực tế?" Câu hỏi tuyệt vời! Dưới đây là một số tình huống:

1. Thiết kế responsive: Bạn có thể sử dụng min-block-size để đảm bảo các phần tử không trở nên quá nhỏ trên các thiết bị di động.

2. Bố cục linh hoạt: Nó hoàn hảo cho việc tạo ra các bố cục linh hoạt mà có thể thích ứng với các kích thước nội dung khác nhau trong khi duy trì kích thước tối thiểu.

3. Thiết kế thẻ: Khi tạo các bố cục thẻ, min-block-size có thể đảm bảo tất cả các thẻ có chiều cao tối thiểu đồng nhất.

Hãy nhìn vào một ví dụ thiết kế thẻ:

<div class="card-container">
<div class="card">
<h2>Thẻ 1</h2>
<p>Thẻ này có mô tả ngắn.</p>
</div>
<div class="card">
<h2>Thẻ 2</h2>
<p>Thẻ này có mô tả dài hơn rất nhiều để minh họa cách min-block-size hoạt động.</p>
</div>
</div>

.card-container {
display: flex;
gap: 20px;
}

.card {
min-block-size: 200px;
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 20px;
flex: 1;
}

Trong ví dụ này, cả hai thẻ sẽ có chiều cao tối thiểu là 200px, nhưng thẻ thứ hai sẽ mở rộng để phù hợp với nội dung dài hơn. Điều này tạo ra một diện mạo整洁 và đồng nhất trong khi vẫn phù hợp với các độ dài nội dung khác nhau.

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã khám phá thuộc tính min-block-size, từ cú pháp cơ bản đến một số ứng dụng thực tế. Nhớ rằng, CSS là tất cả về thử nghiệm, vì vậy đừng ngại thử nghiệm với các thuộc tính này và xem bạn có thể tạo ra gì!

Trong hành trình tiếp tục của bạn vào thế giới lập trình web, bạn sẽ thấy rằng các thuộc tính như min-block-size là những công cụ vô cùng hữu ích trong bộ công cụ CSS của bạn. Chúng cho phép bạn tạo ra các thiết kế linh hoạt, responsive và trông tuyệt vời trên mọi thiết bị.

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Trước khi bạn biết, bạn sẽ tạo ra các trang web tuyệt vời mà có thể thích ứng hoàn hảo với mọi kích thước màn hình. Chúc bạn may mắn với việc thiết kế!

Credits: Image by storyset