Khi bạn tạo kiểu cho các layout trang web phức tạp bằng CSS (vượt qua layout bài viết đơn giản), mọi thứ có thể trở nên rối rắm rất nhanh. Điều này thường dẫn đến nhiều vấn đề về layout.
Một số vấn đề layout CSS phổ biến nhất là:
- Các phần tử chồng chéo (thường do overflow)
- Các phần tử thu hẹp (thường do margin)
- Khoảng trắng thừa (nhiều nguyên nhân có thể gây ra)
Một cách đơn giản để có dấu hiệu trực quan tức thì về các vấn đề layout là thêm border quanh tất cả các phần tử HTML, sử dụng bộ chọn phổ quát * của CSS.
Thêm đoạn này vào đầu file CSS của bạn:
* { border: 1px solid red; }Mình đã thử trên trang web của mình và ngay lập tức nhận ra layout cần điều chỉnh.
Ngay cả khi layout không có vấn đề trực quan, thủ thuật border này cũng giúp phát hiện hoặc chỉ ra những điều có thể dẫn đến vấn đề sau này.
Chỉnh sửa
Điều này cũng có thể thực hiện với thuộc tính outline thay vì border. Có thể là giải pháp tốt hơn vì outline không chiếm diện tích.