Bài 18: Bố cục trong CSS- Thuộc tính display
Thuộc tính display là thuộc tính CSS quan trọng nhất để kiểm soát bố cục của trang web.
Thuộc tính display
Thuộc tính display quy định làm cách 1 phần tử được hiển thị.
Mỗi phần tử HTML có một 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.
Phần tử Block
1 phần tử block 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 (kéo dài sang bên trái hết mức có thể).
Ví dụ về các phần tử block:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Phần tử Inline
Một phần tử inline 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.
Ví dụ về phần tử inline:
- <span>
- <a>
- <img>
Display: none;
display: none;thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không xóa và tạo lại chúng. Hãy xem ví dụ cuối cùng của chúng tôi trên trang này nếu bạn muốn biết làm thế nào điều này có thể đạt được.
Phần tử<script> sử dụng display: none; như mặc định.
Ghi đè Giá trị hiển thị mặc định
Như đã đề cập, mọi phần tử đều có giá trị hiển thị mặc định. Tuy nhiên, bạn có thể ghi đè lên điều này.
Thay đổi một phần tử inline thành một phần tử block hoặc ngược lại, có thể hữu ích để làm cho trang nhìn theo một cách cụ thể và vẫn tuân theo các tiêu chuẩn web.
Một ví dụ phổ biến là thay đổi phần tử<li> là phần tử block thành inline để tạo menu ngang:
Ví dụ:
li {
display: inline;
}
Lưu ý: Đặ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 là loại phần tử đó. Vì vậy, một phần tử inline với display: block;không được phép có các phần tử block khác bên trong nó.
Ví dụ sau hiển thị các phần tử <span> – phần tử inline dưới dạng phần tử block:
Ví dụ:
span {
display: block;
}
Ví dụ dưới đây hiển thị phần tử <a> – phần tử inline dưới dạng 1 phần tử block:
Ví dụ:
a {
display: block;
}Ẩn một phần tử – display:none hoặc visibility:hidden?
Ẩn một phần tử có thể được thực hiện bằng cách đặt thuộc tínhdisplay:none. Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó:
Ví dụ:
h1.hidden {
display: none;
}
visibility:hidden; cũng dùng để ẩn phần tử
Tuy nhiên, phần tử vẫn sẽ chiếm 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ụ:
h1.hidden {
visibility: hidden;
}
