display trong CSS
Đặc tính display là đặc tính CSS quan trọng nhất để kiểm soát layout cho trang web.
Đặc tính display
Đặc tính display cho biết một phần tử có hiển thị hay không và hiển thị như thế nào. Mỗi phần tử HTML đều có giá trị hiển thị mặc định phụ thuộc vào kiểu phần tử. Giá trị mặc định cho hầu hết các phần tử là khối hoặc nội dòng.
Phần tử khối
Phần tử khối luôn bắt đầu bằng dòng mới và chiếm toàn bộ độ rộng có thể. Ví dụ về phần tử khối
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Phần tử nội dòng
Phần tử nội dòng không bắt đầu trên dòng mới và chỉ chiếm độ rộng cần thiết. Ví dụ về phần tử nội dòng:
- <span>
- <a>
- <img>
Display: none;
display: none; thường được dùng với JavaScript để ẩn / hiện phần tử mà không xóa / tạo lại chúng. Phần tử <script> mặc định dùng display: none;
Ghi đè giá trị hiển thị mặc định
Như đã nói mỗi phần tử có giá trị hiển thị mặc định, nhưng bạn có thể ghi đè. Đổi từ phần tử nội dòng sang phần tử khối và ngược lại có thể giúp trang có diện mạo khác mà vẫn tuân theo chuẩn. Một ví dụ phổ biến là dùng phần tử nội dòng <li> cho menu theo chiều ngang.
li {
display: inline;
}
Lưu ý: thay đổi đặc tính hiển thị của phần tử chỉ thay đổi cách phần tử đó hiển thị chứ không thay đổi bản chất của nó. Phần tử nội dòng với display: block; không thể có phần tử khối khác bên trong nó.
Ví dụ dưới đây hiển thị phần tử <span> như một phần tử khối.
span {
display: block;
}
Ví dụ dưới đây hiển thị phần tử <a> như một phần tử khối.
a {
display: block;
}
Ẩn một phần tử, dùng display: none hay visibility: hidden?
Ẩn một phần tử có thể đặt giá trị none cho đặc tính display, khi đó, trang sẽ hiển thị như thể phần tử không có ở đó.
h1.hidden {
display: none;
}
visibility: hidden; cũng ẩn phần tử nhưng nó sẽ chiếm một không gian như khi nó có hiển thị. Dù bị ẩn, nó vẫn ảnh hưởng tới layout.
h1.hidden {
visibility: hidden;
}
Bài trước: Bảng trong CSS
Bài sau: Độ rộng tối đa của phần tử
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách nhập mật khẩu từ file CSV vào Google Chrome
Hôm qua 1 -
File ICO là gì? Cách mở file ICO
Hôm qua -
Cách kiểm tra số dư tài khoản Sacombank rất đơn giản
Hôm qua -
Cách sửa lỗi gõ tiếng Việt trên Word, Excel
Hôm qua -
Cách xem lịch sử nạp Liên Quân nhanh chóng
Hôm qua -
Cách khắc phục tình trạng tên Facebook bị đổi
Hôm qua -
Cách tạo Slide Master trên PowerPoint
Hôm qua -
Những ứng dụng hoán đổi khuôn mặt tốt nhất
Hôm qua -
3 cách đơn giản để tải file phát âm trên Google Dịch
Hôm qua 1 -
Hướng dẫn tạo avatar Tik Tok trong suốt
Hôm qua