Tất cả các phần tử HTML đều có giá trị display mặc định và có thể ghi đè bằng thuộc tính CSS Display, tương tự độ hiển thị của tất cả các phần tử được đặt là visible mặc định nhưng cũng có thể ghi đè bằng thuộc tính CSS Visibility.
Các giá trị cho thuộc tính CSS Display:
| STT | Giá trị & Mô tả |
|---|---|
| 1 | inline Hiển thị phần tử như phần tử nội tuyến (như <span>), height và width không có tác dụng. |
| 2 | block Hiển thị phần tử như phần tử khối (như <div>) và ép xuống dòng. |
| 3 | contents Làm container biến mất, các phần tử con trở thành con của phần tử cấp cao hơn trong DOM. |
| 4 | flex Hiển thị phần tử như flex container cấp khối. |
| 5 | grid Hiển thị phần tử như grid container cấp khối. |
| 6 | inline-block Hiển thị như inline-level block container. Phần tử được định dạng như inline nhưng height/width có thể áp dụng. |
| 7 | inline-flex Hiển thị như inline-level flex container. |
| 8 | inline-grid Hiển thị như inline-level grid container. |
| 9 | inline-table Phần tử hiển thị như inline-level table. |
| 10 | list-item Cho phép phần tử hoạt động như phần tử <li>. |
| 11 | run-in Hiển thị như block hoặc inline tùy ngữ cảnh. |
| 12 | table Cho phép phần tử hoạt động như <table>. |
| 13 | table-caption Cho phép phần tử hoạt động như <caption>. |
| 14 | table-column-group Cho phép phần tử hoạt động như <colgroup>. |
| 15 | table-header-group Cho phép phần tử hoạt động như <thead>. |
| 16 | table-footer-group Cho phép phần tử hoạt động như <tfoot>. |
| 17 | table-row-group Cho phép phần tử hoạt động như <tbody>. |
| 18 | table-cell Cho phép phần tử hoạt động như <td>. |
| 19 | table-column Cho phép phần tử hoạt động như <col>. |
| 20 | table-row Cho phép phần tử hoạt động như >tr<. |
| 21 | none Phần tử không được hiển thị trên trang. |
| 22 | initial Đặt thuộc tính này về giá trị mặc định. |
| 23 | inherit Định nghĩa display của phần tử lấy từ phần tử cha. |
Ví dụ CSS display inline-block:
Ví dụ
<!DOCTYPE html> <html> <head> <title>CSS Display Inline-Block</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display-Inline-Block</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
Kết quả
Các giá trị của thuộc tính CSS Visibility:
| STT | Giá trị & Mô tả |
|---|---|
| 1 | visible Mặc định, phần tử và con của nó hiển thị. |
| 2 | hidden Ẩn phần tử và con của nó, nhưng phần tử vẫn được render và chiếm diện tích. |
| 3 | collapse Chỉ dùng cho hàng bảng (<tr>), nhóm hàng (<tbody>), cột (<col>), nhóm cột (<colgroup>). Giá trị này xóa hàng/cột, diện tích sẽ có sẵn cho nội dung khác. Nếu dùng cho phần tử khác, render như 'hidden'. |
| 4 | initial Đặt visibility về giá trị mặc định. |
| 5 | inherit Chỉ định giá trị visibility được kế thừa từ phần tử cha. |
Ví dụ CSS Visibility:
Ví dụ
<!DOCTYPE html> <html> <head> <title>CSS Visibility collapse</title> <style> form ,table{ width:70%; margin: 0 auto; text-align: center; } table, th, td { border-collapse: collapse; border: 1px solid black; } thead { background-color: goldenrod; } tbody{ background-color: khaki; } tr:nth-of-type(3){ visibility: collapse; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-collapse</legend> <table> <thead> <tr><th>Tên</th><th>Khóa học</th></tr> </thead> <tbody> <tr><td>Joana</td><td>MBA</td></tr> <tr><td>Smith</td><td>B.Arc</td></tr> <tr><td>Xersus</td><td>M.Sc</td></tr> </tbody> </table> </fieldset> </form> </body> </html>
Kết quả
CSS Visibility collapse không áp dụng:
CSS Visibility collapse được áp dụng:
