<display-inside>
Các từ khóa này chỉ định kiểu display bên trong của phần tử, định nghĩa kiểu ngữ cảnh định dạng sắp xếp nội dung của nó (giả sử đó là phần tử không phải phần tử thay thế). Các từ khóa này được dùng làm giá trị của thuộc tính display, và có thể được dùng cho mục đích kế thừa như một từ khóa đơn, hoặc như được định nghĩa trong thông số kỹ thuật Cấp 3 cùng với một giá trị từ các từ khóa <display-outside>.
Cú pháp
Các giá trị <display-inside> hợp lệ:
flow-
Phần tử sắp xếp nội dung của mình bằng bố cục dòng (bố cục khối và inline).
Nếu kiểu hiển thị ngoài của nó là
inline, và nó đang tham gia vào ngữ cảnh định dạng khối hoặc inline, thì nó tạo ra một hộp inline. Ngược lại, nó tạo ra một hộp container khối.Tùy thuộc vào giá trị của các thuộc tính khác (như
position,float, hoặcoverflow) và liệu nó có đang tham gia vào ngữ cảnh định dạng khối hoặc inline, nó hoặc thiết lập một ngữ cảnh định dạng khối (BFC) mới cho nội dung hoặc tích hợp nội dung vào ngữ cảnh định dạng của phần tử cha. flow-root-
Phần tử tạo ra một hộp phần tử khối thiết lập một ngữ cảnh định dạng khối mới, xác định nơi gốc định dạng nằm.
table-
Các phần tử này hoạt động như các phần tử HTML
<table>. Nó định nghĩa một hộp cấp khối. flex-
Phần tử hoạt động như một phần tử khối và sắp xếp nội dung của mình theo mô hình flexbox.
grid-
Phần tử hoạt động như một phần tử khối và sắp xếp nội dung của mình theo mô hình lưới.
ruby-
Phần tử hoạt động như một phần tử inline và sắp xếp nội dung của mình theo mô hình định dạng ruby. Nó hoạt động như các phần tử HTML
<ruby>tương ứng.
Note:
Các trình duyệt hỗ trợ cú pháp hai giá trị, khi chỉ tìm thấy giá trị bên trong, chẳng hạn khi display: flex hoặc display: grid được chỉ định, sẽ đặt giá trị ngoài của chúng thành block. Điều này sẽ dẫn đến hành vi như mong đợi; ví dụ nếu bạn chỉ định một phần tử là display: grid, bạn sẽ mong đợi rằng hộp được tạo ra trên container lưới sẽ là hộp cấp khối.
Cú pháp chính thức
<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby
Ví dụ
Trong ví dụ này, hộp cha đã được đặt thành display: flow-root và do đó thiết lập một BFC mới và chứa phần tử float.
HTML
<div class="box">
<div class="float">Tôi là hộp float!</div>
<p>Tôi là nội dung bên trong container.</p>
</div>
CSS
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
display: flow-root;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Display Module Level 3 # typedef-display-inside |