CSS Display

21/05/2019

Bài sau » « Bài trước

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ị ẩn đi.

Đ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ị ẩn đi nhưng vẫn chiếm không gian.

Đ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ử &lt;li&gt;
  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.
Bài sau » « Bài trước
Back to top