CSS Display
21/05/2019
Thuộc tính display là thuộc tính quan trọng nhất trong CSS cho việc control layout.
Thuộc tính display xác định cách phần tử HTML hiển thị như thế nào. Mỗi phần tử HTML đều có giá trị display mặc định phụ thuộc vào chính phần tử đó. Giá trị display mặc định của đa số các phần tử là block hoặc inline.
Block Element
Một phần tử display: 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 từ bên trái sang bên phải hết mức có thể). Một số phần tử HTML có display mặc định là block :
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Element
Một phần tử display: inline; không bắt đầu trên dòng mới và có độ rộng bằng với nội dung của nó. Một số thẻ HTML có display mặc định là inline :
- <span>
- <a>
- <img>
Display none
Thuộc tính 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 hoặc tạo lại chúng.
Thẻ <script> có thuộc tính mặc định là display: none;.
Ghi đè thuộc tính display
Như đã đề cập, Tất cả thẻ HTML đều có thuộc tính display mặc định. Tuy nhiên, Ta có thể ghi đè lại nó.
Thay đổi phần tử có display inline thành display block hoặc ngược lại, tùy theo cách mà bạn muốn để trang web bạn đẹp hơn.
Chú ý: Thiết lập thuộc tính display cho phần tử HTML chỉ thay đổi cách mà phần tử đó hiển thị, KHÔNG thay đổi loại của phần tử. Vì vậy, phần tử inline có css display: block; không cho phép phần tử block khác nằm bên trong nó.
Ví dụ bên dưới cho thẻ <span> hiển thị thành block :
<span>Ví dụ thẻ span có display "block" </span><span>chia thành 2 hàng khác nhau. </span>
span {
display: block;
}
Ví dụ thẻ span có display "block" chia thành 2 hàng khác nhau.
Hide element - display: none hay visibility:hidden
Ẩn một phần tử với thuộc tính display: none thì phần tử bị ấn đi và trang web load bình thường coi như không có phần tử đó. Xem ví dụ dưới đây:
<p>Đoạn text bình thường.</p>
<p class="hide">Đoạn text bị ẩn đi.</p>
<p>Đoạn text bình thường khác ở dưới.</p>
p.hide {
display: none;
}
Đoạn text bình thường.
Đoạn text bình thường khác ở dưới.
Thuộc tính visibility:hidden; cũng dùng để ẩn một phần tử. Tuy nhiên, phần tử này vẫn chiếm không gian tại vị trí nó nằm. Xem ví dụ bên dưới nhé :
<p>Đoạn text bình thường.</p>
<p class="visibility">Đoạn text bị ẩn đi nhưng vẫn chiếm không gian.</p>
<p>Đoạn text bình thường khác ở dưới. Bị trống 1 đoạn ở giữa do thẻ p ở trên bị ẩn bởi visibility và nó đang chiếm 1 khoảng trống.</p>
p.visibility {
visibility: hidden;
}
Đoạn text bình thường.
Đoạn text bình thường khác ở dưới. Bị trống 1 đoạn ở giữa do thẻ p ở trên bị ẩn bởi visibility và nó đang chiếm 1 khoảng trống.
Bảng danh sách các giá trị của thuộc tính display:
Cú pháp : display: value;
Value | Mô tả |
inline | Hiển thị phần tử dạng inline (giống thẻ span). Các thuộc tính width, height không có tác dụng. |
block | Hiển thị phần tử dạng block (giống div ). Bắt đầu dòng mới và độ rộng bằng độ rộng màn hình. |
contents | Làm cho thẻ chứa nó biến mất, và phần tử con của phần tử này nâng lên 1 cấp trong cấu trúc DOM |
flex | Hiển thị phần tử theo dạng block flex. |
grid | Hiển thị phần tử theo dạng block grid. |
inline-block | Hiển thị phần tử dạng inline nhưng định dạng như block. Có thể css với thuộc tính width, height . |
inline-flex | Hiển thị phần tử dạng inline nhưng định dạng như block flex. |
inline-grid | Hiển thị phần tử dạng inline nhưng định dạng như block grid. |
inline-table | Hiển thị phần tử dạng inline nhưng định dạng như block table. |
list-item | Để phần tử hoạt động như phần tử <li> |
run-in | Hiển thị một phần tử là block hoặc inline, tùy thuộc vào ngữ cảnh |
table | Để phần tử hoạt động như phần tử <table> |
table-caption | Để phần tử hoạt động như phần tử <caption> |
table-column-group | Để phần tử hoạt động như phần tử <colgroup> |
table-header-group | Để phần tử hoạt động như phần tử <thead> |
table-footer-group | Để phần tử hoạt động như phần tử <tfoot> |
table-row-group | Để phần tử hoạt động như phần tử <tbody> |
table-cell | Để phần tử hoạt động như phần tử <td> |
table-column | Để phần tử hoạt động như phần tử <col> |
table-row | Để phần tử hoạt động như phần tử <tr> |
none | Phần tử được ẩn hoàn toàn. |
initial | Thiết lập về thuộc tính display mặc định. |
inherit | Thiết lập theo thuộc tính display của phần tử cha. |