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
Cũ vẫn chất
-
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua