<display-box>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Các từ khóa này xác định liệu một phần tử có tạo ra hộp hiển thị hay không.
Cú pháp
Các giá trị <display-box> hợp lệ:
contents-
Các phần tử này không tự tạo ra hộp cụ thể. Chúng được thay thế bởi hộp giả và các hộp con của chúng. Lưu ý rằng thông số kỹ thuật CSS Display Cấp 3 định nghĩa cách giá trị
contentsảnh hưởng đến các "phần tử bất thường" — những phần tử không được hiển thị thuần túy bằng các khái niệm hộp CSS như các phần tử thay thế. Xem Phụ lục B: Tác động của display: contents trên các phần tử bất thường để biết thêm chi tiết.Do một lỗi trong các trình duyệt, hiện tại điều này sẽ loại bỏ phần tử khỏi cây trợ năng — trình đọc màn hình sẽ không nhìn vào nội dung bên trong. Xem phần Trợ năng bên dưới để biết thêm chi tiết.
none-
Tắt hiển thị của một phần tử để nó không có tác động đến bố cục (tài liệu được hiển thị như thể phần tử không tồn tại). Tất cả các phần tử con cũng bị tắt hiển thị. Để một phần tử chiếm không gian mà nó thường chiếm, nhưng không thực sự hiển thị bất cứ điều gì, hãy dùng thuộc tính
visibilitythay thế.
Trợ năng
Các triển khai hiện tại trong hầu hết các trình duyệt sẽ loại bỏ khỏi cây trợ năng bất kỳ phần tử nào có giá trị display là contents. Điều này sẽ khiến phần tử — và trong một số phiên bản trình duyệt, các phần tử con của nó — không còn được công nghệ đọc màn hình thông báo. Đây là hành vi không đúng theo thông số kỹ thuật CSSWG.
Cú pháp chính thức
<display-box> =
contents |
none
Ví dụ
Trong ví dụ đầu tiên này, đoạn văn có class secret được đặt thành display: none; hộp và bất kỳ nội dung nào bây giờ không được hiển thị.
display: none
HTML
<p>Văn bản hiển thị</p>
<p class="secret">Văn bản ẩn</p>
CSS
p.secret {
display: none;
}
Kết quả
display: contents
Trong ví dụ này, phần tử <div> ngoài có đường viền đỏ 2 pixel và chiều rộng 300px. Tuy nhiên, nó cũng có display: contents được chỉ định, do đó <div> này sẽ không được hiển thị, đường viền và chiều rộng sẽ không còn áp dụng, và phần tử con sẽ được hiển thị như thể phần tử cha chưa bao giờ tồn tại.
HTML
<div class="outer">
<div>Div trong.</div>
</div>
CSS
.outer {
border: 2px solid red;
width: 300px;
display: contents;
}
.outer > div {
border: 1px solid green;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Display Module Level 3 # valdef-display-contents |