CSS - Thuộc tính Height: Khám phá Chiều cao

Xin chào các bạn đang học thiết kế web! Hôm nay, chúng ta sẽ cùng nhau đi sâu vào một trong những thuộc tính cơ bản nhất trong CSS: thuộc tính height. Là một giáo viên khoa học máy tính gần gũi, tôi rất vui được hướng dẫn các bạn trong hành trình này. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ manipulates heights như một chuyên gia!

Thuộc tính Height trong CSS là gì?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu từ cơ bản. Thuộc tính height trong CSS được sử dụng để đặt chiều cao của một phần tử. Đơn giản phải không? Nhưng đừng để vẻ ngoài đơn giản của nó đánh lừa bạn - thuộc tính này rất mạnh mẽ và linh hoạt.

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

Thuộc tính height có thể chấp nhận nhiều loại giá trị khác nhau. Hãy cùng phân tích chúng:

Giá trị	Mô tả
auto	Trình duyệt tính toán chiều cao
length	Xác định chiều cao theo px, cm, v.v.
%	Đặt chiều cao theo phần trăm của khối chứa
initial	Đặt giá trị mặc định
inherit	Kế thừa từ phần tử cha

Áp dụng cho

Thuộc tính height áp dụng cho tất cả các phần tử ngoại trừ các phần tử không thay thế inline, cột bảng và nhóm cột.

Cú pháp DOM

Hãy xem cách chúng ta có thể manipulates thuộc tính height bằng JavaScript:

object.style.height = "5px"

Dòng mã này đặt chiều cao của một đối tượng là 5 pixel. Nhớ rằng, trong JavaScript, chúng ta sử dụng camelCase, vì vậy nó là style.height, không phải style.Height.

Chiều cao trong CSS - Đơn vị Length

Bây giờ, hãy thử nghiệm với một chút CSS thực tế! Dưới đây là cách bạn có thể đặt chiều cao cụ thể bằng đơn vị length:

div {
height: 200px;
}

Mã này đặt chiều cao của tất cả các phần tử <div> thành 200 pixel. Đơn giản và rõ ràng!

Nhưng đợi đã, còn nhiều hơn nữa! CSS hỗ trợ nhiều đơn vị length khác nhau. Hãy xem một vài ví dụ:

.box1 { height: 50px; }   /* Pixels */
.box2 { height: 3em; }    /* Tương đối với font-size */
.box3 { height: 5rem; }   /* Tương đối với root font-size */
.box4 { height: 10vh; }   /* Tương đối với 1% của chiều cao viewport */

Mỗi đơn vị này có các trường hợp sử dụng riêng. Ví dụ, vh rất tốt cho việc tạo các phần tử có chiều cao đầy đủ và thích ứng với các kích thước màn hình khác nhau.

Giá trị phần trăm của Chiều cao

Giá trị phần trăm rất hữu ích khi bạn muốn chiều cao của một phần tử tương đối với phần tử cha. Hãy xem xét:

.parent {
height: 300px;
}

.child {
height: 50%;  /* Đây sẽ là 150px */
}

Trong ví dụ này, chiều cao của phần tử con sẽ là 50% chiều cao của phần tử cha, tức là 150 pixel. Như thể phần tử con đang nói, "Mẹ ơi, con muốn cao bằng một nửa mẹ!"

Giá trị auto của Chiều cao

Giá trị auto là mặc định cho thuộc tính height. Nó cho phép trình duyệt tính toán chiều cao dựa trên nội dung. Hãy xem nó trong hành động:

div {
height: auto;
}

Với auto, <div> sẽ mở rộng để phù hợp với tất cả nội dung của nó. Nó như một vali ma thuật mà mở rộng để chứa mọi thứ bạn bỏ vào!

Sử dụng max-content và min-content

Những giá trị này ít phổ biến hơn nhưng có thể rất hữu ích. max-content đặt chiều cao thành chiều cao lớn nhất mà nội dung có thể chiếm mà không bị tràn, trong khi min-content sử dụng chiều cao nhỏ nhất có thể.

.max-content-box {
height: max-content;
}

.min-content-box {
height: min-content;
}

Hãy tưởng tượng max-content như người bạn luôn nở ra hoàn toàn khi há miệng, và min-content như người bạn cuộn tròn thành một quả bóng nhỏ khi ngủ!

Chiều cao của Hình ảnh

Khi nói đến hình ảnh, chiều cao có thể hơi phức tạp. Hãy xem một ví dụ:

img {
height: 300px;
width: auto;
}

Mã này đặt chiều cao của hình ảnh thành 300 pixel và cho phép chiều rộng điều chỉnh tự động để duy trì tỷ lệ khung hình. Như thể bạn đang nói với hình ảnh, "Hãy cao như này, và tự quyết định bạn cần rộng bao nhiêu!"

Sử dụng clamp()

Hàm clamp() là một công cụ mạnh mẽ cho thiết kế responsive. Nó cho phép bạn đặt chiều cao tối thiểu, ưa thích và tối đa chỉ trong một cú pháp:

div {
height: clamp(200px, 50%, 400px);
}

Điều này đặt chiều cao thành 50% của khối chứa, nhưng đảm bảo nó không nhỏ hơn 200px hoặc lớn hơn 400px. Nó như thể bạn đang nói với một phần tử, "Bạn có thể cao từ 5'6" đến 6'2", nhưng hãy cố gắng đạt 5'10"!"

Các Thuộc tính Liên quan

Chiều cao không làm việc một mình! Dưới đây là một số thuộc tính liên quan:

Thuộc tính	Mô tả
min-height	Đặt chiều cao tối thiểu
max-height	Đặt chiều cao tối đa
line-height	Đặt chiều cao của một dòng

Những thuộc tính này làm việc cùng nhau với height để cho phép bạn kiểm soát chi tiết chiều cao của các phần tử của bạn.

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau khám phá thế giới của CSS height, từ cách sử dụng cơ bản đến các kỹ thuật nâng cao. Nhớ rằng, việc thành thạo CSS giống như học nấu ăn - nó đòi hỏi sự thực hành, thử nghiệm và sự kiên nhẫn để mắc lỗi. Vậy hãy đi và chơi với những thuộc tính này. Trước khi bạn biết, bạn sẽ tạo ra những bố cục đẹp mắt và linh hoạt dễ dàng!

Chúc các bạn viết mã vui vẻ, và mong rằng các phần tử của bạn luôn có chiều cao hoàn hảo!

Credits: Image by storyset