Thuộc tính hiển thị CSS
Thí 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;}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc displaytính chỉ định hành vi hiển thị (kiểu hộp kết xuất) của một phần tử.
Trong HTML, giá trị thuộc tính hiển thị mặc định được lấy từ các đặc tả HTML hoặc từ biểu định kiểu mặc định của trình duyệt / người dùng. Giá trị mặc định trong XML là nội tuyến, bao gồm các phần tử SVG.
| Giá trị mặc định: | ? |
|---|---|
| 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ỗ 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.
Lưu ý: "display: content" 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 | |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
| flex | Displays an element as a block-level flex container | |
| grid | Displays an element as a block-level grid container | |
| 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 | |
| inline-flex | Displays an element as an inline-level flex container | |
| inline-grid | Displays an element as an inline-level grid container | |
| inline-table | The element is displayed as an inline-level table | |
| list-item | Let the element behave like a <li> element | |
| run-in | Displays an element as either block or inline, depending on context | |
| table | Let the element behave like a <table> element | |
| 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 | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Trình diễn về 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) phần tử con của phần tử 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;
}
Thí dụ
Trình diễn về cách sử dụng giá trị thuộc tính kế thừa:
body {
display: inline;
}
p {
display: inherit;
}
Thí 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;
}
Các 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ị