Khi bạn tạo bất kỳ cấp độ bố cục trang web phức tạp nào bằng CSS (ngoài bố cục bài viết đơn giản), mọi thứ có thể trở nên lộn xộn nhanh chóng. Điều này thường dẫn đến các vấn đề về bố cục khác nhau.
Một số vấn đề về bố cục CSS phổ biến nhất là:
- Các phần tử chồng chéo (thường là sự cố tràn)
- Thu gọn các yếu tố (thường là vấn đề về ký quỹ)
- Thêm khoảng trắng (nhiều thứ có thể gây ra điều này)
Một cách đơn giản để nhận được các dấu hiệu trực quan tức thì về các vấn đề bố cục của bạn là thêm đường viền xung quanh tất cả các phần tử HTML của bạn, sử dụng công cụ chọn phổ quát của CSS \ *
Thêm cái này vào đầu biểu định kiểu CSS của bạn:
\* {
border: 1px solid red;
}Tôi đã làm điều đó trên trang web của riêng mình và ngay lập tức nhận ra rằng bố cục của tôi có thể cần một số điều chỉnh.
Ngay cả khi bố cục của bạn không có bất kỳ vấn đề nào về hình ảnh, thủ thuật đường viền này có thể giúp phơi bày hoặc chỉ ra những điều có thể dẫn đến các vấn đề sau này.
Chỉnh sửa
Điều này cũng có thể được thực hiện với outline tài sản thay vì tài sản biên giới. Nó có thể là một giải pháp tốt hơn vì các phác thảo không chiếm dung lượng.