Bố cục HTML

Các thành phần bố cục HTML



Trang web thường hiển thị nội dung trong nhiều cột (như tạp chí hoặc báo).
HTML cung cấp một số yếu tố ngữ nghĩa xác định các phần khác nhau của trang web:
  • <tiêu đề> - Xác định tiêu đề cho tài liệu hoặc phần
  • <nav> - Xác định vùng chứa cho các liên kết điều hướng
  • <phần> - Xác định một phần trong tài liệu
  • <article> - Xác định một bài viết độc lập
  • <sid> - Xác định nội dung ngoài nội dung (như thanh bên)
  • <footer> - Xác định chân trang cho tài liệu hoặc phần
  • <chi tiết> - Xác định chi tiết bổ sung
  • <Tóm tắt> - Xác định tiêu đề cho phần tử <chi tiết>

Kỹ thuật bố trí HTML

Có năm cách khác nhau để tạo bố cục nhiều màu. Mỗi cách đều có ưu và nhược điểm:
  • Bảng HTML (không được đề xuất)
  • Thuộc tính float CSS
  • CSS flexbox
  • Khung CSS
  • Lưới CSS

Chọn cái nào?

Bảng HTML

Phần tử <bảng> không được thiết kế để trở thành một công cụ bố trí! Mục đích của phần tử <bảng> là hiển thị dữ liệu dạng bảng. Vì vậy, không sử dụng bảng để bố trí trang của bạn! Họ sẽ mang một mớ hỗn độn vào mã của bạn. Và hãy tưởng tượng sẽ khó khăn như thế nào để thiết kế lại trang web của bạn sau một vài tháng.
Mẹo: KHÔNG sử dụng bảng để bố trí trang của bạn!

Khung CSS

Nếu bạn muốn tạo bố cục nhanh, bạn có thể sử dụng khung
Phao CSS
Việc thực hiện toàn bộ bố cục web bằng thuộc tính float CSS là điều phổ biến. Float rất dễ học - bạn chỉ cần nhớ làm thế nào float và thuộc tính rõ ràng hoạt động. Nhược điểm: Các phần tử nổi được gắn với luồng tài liệu, có thể gây hại cho tính linh hoạt. Tìm hiểu thêm về float trong chương CSS Float và Clear của chúng tôi .
CSS Flexbox
Flexbox là một chế độ bố trí mới trong CSS3.

Việc sử dụng flexbox đảm bảo rằng các thành phần hoạt động có thể dự đoán được khi bố cục trang phải phù hợp với các kích thước màn hình khác nhau và các thiết bị hiển thị khác nhau. Nhược điểm: Không hoạt động trong IE10 trở về trước.

Tìm hiểu thêm về flexbox trong chương CSS Flexbox của chúng tôi .
Chế độ xem lưới CSS
Mô-đun bố trí lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế trang web dễ dàng hơn mà không phải sử dụng phao và định vị.

Nhược điểm: Không hoạt động trong IE cũng như trong Edge 15 trở về trước.

Tìm hiểu thêm về lưới CSS trong chương CSS Grid View của chúng tôi .