Ví Dụ Về Thuộc Tính Display - Học Web Chuẩn

Trang chủ » Display None Nghĩa Là Gì » Ví Dụ Về Thuộc Tính Display - Học Web Chuẩn

Có thể bạn quan tâm

Ví dụ về thuộc tính display
  • Trang chủ
  • Tham khảo
  • CSS
  • Ví dụ về thuộc tính display

Thuộc tính display

Thuộc tính display : xác định loại hiển thị của thành phần.

display: block;

Thuộc tính display: block; : Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó.

<html> <head> <style type="text/css"> span { background: red; display: block; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị block.</p> </body> </html>

Đây là ví dụ cho display sử dụng giá trị block.

display: inline;

Thuộc tính display: inline; : Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là dạng mặc định.

<html> <head> <style type="text/css"> span { background: red; display: inline; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline.</p> </body> </html>

Đây là ví dụ cho display sử dụng giá trị inline.

display: inline-block;

Thuộc tính display: inline-block; : Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến.

<html> <head> <style type="text/css"> span { background: red; display: inline-block; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline-block.</p> </body> </html>

Đây là ví dụ cho display sử dụng giá trị inline-block.

display: inline-table;

Thuộc tính display: inline-table; : Thành phần sẽ hiển thị như một khối nội tuyến, đối xử tương tự <table>, không ngắt dòng trước và sau thành phần.

<html> <head> <style type="text/css"> span { background: red; display: inline-table; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline-table.</p> </body> </html>

Đây là ví dụ cho display sử dụng giá trị inline-table.

display: list-item;

Thuộc tính display: list-item; : Thành phần sẽ hiển thị như một khối và một nội tuyến cho các điểm đánh dấu danh sách.

<html> <head> <style type="text/css"> span { background: red; display: list-item; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị list-item.</p> </body> </html>

Đây là ví dụ cho display sử dụng giá trị list-item.

display: none;

Thuộc tính display: none; : Thành phần không hiển thị.

<html> <head> <style type="text/css"> span { background: red; display: none; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị none.</p> </body> </html>

Đây là ví dụ cho display sử dụng giá trị none.

display: table;

Thuộc tính display: table; : Thành phần sẽ đối xử như một <table>, ngắt dòng trước và sau thành phần.

<html> <head> <style type="text/css"> span { background: red; display: table; } </style> </head> <body> <p>Đây là ví dụ cho <span>display</span> sử dụng giá trị table.</p> </body> </html>

Đây là ví dụ cho display sử dụng giá trị table.

display: table; display: table-caption; display: table-cell; display: table-column; display: table-column-group; display: table-footer-group; display: table-header-group; display: table-row; display: table-row-group;

Các thuộc tính display trên dùng để định nghĩa tương tự như các phần tử của table.

<html> <head> <style type="text/css"> div.table { border-collapse: collapse; display: table; width: 200px; } div.caption { display: table-caption; } div.tHead { display: table-header-group; font-weight: bold; } div.tCell { border: 1px solid #ccc; display: table-cell; } div.tRow { display: table-row; } div.tFoot { display: table-footer-group; } </style> </head> <body> <div class="table"> <div class="caption">Caption của table</div> <div class="tHead"> <div class="tCell">A1</div> <div class="tCell">A2</div> </div> <div class="tRow"> <div class="tCell">B1</div> <div class="tCell">B2</div> </div> <div class="tRow"> <div class="tCell">C1</div> <div class="tCell">C2</div> </div> <div class="tFoot"> <div class="tCell">D1</div> <div class="tCell">D2</div> </div> </div> </body> </html> Caption của table A1 A2 B1 B2 C1 C2 D1 D2

Giá trị display ở trên tương tự table sau đây:

<html> <head> <style type="text/css"> table { border-collapse: collapse; width: 200px; } table caption { text-align: left; } table th { border: 1px solid #ccc; text-align: left; } table td { border: 1px solid #ccc; } </style> </head> <body> <table> <caption>Caption của table</caption> <thead> <tr> <th>A1</th> <th>A2</th> </tr> </thead> <tr> <td>B1</td> <td>B2</td> </tr> <tr> <td>C1</td> <td>C2</td> </tr> <tfoot> <tr> <td>D1</td> <td>D2</td> </tr> </tfoot> </table> </body> </html> Caption của table
A1 A2
B1 B2
C1 C2
D1 D2

Ví dụ thuộc tính display

  • display: block;
  • display: inline;
  • display: inline-block;
  • display: inline-table;
  • display: list-item;
  • display: none;
  • display: table;
  • display: table-caption;
  • display: table-cell;
  • display: table-column;
  • display: table-column-group;
  • display: table-footer-group;
  • display: table-header-group;
  • display: table-row;
  • display: table-row-group;

Từ khóa » Display None Nghĩa Là Gì