CSS3: display

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Tổng quan

Thuộc tính display dùng để xác định cách thể hiện phần tử tương ứng. Trong HTML thì mặc định các giá trị của display được lấy từ những hành vi được mô tả trong các thông số kỹ thuật HTML hoặc từ CSS mặc định của trình duyệt/người dùng. Giá trị mặc định trong XML là inline.

Ngoài inline ra thì có nhiều dạng hiển thị khác nhau, trong đó giá trị none sẽ có tác dụng ẩn sự hiển thị của phần tử; khi bạn sử dụng none cho phần tử thì bản thân phần tử đó và các phần tử con trong nó sẽ bị ẩn đi, và trang web sẽ coi như nó không tồn tại.

Giá trị khởi tạo inline
Áp dụng cho Tất cả các phần tử
Tính thừa kế Không
Media Tất cả
Animatable Không

Cú pháp

display: none;

display: inline;
display: block;
display: inline-block;
display: contents;
display: list-item;
display: marker;
display: inline-list-item;
display: table;
display: inline-table;
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;
display: table-caption;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
display: run-in;

/* Các giá trị global */
display: inherit;
display: initial;
display: unset;

Ý nghĩa các giá trị

Tập giá trị Giá trị Mô tả
CSS 1 none

Ẩn phần tử (không có hiệu ứng bố cục) tương ứng; tất cả các phần tử con cũng sẽ bị ẩn, và trang web sẽ coi như những phần tử này không có sẵn.

inline Phần tử sẽ tạo ra một hoặc nhiều khối phần tử inline.
block Chuyển phần tử thành khối.
list-item Phần tử sẽ trở thành một khối nội dung và một khối inline với một danh sách các item.
CSS 2.1 inline-block Phần tử sẽ trở thành một khối và sẽ chiếm không gian theo chiều ngang các khối khác
CSS 2.1 inline-table Giá trị này không trực tiếp được ánh xạ trong HTML. Khi được áp dụng thì phần tử được coi như là một thẻ <table> trong HTML nhưng dưới dạng khối inline, và bên trong phần tử sẽ là dạng mức khối.
table Phần tử tương ứng sẽ được coi là phần tử <table>. Nó định nghĩa một hộp ở mức khối.
table-caption Phần tử tương ứng sẽ được coi là thẻ <caption> trong HTML.
table-cell Phần tử tương ứng sẽ được coi là thẻ <td>
table-column Phần tử tương ứng sẽ được coi là thẻ <col>
table-column-group Phần tử tương ứng sẽ được coi là thẻ  <colgroup>
table-footer-group Phần tử tương ứng sẽ được coi là thẻ <tfoot>
table-header-group Phần tử tương ứng sẽ được coi là thẻ <thead>
table-row Phần tử tương ứng sẽ được coi là thẻ <tr>
table-row-group Phần tử tương ứng sẽ được coi là thẻ <tbody>
CSS3 inline-list-item Biến phần tử tương ứng thành một list item. Ngoài ra, giá trị bên ngoài của list-style-position được coi là ở bên trong phần tử tương ứng. Nếu không thì phần tử sẽ hiển thị giá trị được coi là nội tuyến.
CSS3 flex Biến phần tử tương ứng thành phần tử khối và bố cục lại nội dung của nó theo mô hình flexbox (khối cong).
inline-flex Biến phần tử tương ứng thành phần tử nội tuyến và bố cục lại nội dung theo mô hình flexbox.
CSS3  grid

Biến phần tử tương ứng thành phần tử khối và bố cục lại nội dung theo mô hình grid (đa số các trình duyệt không hỗ trợ giá trị này).

inline-grid Biến phần tử tương ứng thành phần tử nội tuyến và bố cục lại nội dung theo mô hình grid.
CSS3 ruby Biến phần tử tương ứng thành phần tử nội tuyến và bố cục lại nội dung theo mô hình dạng ruby. Nó sẽ hoạt động giống với phần tử <ruby>.
ruby-base Biến phần tử tương ứng thành phần tử <rb>.
ruby-text Biến phần tử tương ứng thành phần tử <rt>.
ruby-base-container Biến phần tử tương ứng thành phần tử <rbc> và được coi là khối nặc danh.
ruby-text-container Biến phần tử tương ứng thành phần tử <rtc>.
Các giá trị thử nghiệm run-in
  • Nếu hộp run-in chứa một khối thì phần tử tương ứng được coi là khối.
  • Nếu khối nằm sau hộp run-in thì hộp run-in trở thành hộp nội tuyến đầu tiên của khối.
  • Nếu hộp nội tuyến nằm sau thì hộp run-in trở thành một hộp khối.
contents Bản thân phần tử tương ứng sẽ không tạo ra một hộp cụ thể nào, nó được thay thế bởi hộp giả và các hộp con của nó.
» Tiếp: CSS: dominant-baseline
« Trước: CSS: direction
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!