Thuộc tính hiển thị CSS
Ví dụ
Sử dụng một số giá trị hiển thị khác nhau:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính display
chỉ định hành vi hiển thị (loại hộp kết xuất) của một phần tử.
Giá trị mặc định: | nội tuyến |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | đối tượng .style.display="none" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
Lưu ý: Các giá trị "flex" và "inline-flex" yêu cầu tiền tố -webkit- để hoạt động trong Safari, phiên bản 9 trước đó.
Lưu ý: "display:contents" không hoạt động trong Edge phiên bản 79 trước đó.
Cú pháp CSS
display: value ;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect. This is default. | Demo ❯ |
block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | Demo ❯ |
contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | Demo ❯ |
flex | Displays an element as a block-level flex container | Demo ❯ |
grid | Displays an element as a block-level grid container | Demo ❯ |
inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | Demo ❯ |
inline-flex | Displays an element as an inline-level flex container | Demo ❯ |
inline-grid | Displays an element as an inline-level grid container | Demo ❯ |
inline-table | The element is displayed as an inline-level table | Demo ❯ |
list-item | Let the element behave like a <li> element | Demo ❯ |
run-in | Displays an element as either block or inline, depending on context | Demo ❯ |
table | Let the element behave like a <table> element | Demo ❯ |
table-caption | Let the element behave like a <caption> element | |
table-column-group | Let the element behave like a <colgroup> element | |
table-header-group | Let the element behave like a <thead> element | |
table-footer-group | Let the element behave like a <tfoot> element | |
table-row-group | Let the element behave like a <tbody> element | |
table-cell | Let the element behave like a <td> element | |
table-column | Let the element behave like a <col> element | |
table-row | Let the element behave like a <tr> element | |
none | The element is completely removed | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Minh họa cách sử dụng giá trị thuộc tính nội dung. Trong ví dụ sau, vùng chứa .a sẽ biến mất và làm cho các phần tử con (.b) con của phần tử này lên cấp độ tiếp theo trong DOM:
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
Hãy tự mình thử »Ví dụ
Một minh họa về cách sử dụng giá trị thuộc tính kế thừa:
body {
display: inline;
}
p {
display: inherit;
}
Hãy tự mình thử »Ví dụ
Đặt hướng của một số mục linh hoạt bên trong phần tử <div> theo thứ tự ngược lại:
div {
display: flex;
flex-direction: row-reverse;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Hiển thị và hiển thị CSS
Tham chiếu DOM HTML: thuộc tính hiển thị