1. Thuộc tính hiển thị trong CSS
Thuộc tính display quy định cụ thể làm thế nào một phần tử được hiển thị
Mọi phần tử HTML đều có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline
1.1 Phần tử cấp khối
Một phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể)
Các phần tử cấp khối cơ bản:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
1.2 Phần tử nội tuyến
Một phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết
Các phần tử nội tuyến cơ bản:
- <span>
- <a>
- <img>
2. Ẩn một phần tử trong CSS
Display: none; thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không cần xóa và tạo lại chúng
Phần tử <script> sử dụng display: none; làm mặc định
Việc ẩn một phần tử có thể được thực hiện bằng cách đặt thuộc tính display thành none. Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó
Ví dụ:
Thuộc tính visibility:hidden; cũng ẩn một phần tử
Tuy nhiên, phần tử sẽ vẫn chiếm dụng không gian như trước. Phần tử sẽ bị ẩn, nhưng vẫn ảnh hưởng đến bố cục
Ví dụ:
3. Ghi đè giá trị hiển thị mặc định trong CSS
Mọi phần tử đều có giá trị hiển thị mặc định. Tuy nhiên, bạn có thể ghi đè điều này. Thay đổi phần tử nội tuyến thành phần tử khối hoặc ngược lại, có thể hữu ích để làm cho trang trông theo một cách cụ thể và vẫn tuân theo các tiêu chuẩn web
Ví dụ:
Lưu ý: Việc đặt thuộc tính hiển thị của một phần tử chỉ thay đổi cách phần tử được hiển thị, không phải loại phần tử đó là gì. Vì vậy, một phần tử nội tuyến với display: block; không được phép có các phần tử khối khác bên trong nó
