Trong quá trình thiết kế và lập trình web, đôi khi bạn cần kiểm tra xem bố cục (layout) của các phần tử hiển thị như thế nào. Thay vì phải chèn border cho từng phần tử, bạn có thể dùng một đoạn CSS rất ngắn gọn:
* { outline: 1px dashed red; /* tô khung đỏ cho mọi phần tử */ }
1. Giải thích đoạn CSS
-
*: Đây là universal selector (bộ chọn toàn cục), nghĩa là áp dụng cho tất cả phần tử HTML trên trang. -
outline: Vẽ đường viền bao quanh phần tử, nhưng không chiếm không gian nhưborder. -
1px dashed red: Tạo đường viền 1px, dạng gạch đứt, màu đỏ.
2. Ưu điểm khi dùng outline thay vì border
-
Không làm thay đổi kích thước phần tử (khác với border).
-
Dễ nhìn bố cục vì viền chỉ mang tính hiển thị, không ảnh hưởng spacing.
-
Xóa đi nhanh chóng sau khi kiểm tra.
3. Ứng dụng thực tế
-
Debug layout: Xác định rõ phần tử nào đang chiếm diện tích, có bị chồng lấn hay không.
-
Phát hiện lỗi spacing: Xem padding, margin có bị lệch không.
-
Học lập trình web: Người mới học HTML/CSS dễ hiểu cấu trúc trang hơn.
Ví dụ, khi code một website có nhiều div lồng nhau, thêm CSS này bạn sẽ thấy toàn bộ cấu trúc hiển thị như một sơ đồ trực quan.
4. Lưu ý khi sử dụng
-
Chỉ nên dùng trong giai đoạn phát triển (development), không đưa lên bản production.
-
Có thể thay đổi màu (
blue,green,orange…) để phân biệt rõ ràng. -
Khi dự án lớn, bạn có thể chỉ áp dụng outline cho nhóm phần tử nhất định (vd:
div, section, article { outline: 1px solid blue; }).
✅ Kết luận:
CSS * { outline: 1px dashed red; } là một thủ thuật debug layout cực kỳ hiệu quả cho lập trình viên web. Nó giúp bạn nhanh chóng kiểm tra bố cục mà không làm thay đổi giao diện thật của website.
