CSS3: display
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 |
|
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ó. |
Giải phóng thời gian, khai phóng năng lực