📐 Các Loại Cấu Trúc CSS Layout Toàn Tập

Mô hình 1

CSS Flexbox (Flexible Box Layout)

Flexbox là mô hình dàn trang theo một chiều (hoặc theo hàng ngang hoặc theo cột dọc). Nó cực kỳ mạnh mẽ trong việc căn chỉnh khoảng cách, canh giữa và phân bổ không gian cho các phần tử bên trong container.

Các thuộc tính quan trọng: display: flex, justify-content (căn trục ngang), align-items (căn trục dọc), gap (khoảng cách).

.container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
.item {
    flex: 1; /* Tự động chia đều không gian */
}

Mô hình 2

CSS Grid (Grid Layout)

CSS Grid là hệ thống dàn trang theo hai chiều (cả hàng ngang và cột dọc cùng lúc). Đây là công cụ tối ưu nhất để xây dựng khung tổng thể cho trang web, chia bố cục các khối dashboard hoặc danh sách sản phẩm dạng lưới phức tạp.

Các thuộc tính quan trọng: display: grid, grid-template-columns (chia số cột), grid-template-rows (chia hàng), gap.

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tạo 3 cột bằng nhau */
    gap: 15px;
}

Mô hình 3

CSS Positioning (Định vị toạ độ)

Thuộc tính position cho phép bạn đặt các phần tử ở các vị trí cố định hoặc đè chồng lên nhau trong không gian:

• static: Mặc định theo luồng tự nhiên của trang.
• relative: Định vị tương đối (dịch chuyển so với vị trí gốc của nó).
• absolute: Định vị tuyệt đối so với phần tử cha gần nhất có chứa position.
• fixed: Cố định vị trí trên màn hình kể cả khi cuộn chuột (thường dùng cho thanh menu hoặc nút gọi nhanh).
• sticky: Trôi nổi dính theo màn hình khi cuộn đến một điểm nhất định.

.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}

Mô hình 4

CSS Box Model (Khung hộp nội dung)

Mọi thành phần trên trang web đều được xem là một chiếc hộp hình chữ nhật, bao gồm 4 lớp cấu trúc tính từ trong ra ngoài:

1. Content: Nội dung thực tế bên trong (chữ, hình ảnh...).
2. Padding: Khoảng đệm bên trong (khoảng cách từ nội dung đến viền).
3. Border: Đường viền bao quanh.
4. Margin: Khoảng cách lề bên ngoài (đẩy cách xa các phần tử xung quanh).

.box-model-sample {
    width: 300px;
    padding: 20px;   /* Đệm trong */
    border: 2px solid #ccc; /* Viền */
    margin: 20px auto; /* Lề ngoài và căn giữa */
}