Bạn sẽ hiểu vì sao các khối xếp dọc, liên kết nằm cùng dòng và một nội dung dài có thể tràn khỏi hộp. Từ đó chọn display và overflow phù hợp thay vì dùng position cho mọi bố cục.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Normal flow là điểm xuất phát

Phần tử được trình bày theo các quy tắc layout bình thường khi chưa có những thay đổi như positioning hoặc flex/grid container. Trong trường hợp đơn giản, block đi thành các khối theo chiều dọc, nội dung inline chạy trong các dòng. Đây là mô tả cách trình bày, không phải nhãn ngữ nghĩa cố định của một thẻ.

CSS có thể đổi display của một a, nhưng a vẫn mang vai trò liên kết nếu có href. Thay đổi display không biến nó thành button về mặt hành vi hay ngữ nghĩa.

Block, inline và inline-block

Block thường chiếm không gian theo chiều ngang có sẵn trong normal flow. Inline chạy trong dòng; width và height không hoạt động trên một non-replaced inline giống như hộp block. Inline-block tạo một hộp có thể đặt kích thước và vẫn tham gia dòng.

Ví dụ tạo liên kết có hình thức nút bằng inline-block và padding. Nó vẫn điều hướng nên dùng a là phù hợp. Để thực hiện hành động trong trang, vẫn chọn button.

Ẩn khác với cắt

display:none loại phần tử khỏi layout và thường khỏi cây tiếp cận. visibility:hidden giữ chỗ nhưng che nội dung. opacity:0 chỉ làm trong suốt; phần tử vẫn có thể nhận focus hoặc tương tác tùy tình huống. Không dùng chúng như ba cách hoàn toàn tương đương.

Kỹ thuật ẩn bằng mắt nhưng giữ cho công cụ hỗ trợ cần được xây đúng và kiểm tra focus. Đừng giấu nút đang được bàn phím chọn mà không có cách nhận biết.

Overflow là tín hiệu cần chẩn đoán

overflow:auto tạo cơ chế cuộn khi cần. hidden có thể cắt nội dung và che lỗi kích thước, không làm thông tin dư tự biến thành không cần thiết. Clip ảnh trang trí khác với cắt phần cuối của một câu hoặc nút gửi form.

Với code hoặc bảng rộng, vùng cuộn riêng thường hợp lý. Với đoạn văn hoặc chuỗi URL dài, overflow-wrap có thể giúp ngắt dòng. Trước khi đặt overflow-x:hidden cho body, tìm đúng phần tử gây tràn và lý do.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<div class="overflow-sample"><code>mot-chuoi-rat-dai-khong-co-khoang-trang-de-quan-sat-cach-no-co-the-tran-ra-ngoai-hop</code></div>

Thêm hoặc sửa trong styles.css

.button { display: inline-block; padding: .55rem .9rem; color: #fff; background: #175f82; border-radius: .4rem; text-decoration: none; }
.overflow-sample { max-width: 100%; width: 26rem; border: 1px solid #b9cad9; padding: .8rem; }
.overflow-sample code { overflow-wrap: anywhere; }
.scroll-code { max-width: 100%; overflow-x: auto; }

So sánh trước và sau

Liên kết có hình thức nút nhưng vẫn là liên kết. Chuỗi dài được ngắt trong vùng ví dụ thay vì đẩy toàn trang rộng hơn màn hình.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Dùng opacity:0 để ẩn một điều khiển mà vẫn để nó nhận focus ngoài ý muốn: chọn cơ chế theo nhu cầu.
• Cắt body để giấu lỗi tràn: tìm phần tử gây tràn.
• Đổi display rồi cho rằng đã đổi ngữ nghĩa: HTML vẫn giữ vai trò.

Tự kiểm tra

• Thử width trên a trước và sau khi đặt inline-block.
• Đổi auto thành hidden ở một vùng code và xem thông tin có bị mất không.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML