Bài đọc

Cascade và box model: tự kiểm tra và mở rộng

3 phút đọc

Đây là bài 5 của chương 3: Cascade và box model, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.

Mục tiêu cụ thể

Kích thước hiển thị phụ thuộc content, padding, border và margin. Border-box giúp width bao gồm padding và border. Cascade quyết định khai báo nào thắng khi nhiều quy tắc áp dụng.

Bộ câu hỏi tự kiểm tra

Vì sao cascade và box model cần được xem xét riêng trong dự án HTML & CSS?
Giải thích bằng lời của bạn: Kích thước hiển thị phụ thuộc content, padding, border và margin. Border-box giúp width bao gồm padding và border. Cascade quyết định khai báo nào thắng khi nhiều quy tắc áp dụng.
Phát hiện vấn đề trong tình huống: Thêm !important liên tục chỉ che đi vấn đề specificity. Width 100% với content-box và padding có thể tạo tràn ngang.
Bạn sẽ giữ bằng chứng gì để chứng minh giải pháp hoạt động?

Tiêu chí chấm

Không tràn ngang ở màn hình hẹp
Padding được tính trong chiều rộng
Không cần !important để sửa bố cục

Bài mở rộng

Bắt đầu từ yêu cầu Tạo thẻ khóa học có padding 24px, đường viền và nút bắt đầu; dùng DevTools xem kích thước thật. Thay đổi quy mô, độ dài dữ liệu hoặc thứ tự thao tác. Chọn đúng một biến thể phù hợp với chương rồi dự đoán tác động trước khi thử. Ví dụ là công cụ để hiểu nguyên lý, không phải đáp án duy nhất.

Gợi ý tự đánh giá

Mức 1: nhắc lại được khái niệm nhưng chưa tự thực hiện.
Mức 2: tự hoàn thành ví dụ và giải thích các bước.
Mức 3: xử lý được trường hợp biên và giải thích lựa chọn khác.

Nếu chưa đạt mức 2, quay lại bài thực hành thay vì chỉ đọc đáp án. Khi đã đạt mức 3, ghi lại một cách giải khác và so sánh độ đơn giản, khả năng kiểm chứng và giới hạn của hai phương án.

Lưu bằng chứng