Tiếp tục chuỗi series khám phá sức mạnh của CSS, bài viết ngày hôm nay CNET sẽ giới thiệu cho các bạn tầm quan trọng của các thuộc tính CSS trong việc điều chỉnh kích thước của các phần tử trên trang web! Trong bài viết dưới đây CNET sẽ giới thiệu về các thuộc tính chính trong CSS để điều chỉnh kích thước, bao gồm width, height, max-width, max-height và min-width, min-height. Dẫn bạn qua từng thuộc tính và cách sử dụng chúng một cách hiệu quả để tạo ra giao diện web linh hoạt và thân thiện hơn.
Ở CSS có một loạt các thuộc tính được sử dụng để điều chỉnh kích thước của các phần tử trên trang web, điển hình là 6 thuộc tính chính:
- width
- height
- max-width
- max-height
- min-width
- min-height
1.Width và Height - Thiết lập chiều rộng và chiều cao cho phần tử
Các thuộc tính height và width là hai công cụ mạnh mẹ để thiết lập chiều rộng và chiều cao trên trang Web, chúng có thể có các giá trị sau:
- auto - Đây là giá trị mặc định. Trình duyệt tính toán chiều cao và chiều rộng
- length - Xác định chiều cao/chiều rộng tính bằng px, cm, v.v.
- % - Xác định chiều cao/chiều rộng theo phần trăm của khối chứa.
- initial - Đặt chiều cao/chiều rộng về giá trị mặc định
- inherit - Chiều cao/chiều rộng sẽ được kế thừa từ giá trị gốc của nó
Một số lợi ích khi sử dụng :
Kiểm soát kích thước: Sử dụng width và height giúp bạn kiểm soát kích thước của các phần tử một cách chính xác và linh hoạt.
Tính đáng tin cậy: Đặt kích thước bằng width và height giúp tránh sự biến đổi không mong muốn và đảm bảo rằng giao diện của bạn hiển thị một cách nhất quán trên mọi thiết bị và màn hình.
Tùy chỉnh Responsive: Khi phát triển các trang web responsive, thường hay sử dụng các giá trị linh hoạt cho width và height như phần trăm để phần tử có thể thích ứng với kích thước của cửa sổ trình duyệt hoặc thiết bị.
Lưu ý: Nên sử dụng các đơn vị đo phù hợp và chú ý đến sự linh hoạt khi thiết kế cho nhiều loại màn hình và tránh đặt kích thước cố định quá lớn có thể làm giảm trải nghiệm người dùng trên các thiết bị nhỏ.
2.Max-width và max-height - Thiết lập chiều rộng và chiều cao tối đa cho phần tử
Thuộc tính max-width và max-height xác định kích thước chiều rộng và chiều cao tối đa mà một phần tử có thể có. Nếu kích thước chiều rộng, chiều cao của phần tử vượt quá giá trị này, nó sẽ được giảm xuống đến giá trị tối đa đã xác định.
Max-width và max-height có thể chỉ định bằng các giá trị độ dài , như px, cm, v.v. hoặc theo phần trăm (%) của khối chứa hoặc được đặt thành none (đây là mặc định. Có nghĩa là không có chiều rộng tối đa).
Ở ví dụ dưới đây, phần tử div được thiết lập có chiều cao 100px và chiều rộng tối đa 500px.
Ngoài ra max-width và max-height thường được sử dụng để đảm bảo rằng nội dung trên trang web không bị mất tính toàn vẹn khi trình duyệt co lại hoặc khi xem trên các thiết bị có kích thước màn hình nhỏ hơn, kiểm soát kích thước của các phần tử như hình ảnh, video, hoặc bất kỳ phần tử nào khác có thể mở rộng ra quá nhiều và làm mất cân đối trang web.
Lưu ý: Khi sử dụng cả thuộc tính width và max-width hay height và max-height trên cùng một phần tử và giá trị của thuộc tính width, height lớn hơn max-width, max-height, khi đó thuộc tính max-width, max-height sẽ được sử dụng và thuộc tính width, height sẽ bị bỏ qua.
3. Min-width và min-height - Thiết lập chiều rộng và chiều cao tối thiểu cho phần tử
Đối lập với thuộc tính max-width và max-height, thuộc tính min-width và min-height xác định kích thước chiều rộng và chiều cao tối thiểu mà một phần tử có thể co lại. Nếu kích thước thực tế nhỏ hơn giá trị này, phần tử sẽ tự động mở rộng để đảm bảo đủ không gian cho nội dung bên trong.
Trên thực tế min-width và min-height cũng được ứng dụng trong:
- Responsive Design: Sử dụng min-width và min-height giúp xây dựng giao diện đáp ứng linh hoạt trên các thiết bị khác nhau mà không làm mất đi tính thẩm mỹ của trang web.
- Layout Design: Tạo ra các cột, hộp chứa hoặc vùng nội dung có kích thước tối thiểu đảm bảo cấu trúc giao diện được bảo tồn và dễ đọc dễ dùng.
Như ví dụ trên, ở thẻ <p> có class="ex1" đã được thiết lập với chiều cao tối thiểu min-height: 200px; khi đó nội dung bên trong nhỏ hơn chiều cao tối thiểu 200px thì chiều cao tối thiểu sẽ được áp dụng.
Chúng ta đã tìm hiểu qua về các chức năng của các thuộc tính trên, từ việc tạo ra giao diện đáp ứng linh hoạt đến việc xây dựng cấu trúc giao diện chính xác và thẩm mỹ, các thuộc tính này đóng vai trò quan trọng trong việc định hình và tối ưu hóa trải nghiệm người dùng trên mọi thiết bị và kích thước màn hình. Cùng CNET thực học - thực hành trực tiếp để vận dụng thành thạo các thuộc tính kích thước trên áp dụng vào thực tế tại khóa học lập trình FullStack của CNET nhé!
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
