Mô hình hộp và hiển thị phần tử HTML

Mô hình hộp trong trình bày phần tử HTML

• Các phần tử HTML được trình duyệt web hiển thị theo mô hình hộp (box model).
• Mỗi phần tử có cấu trúc logic hình chữ nhật, xác định vùng nội dung và đường viền.
• Vùng đệm ngăn cách nội dung và đường viền.
• Vùng lề nằm ngoài đường viền, phân tách các phần tử.
• Các trình duyệt web tự động căn chỉnh phần tử HTML hiển thị trên màn hình đầy đủ.
• Có thể điều chỉnh kích thước vùng hiển thị bằng CSS.
• Một số thuộc tính CSS cho các vùng hiển thị mô hình hộp:
  • padding: Xác định kích thước vùng đệm.
  • border-style: Xác định kiểu trình bày đường viền.
  • margin: Xác định kích thước vùng lề.
  • width: Xác định chiều rộng vùng nội dung.
  • height: Xác định chiều cao vùng nội dung.

Hiển thị phần tử theo khối, theo dòng

• Mỗi phần tử HTML hiển thị theo khối hoặc theo dòng.
• Hiển thị theo khối: Mỗi phần tử trên một dòng mới (ví dụ: h1, p).
• Hiển thị theo dòng: Các phần tử có thể hiển thị trên cùng một dòng (ví dụ: img, a).
• CSS cho phép thay đổi kiểu hiển thị mặc định bằng thuộc tính display.
• display: block;: Thiết lập kiểu hiển thị theo khối.
• display: inline;: Thiết lập kiểu hiển thị theo dòng.

Bố cục trang web

• Bố cục trang web là cách sắp xếp, bố trí nội dung trên trang web để tạo giao diện.
• Trang web thường gồm các phần cơ bản:
  • Phần đầu trang (header): Logo, tiêu đề trang web.
  • Thanh điều hướng (navigation menu): Liên kết đến các trang web khác.
  • Phần nội dung (content): Thông tin chính của trang web.
  • Phần chân trang (footer): Thông tin bổ trợ (bản quyền, liên kết).
• Phân chia trang web thành các vùng bằng phần tử div và định dạng CSS.
• Mỗi vùng thường trình bày một thành phần chính của trang web.