Hiển thị css bên ngoài

Thuộc tính hiển thị CSS đã được nâng cấp lên cú pháp hai giá trị. Điều này sẽ cho phép chúng tôi tạo bố cục mới mà trước đây không thể thực hiện được

Thuộc tính CSS display hiện sẽ hỗ trợ cú pháp hai giá trị, chẳng hạn như display. bên ngoài bên trong , trong đó "bên ngoài" đề cập đến việc hiển thị hộp bên ngoài của phần tử và "bên trong" đề cập đến việc hiển thị hộp bên trong chứa các phần tử con của nó.

Lý lịch

Các giá trị bên trong và bên ngoài cho hiển thị không phải là một khái niệm mới. Nó luôn luôn ở đó, tuy nhiên ngầm.

Ví dụ: khi chúng tôi chỉ định hiển thị. khối , nó tạo một phần tử cấp khối bắt đầu trong một dòng mới. Tuy nhiên, khi chúng tôi chỉ định hiển thị. grid , phần tử cũng bắt đầu ở một dòng mới — điều đó có nghĩa đó cũng là phần tử cấp khối. "Bên ngoài" của phần tử là khối, trong khi các phần tử con "bên trong" nó được đặt dưới dạng lưới.

Điều tương tự cũng xảy ra khi chúng tôi sử dụng hiển thị. lưới nội tuyến . Phần tử được đặt là nội tuyến, tuy nhiên nội dung bên trong nó được bố trí dưới dạng lưới. Tất cả điều này từng xảy ra trong nội bộ, nhưng với cú pháp được nâng cấp, giờ đây chúng tôi có khả năng tự thiết lập điều này.

Cú pháp hai giá trị

Cú pháp hai giá trị rõ ràng cho phép chúng ta đặt các loại hiển thị bên ngoài và bên trong

Vì vậy hiển thị. grid có thể được viết theo cú pháp hai giá trị dưới dạng display. lưới khối . Điều này nói rõ ràng rằng màn hình "bên ngoài" là khối và màn hình "bên trong" là lưới.

Tương tự hiển thị. inline-grid có thể được viết là display. lưới nội tuyến .

Với hiển thị này trở nên mạnh mẽ hơn và sẽ cho phép chúng tôi sáng tạo hơn trong bố cục của mình.

Video dưới đây từ MDN giải thích thêm về cú pháp hai giá trị. Màn hình bên ngoài và bên trong có thể gây nhầm lẫn lúc đầu, nhưng không khó để nắm bắt

Phần này mô tả trạng thái của tài liệu này tại thời điểm xuất bản. Bạn có thể tìm thấy danh sách các ấn phẩm hiện tại của W3C và bản sửa đổi mới nhất của báo cáo kỹ thuật này trong chỉ mục báo cáo kỹ thuật của W3C tại https. //www. w3. tổ chức/TR/

Tài liệu này do Nhóm làm việc CSS xuất bản dưới dạng Dự thảo Đề xuất Ứng viên bằng cách sử dụng. Việc xuất bản dưới dạng Khuyến nghị Ứng viên không ngụ ý xác nhận bởi W3C và các Thành viên của nó. Dự thảo Đề xuất Ứng viên tích hợp các thay đổi từ Đề xuất Ứng viên trước đó mà Nhóm Công tác dự định đưa vào Bản tóm tắt Đề xuất Ứng viên tiếp theo

Đây là một tài liệu dự thảo và có thể được cập nhật, thay thế hoặc lỗi thời bởi các tài liệu khác bất cứ lúc nào. Không phù hợp để trích dẫn tài liệu này ngoài công việc đang tiến hành

Vui lòng gửi phản hồi bằng cách gửi các vấn đề trong GitHub (ưu tiên), bao gồm mã thông số “css-display” trong tiêu đề, như thế này. “[css-display] …tóm tắt nhận xét…”. Tất cả các vấn đề và nhận xét được lưu trữ. Ngoài ra, phản hồi có thể được gửi đến danh sách gửi thư công cộng (được lưu trữ) www-style@w3. tổ chức

Tài liệu này chịu sự điều chỉnh của Tài liệu quy trình W3C ngày 2 tháng 11 năm 2021

Tài liệu này được sản xuất bởi một nhóm hoạt động theo Chính sách Bằng sáng chế của W3C. W3C duy trì một danh sách công khai về bất kỳ tiết lộ bằng sáng chế nào được thực hiện liên quan đến các sản phẩm của nhóm; . Một cá nhân thực sự biết về bằng sáng chế mà cá nhân đó tin rằng có chứa phải tiết lộ thông tin theo quy định của

Đã có báo cáo triển khai sơ bộ. Các bài kiểm tra tiếp theo sẽ được thêm vào trong thời gian CR

Các tính năng sau đây có nguy cơ gặp rủi ro và có thể bị loại bỏ trong giai đoạn CR

"Có nguy cơ" là một thuật ngữ nghệ thuật của Quy trình W3C và không nhất thiết ngụ ý rằng tính năng này có nguy cơ bị loại bỏ hoặc bị trì hoãn. Điều đó có nghĩa là Nhóm làm việc tin rằng tính năng này có thể gặp khó khăn khi được triển khai tương tác kịp thời và việc đánh dấu tính năng đó như vậy sẽ cho phép Nhóm làm việc loại bỏ tính năng này nếu cần khi chuyển sang giai đoạn Đề xuất Đề xuất mà không cần phải xuất bản một Bản ghi Ứng viên mới mà không cần

1. Giới thiệu

Phần này là tiêu chuẩn

CSS lấy một tài liệu nguồn được tổ chức dưới dạng cây gồm các phần tử (có thể chứa kết hợp các nút khác và ) và các nút văn bản (có thể chứa văn bản) và hiển thị tài liệu đó trên màn hình, một mẩu giấy hoặc luồng âm thanh của bạn. Mặc dù bất kỳ tài liệu nguồn nào như vậy đều có thể được hiển thị bằng CSS, loại được sử dụng phổ biến nhất là DOM. (Một số loại cây phức tạp hơn này có thể có các loại nút bổ sung, chẳng hạn như các nút nhận xét trong DOM. Đối với mục đích của CSS, tất cả các loại nút bổ sung này đều bị bỏ qua, như thể chúng không tồn tại. )

Để làm điều này, nó tạo ra một cấu trúc trung gian, cây hộp, đại diện cho cấu trúc định dạng của tài liệu được hiển thị. Mỗi hộp trong cây đại diện cho (hoặc ) tương ứng của nó trong không gian và/hoặc thời gian trên canvas, trong khi mỗi văn bản chạy trong cây hộp cũng đại diện cho nội dung tương ứng của nó.

Để tạo , CSS trước tiên sử dụng xếp tầng và kế thừa, để gán một thuộc tính for cho từng thuộc tính CSS cho mỗi và trong cây nguồn. (Nhìn thấy. )

Sau đó, đối với mỗi , CSS tạo ra 0 hoặc nhiều hơn như được chỉ định bởi thuộc tính của phần tử đó. Thông thường, một phần tử tạo ra một hộp duy nhất, hộp , đại diện cho chính nó và chứa nội dung của nó trong. Tuy nhiên, một số giá trị hiển thị (e. g. trưng bày. list-item) tạo ra nhiều hơn một hộp (e. g. một và một đứa trẻ). Và một số giá trị (chẳng hạn như hoặc ) khiến phần tử và/hoặc phần tử con của nó hoàn toàn không tạo ra bất kỳ hộp nào. Các hộp thường được gọi theo kiểu hiển thị của chúng—e. g. một hộp được tạo bởi một phần tử có hiển thị. khối được gọi là “hộp khối” hay chỉ là “khối”

A được gán các kiểu giống như kiểu tạo của nó, trừ khi có chỉ định khác. Nói chung, được gán cho , sau đó kế thừa qua cây hộp cho bất kỳ hộp nào khác được tạo bởi cùng một phần tử. Các thuộc tính không được kế thừa mặc định áp dụng cho hộp chính, nhưng khi phần tử tạo nhiều hộp, đôi khi được xác định để áp dụng cho một hộp khác. ví dụ: các thuộc tính được áp dụng cho phần tử bảng được áp dụng cho phần tử của nó, không phải cho phần tử chính của nó. Nếu quy trình tính toán giá trị làm thay đổi kiểu của các hộp đó và kiểu của phần tử được yêu cầu (chẳng hạn như đến

  
...div>
div>

0), thì phần tử phản ánh, đối với từng thuộc tính, giá trị từ hộp mà thuộc tính đó được áp dụng

Tương tự, mỗi chuỗi anh chị em liền kề tạo ra một chứa nội dung văn bản của chúng, được gán cùng kiểu với các nút văn bản tạo. Tuy nhiên, nếu trình tự không chứa văn bản, nó sẽ không tạo ra một văn bản chạy

Khi xây dựng cây hộp, các hộp được tạo bởi một phần tử là hậu duệ của hộp chính của bất kỳ phần tử tổ tiên nào. Trong trường hợp chung, hộp cha trực tiếp của một phần tử là hộp chính của phần tử tổ tiên gần nhất của nó tạo ra một ;

Hộp ẩn danh là hộp không được liên kết với bất kỳ phần tử nào. được tạo trong một số trường hợp nhất định để khắc phục khi nó yêu cầu một cấu trúc lồng nhau cụ thể không được cung cấp bởi các hộp được tạo từ. Ví dụ: a yêu cầu một loại hộp cha cụ thể (the ) và sẽ tạo ra một ẩn danh xung quanh chính nó nếu cha mẹ của nó không phải là một. (Nhìn thấy §. ) Không giống như các hộp do phần tử tạo ra, có kiểu kế thừa hoàn toàn thông qua cây phần tử, các hộp ẩn danh (chỉ tồn tại trong cây hộp) thông qua nguồn gốc cây hộp của chúng

Trong quá trình bố trí, và có thể được chia thành nhiều. Điều này xảy ra, ví dụ, khi một dòng và/hoặc văn bản bị ngắt giữa các dòng hoặc khi một dòng bị ngắt giữa các trang hoặc cột, trong một quy trình được gọi là. Nó cũng có thể xảy ra do sắp xếp lại thứ tự của văn bản (xem trong ) hoặc chia hộp cấp cao hơn, ví dụ:. g. (xem ) hoặc tách (xem ). Do đó, một hộp bao gồm một hoặc nhiều và một dòng văn bản bao gồm một hoặc nhiều đoạn văn bản. Xem để biết thêm thông tin về phân mảnh

Ghi chú. Nhiều thông số kỹ thuật CSS đã được viết trước khi thuật ngữ này được giải quyết hoặc đề cập đến những thứ không chính xác, vì vậy hãy thận trọng khi xem các thông số kỹ thuật cũ hơn khi chúng sử dụng các thuật ngữ này. Có thể suy ra từ ngữ cảnh thuật ngữ thực sự có nghĩa là gì. Xin vui lòng trong thông số kỹ thuật khi bạn tìm thấy chúng, để chúng có thể được sửa chữa

Ghi chú. Thông tin thêm về cây hộp “âm thanh” và tương tác của nó với thuộc tính có thể được tìm thấy trong.

1. 1. Tương tác mô-đun

Mô-đun này thay thế và mở rộng định nghĩa về thuộc tính được xác định trong phần 9. 2. 4

Không có thuộc tính nào trong mô-đun này áp dụng cho các phần tử giả

  
...div>
div>

1 hoặc

  
...div>
div>

2

1. 2. Định nghĩa giá trị

Thông số kỹ thuật này tuân theo from bằng cách sử dụng from. Các loại giá trị không được xác định trong thông số kỹ thuật này được xác định trong Giá trị & Đơn vị CSS [CSS-VALUES-3]. Việc kết hợp với các mô-đun CSS khác có thể mở rộng định nghĩa của các loại giá trị này

Ngoài các giá trị dành riêng cho thuộc tính được liệt kê trong định nghĩa của chúng, tất cả các thuộc tính được xác định trong thông số kỹ thuật này cũng chấp nhận giá trị thuộc tính của chúng. Để dễ đọc, chúng chưa được lặp lại một cách rõ ràng

2. Chế độ bố trí hộp. bất động sản

Tác nhân người dùng dự kiến ​​sẽ hỗ trợ thuộc tính này trên tất cả các phương tiện, kể cả phương tiện không trực quan. Thuộc tính xác định kiểu hiển thị của phần tử, bao gồm hai phẩm chất cơ bản về cách phần tử tạo hộp

• loại hiển thị bên trong, xác định (nếu là a ) loại mà nó tạo ra, chỉ ra cách các hộp con cháu của nó được bố trí. (Hiển thị bên trong của phần tử được thay thế nằm ngoài phạm vi của CSS. )

• loại hiển thị bên ngoài, chỉ ra cách chính nó tham gia vào

không có

Một số giá trị có tác dụng phụ bổ sung. chẳng hạn như , cũng tạo ra một phần tử giả và , khiến toàn bộ cây con của phần tử bị loại khỏi cây hộp

Thuộc tính không ảnh hưởng đến ngữ nghĩa của một phần tử. chúng được xác định bởi và không bị ảnh hưởng bởi CSS. Ngoài giá trị, cũng ảnh hưởng đến đầu ra âm thanh/lời nói và tính tương tác của một phần tử và hậu duệ của nó, thuộc tính hiển thị chỉ ảnh hưởng đến bố cục trực quan. mục đích của nó là cho phép các nhà thiết kế tự do thay đổi hành vi bố cục của một phần tử mà không ảnh hưởng đến ngữ nghĩa tài liệu cơ bản

Các giá trị được xác định như sau

  = block | inline | run-in
   = flow | flow-root | table | flex | grid | ruby
 = ? && [ flow | flow-root ]? && list-item
 = table-row-group | table-header-group |
                     table-footer-group | table-row | table-cell |
                     table-column-group | table-column | table-caption |
                     ruby-base | ruby-text | ruby-base-container |
                     ruby-text-container
      = contents | none
   = inline-block | inline-table | inline-flex | inline-grid

Bảng thông tin sau đây tóm tắt các giá trị của

Ghi chú. Tuân theo các quy tắc ưu tiên “tương thích ngược nhất, sau đó là ngắn nhất”, tuần tự hóa các giá trị tương đương sử dụng cột “Hiển thị ngắn”.

2. 1. Vai trò hiển thị bên ngoài cho Bố cục luồng. , , và từ khóa

Các từ khóa chỉ định phần tử, về cơ bản vai trò của nó trong. Chúng được định nghĩa như sau

blockPhần tử tạo ra một hộp ở cấp độ khối khi được đặt trong. inlinePhần tử tạo ra một hộp ở cấp độ nội tuyến khi được đặt trong. run-inPhần tử tạo ra một , là một loại có hành vi đặc biệt cố gắng hợp nhất nó vào một khối chứa tiếp theo. Xem để biết chi tiết

Ghi chú. làm ảnh hưởng

Nếu một giá trị được chỉ định nhưng bị bỏ qua, phần tử sẽ mặc định là

Các từ khóa chỉ định của phần tử, xác định loại bối cảnh định dạng trình bày nội dung của nó (giả sử đó là một). Chúng được định nghĩa như sau

lưu lượng Phần tử trình bày nội dung của nó bằng cách sử dụng bố cục luồng (bố cục khối và nội tuyến)

Nếu nó là hoặc và nó đang tham gia vào ngữ cảnh định dạng hoặc, thì nó sẽ tạo ra một

Nếu không, nó tạo ra một hộp

Tùy thuộc vào giá trị của các thuộc tính khác (chẳng hạn như , hoặc ) và liệu bản thân nó có tham gia vào một khối hay nội tuyến hay không, nó sẽ thiết lập một nội dung mới cho nội dung của nó hoặc tích hợp nội dung của nó vào ngữ cảnh định dạng gốc của nó. Xem CSS2. 1 chương 9. A thiết lập bối cảnh định dạng khối mới được coi là đã sử dụng

flow-rootPhần tử tạo ra một hộp và trình bày nội dung của nó bằng cách sử dụng. Nó luôn thiết lập một cái mới cho nội dung của nó. bảngPhần tử tạo một hiệu trưởng thiết lập một và chứa một phần tử được tạo bổ sung để thiết lập bối cảnh định dạng bảng. flexThe phần tử tạo ra một hộp chính và thiết lập một. gridPhần tử tạo ra một hộp chính và thiết lập một.

(Lưới sử dụng có thể không tạo mới; xem để biết chi tiết. )

rubyPhần tử tạo một hộp và thiết lập một ngoài việc tích hợp nội dung cấp cơ sở của nó vào cha của nó (nếu nó là nội tuyến) hoặc tạo một hộp bao bọc thích hợp (nếu không).

Nếu một giá trị được chỉ định nhưng bị bỏ qua, thì giá trị mặc định của phần tử là —ngoại trừ cho , giá trị này mặc định là

2. 3. Tạo hộp đánh dấu. từ khóa

Từ khóa list-item làm cho phần tử tạo phần tử giả với nội dung được chỉ định bởi các thuộc tính của nó () cùng với một hộp chính thuộc loại được chỉ định cho nội dung của chính nó

Nếu không có giá trị nào được chỉ định, kiểu hiển thị bên trong của hộp chính sẽ mặc định là. Nếu không có giá trị nào được chỉ định, loại hiển thị bên ngoài của hộp chính sẽ mặc định là

Ghi chú. Ở cấp độ này, như bị hạn chế trong ngữ pháp, các mục danh sách được giới hạn ở các loại hiển thị (// với / các loại bên trong). Hạn chế này có thể được nới lỏng ở cấp độ tương lai của mô-đun này

2. 4. Bố cục-Các loại hiển thị bên trong. từ khóa table-* và ruby-*

Một số mô hình bố cục, chẳng hạn như và , có cấu trúc bên trong phức tạp, với một số vai trò khác nhau mà con cái và con cháu của chúng có thể đảm nhận. Phần này xác định các giá trị “bố cục bên trong”, chỉ có ý nghĩa trong chế độ bố cục cụ thể đó

Trừ khi có quy định khác, cả phần tử the và of sử dụng các giá trị này đều được đặt thành từ khóa đã cho

Khi thuộc tính của một tính toán thành một trong các giá trị, nó được xử lý là có giá trị được sử dụng là. Thu gọn khoảng trắng và tạo hộp ẩn danh phải xảy ra xung quanh các phần tử được thay thế đó dựa trên giá trị nội tuyến đó, như thể chúng chưa bao giờ được áp dụng giá trị hiển thị bên trong bố cục cho chúng

Tác giả không nên gán giá trị hiển thị cho

Các từ khóa được xác định như sau

table-row-group, , , table-row, table-cell, table-column-group, table-column Phần tử là một phần tử bảng bên trong. Nó tạo hộp bảng nội bộ thích hợp tham gia vào ngữ cảnh định dạng bảng. Nhìn thấy

hộp có một

chú thích bảng Phần tử tạo hộp chú thích bảng, đây là một hành vi đặc biệt đối với bảng và hộp bao bọc bảng. Nhìn thấy

hộp có một

ruby-base, rwby-text, ruby-base-container, ruby-text-contains Phần tử này là phần tử ruby ​​bên trong. Nó tạo hộp ruby ​​​​nội bộ thích hợp tham gia vào một.

và có một

Các hộp có kiểu hiển thị dành riêng cho bố cục sẽ tạo ra các hộp bao bọc ẩn danh xung quanh chúng khi được đặt trong phần chính không tương thích, như được xác định bởi các thông số kỹ thuật tương ứng của chúng

Ví dụ: Bố cục bảng yêu cầu một hộp phải có hộp cha

Nếu nó bị sai lệch, như vậy

  
...div>
div>

Nó sẽ tạo ra các hộp bao quanh chính nó, tạo ra một cấu trúc như

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

Ngay cả khi cha mẹ là khác, nếu nó không đúng, các hộp bao bọc sẽ được tạo. Ví dụ, trong đánh dấu sau

  

    
...div>
  div>
div>

Tạo hộp bao bọc ẩn danh sẽ tạo ra

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

"Bản sửa lỗi" này đảm bảo rằng bố cục bảng có cấu trúc có thể dự đoán được để hoạt động trên

2. 5. thế hệ hộp. và từ khóa

Mặc dù có thể kiểm soát các loại hộp mà một phần tử sẽ tạo, nhưng nó cũng có thể kiểm soát liệu một phần tử có tạo ra bất kỳ hộp nào không

Các từ khóa được xác định như sau

nội dung Bản thân phần tử không tạo ra bất kỳ hộp nào, nhưng phần tử con và phần tử giả của nó vẫn tạo ra và như bình thường. Đối với mục đích tạo hộp và bố cục, phần tử phải được xử lý như thể nó đã được thay thế bằng nội dung của nó (bao gồm cả phần tử con của tài liệu nguồn và phần tử giả của nó, chẳng hạn như và phần tử giả, được tạo trước đó

Ghi chú. Vì chỉ cây hộp bị ảnh hưởng nên bất kỳ ngữ nghĩa nào dựa trên cây tài liệu, chẳng hạn như khớp bộ chọn, xử lý sự kiện và thuộc tính, đều không bị ảnh hưởng. Tuy nhiên, khi viết, điều này không được triển khai chính xác trong các trình duyệt chính, do đó, việc sử dụng tính năng này trên Web phải được thực hiện cẩn thận vì nó có thể ngăn các công cụ trợ năng truy cập vào ngữ nghĩa của phần tử.

Giá trị này được tính cho các phần tử được thay thế và các phần tử khác có kết xuất không hoàn toàn do CSS kiểm soát;

Ghi chú. Các phần tử được thay thế và các điều khiển biểu mẫu được xử lý đặc biệt vì chỉ loại bỏ hộp tạo riêng của phần tử là một hoạt động ít nhiều không xác định. Vì hành vi này có thể được tinh chỉnh nếu các trường hợp sử dụng (và các mô hình hiển thị chính xác hơn) phát triển, tác giả nên sử dụng thay vì hiển thị. nội dung trên các yếu tố như vậy để tương thích về phía trước

noneThe và hậu duệ của nó tạo ra không hoặc

Tương tự, nếu a được định nghĩa là hoạt động như , thì nó không tạo ra

Các phần tử có một trong hai giá trị này không có hoặc , bởi vì chúng hoàn toàn không tạo ra bất kỳ hộp nào

Ghi chú. Vì các giá trị này khiến các phần tử bị ảnh hưởng không tạo hộp, các quy tắc tạo hộp ẩn danh sẽ hoàn toàn bỏ qua các phần tử đã được loại bỏ, như thể chúng không tồn tại trong cây hộp

Tuy nhiên, các mối quan hệ dựa trên đánh dấu không bị ảnh hưởng bởi các giá trị này vì chúng chỉ là hiệu ứng thời gian hiển thị. Ví dụ: mặc dù chúng có thể ảnh hưởng đến ô bảng nào xuất hiện trong một cột, nhưng chúng không ảnh hưởng đến ô bảng nào được liên kết với một thành phần cột cụ thể. Tương tự như vậy, chúng không thể ảnh hưởng đến phần tử

  
...div>
div>

3 HTML nào được liên kết với một bảng cụ thể hoặc liệu một

  
...div>
div>

4 có được coi là gắn nhãn nội dung của một

  
...div>
div>

5 cụ thể hay không

2. 6. Giá trị hiển thị ở cấp độ nội tuyến được soạn trước

CSS cấp 2 đã sử dụng cú pháp một từ khóa cho , yêu cầu các từ khóa riêng biệt cho các biến thể cấp khối và cấp nội tuyến của cùng một chế độ bố cục. Những từ khóa ánh xạ như sau

inline-blockTính toán cho luồng gốc nội tuyến. inline-tableTính toán cho bảng nội tuyến. inline-flexTính toán cho inline flex. inline-gridTính toán cho lưới nội tuyến

Ghi chú. Mặc dù các từ khóa này và các từ tương đương của chúng tính đến cùng một giá trị, nhưng chúng vẫn khác biệt

Ghi chú. Các quy tắc tuần tự hóa

  
...div>
div>

0 sẽ luôn xuất ra các từ khóa được soạn trước này thay vì các cặp hai từ khóa tương đương do

2. 7. Chuyển đổi loại hộp tự động

Một số hiệu ứng bố cục yêu cầu khối hoặc nội tuyến của loại hộp, điều này đặt hộp thành hoặc (tương ứng). (Điều này không ảnh hưởng đến việc không tạo hộp nào cả, chẳng hạn như hoặc. ) Ngoài ra

Ghi chú. Có hai phương pháp được sử dụng để sửa các loại hộp khi một hộp không khớp với ngữ cảnh của nó. Một là chuyển đổi của of , chẳng hạn như và được mô tả ở đây. Cái khác, diễn ra trong (sau khi các giá trị được tính toán đã được xác định), là việc tạo các hộp ẩn danh trung gian, chẳng hạn như xảy ra trong , và bố cục

Một số ví dụ về sửa chữa giá trị được tính toán bao gồm

Kiểu hiển thị của phần tử gốc luôn là. Ngoài ra, a of tính toán trên phần tử gốc

3. Thứ tự hiển thị. bất động sản

Các hộp thường được hiển thị và sắp xếp theo thứ tự giống như chúng xuất hiện trong tài liệu nguồn. Trong một số , thuộc tính có thể được sử dụng để sắp xếp lại thứ tự của các hộp nhằm cố ý tạo ra sự khác biệt về thứ tự logic của các phần tử và sự sắp xếp không gian của chúng trên canvas trực quan 2D. (Nhìn thấy. )

Cụ thể, thuộc tính kiểm soát thứ tự xuất hiện hoặc xuất hiện trong vùng chứa của chúng, bằng cách gán chúng cho các nhóm thứ tự. Nó nhận một giá trị duy nhất, chỉ định mục đó thuộc về nhóm thứ tự nào

Dưới đây là ví dụ về thẻ mục danh mục có tiêu đề, ảnh và mô tả. Trong mỗi mục, nội dung tài liệu nguồn được sắp xếp hợp lý với tiêu đề đầu tiên, tiếp theo là mô tả và ảnh. Điều này cung cấp một thứ tự hợp lý để hiển thị giọng nói và trong các trình duyệt không phải CSS. Tuy nhiên, để trình bày trực quan hấp dẫn hơn, được sử dụng để kéo hình ảnh từ phần sau của nội dung lên đầu thẻ.

  
...div>
div>

2____13

Đây là tiền máy tính tốt nhất có thể mua, nếu bạn không có nhiều tiền

• Máy tính
• Màn hình
• bàn phím
• Con chuột

Một ví dụ kết xuất mã ở trên

và sắp xếp nội dung của chúng theo thứ tự tài liệu được sửa đổi theo thứ tự, bắt đầu từ nhóm thứ tự được đánh số thấp nhất và đi lên. Các mục có cùng nhóm thứ tự được sắp xếp theo thứ tự chúng xuất hiện trong tài liệu nguồn. Điều này cũng ảnh hưởng đến thứ tự vẽ, chính xác như thể / đã được sắp xếp lại trong tài liệu nguồn. Các phần tử con được định vị tuyệt đối của hộp chứa flex/grid được coi là có nhằm mục đích xác định thứ tự sơn của chúng so với các mục flex/grid

Trừ khi được chỉ định khác bởi một thông số kỹ thuật trong tương lai, thuộc tính này không có tác dụng đối với các hộp không hoặc

3. 1. Sắp xếp lại và khả năng truy cập

Thuộc tính không ảnh hưởng đến thứ tự trong phương tiện không trực quan (chẳng hạn như lời nói). Tương tự như vậy, thứ tự không ảnh hưởng đến thứ tự duyệt ngang mặc định của các chế độ điều hướng tuần tự (chẳng hạn như quay vòng qua các liên kết, xem e. g. )

Tác giả chỉ được sử dụng cho mục đích trực quan, không logic, sắp xếp lại nội dung. Biểu định kiểu sử dụng thứ tự để thực hiện sắp xếp lại logic không phù hợp

Ghi chú. Điều này là để phương tiện không trực quan và UA không phải CSS, thường trình bày nội dung tuyến tính, có thể dựa vào thứ tự nguồn hợp lý, trong khi được sử dụng để điều chỉnh thứ tự trực quan. (Vì nhận thức thị giác là hai chiều và phi tuyến tính, thứ tự thị giác mong muốn không phải lúc nào cũng logic. )

Để duy trì thứ tự dự định của tác giả trong tất cả các chế độ trình bày, các công cụ soạn thảo—bao gồm trình soạn thảo WYSIWYG cũng như các công cụ hỗ trợ soạn thảo dựa trên Web—phải sắp xếp lại nguồn tài liệu cơ bản và không được sử dụng để thực hiện sắp xếp lại trừ khi tác giả đã chỉ rõ rằng tài liệu cơ sở

Ví dụ: một công cụ có thể cung cấp cả tính năng kéo và thả để sắp xếp lại các mục linh hoạt cũng như xử lý các truy vấn phương tiện cho các bố cục thay thế trên mỗi phạm vi kích thước màn hình

Vì hầu hết thời gian, việc sắp xếp lại sẽ ảnh hưởng đến tất cả các phạm vi màn hình cũng như điều hướng và thứ tự giọng nói, công cụ sẽ thực hiện sắp xếp lại kéo và thả ở lớp DOM. Tuy nhiên, trong một số trường hợp, tác giả có thể muốn các thứ tự trực quan khác nhau trên mỗi kích thước màn hình. Công cụ có thể cung cấp chức năng này bằng cách sử dụng cùng với các truy vấn phương tiện, nhưng cũng liên kết thứ tự của kích thước màn hình nhỏ nhất với thứ tự DOM cơ bản (vì đây rất có thể là thứ tự trình bày tuyến tính hợp lý) trong khi sử dụng thứ tự để xác định thứ tự trình bày trực quan trong

Công cụ này sẽ phù hợp, trong khi một công cụ chỉ được sử dụng để xử lý sắp xếp lại kéo và thả (tuy nhiên có thể thuận tiện khi thực hiện theo cách đó) sẽ không phù hợp

Ghi chú. Tác nhân người dùng, bao gồm trình duyệt, công nghệ có thể truy cập và tiện ích mở rộng, có thể cung cấp các tính năng điều hướng không gian. Phần này không loại trừ việc tôn trọng thuộc tính khi xác định thứ tự phần tử trong các chế độ điều hướng không gian như vậy; . Nhưng trật tự không phải là thuộc tính CSS duy nhất (hoặc thậm chí là chính) cần được xem xét cho một tính năng điều hướng không gian như vậy. Một tính năng điều hướng không gian được triển khai tốt sẽ cần xem xét tất cả các tính năng bố cục của CSS giúp sửa đổi các mối quan hệ không gian

4. tàng hình. bất động sản

Thuộc tính chỉ định xem hộp có được hiển thị hay không. hộp vẫn ảnh hưởng đến bố cục. (Đặt thuộc tính thành để chặn hoàn toàn việc tạo hộp. ). Các giá trị có ý nghĩa như sau

có thể nhìn thấy Hộp được tạo có thể nhìn thấy, như bình thường. hiddenMọi hộp được tạo bởi phần tử là. Tuy nhiên, hậu duệ của phần tử có thể hiển thị nếu chúng có. thu gọn Biểu thị rằng hộp bị thu gọn, điều này có thể khiến hộp chiếm ít dung lượng hơn so với cách khác theo cách định dạng-ngữ cảnh–cụ thể. Xem và trong bố cục linh hoạt. Tuy nhiên, trong tất cả các trường hợp khác, (i. e. trừ khi có quy định khác) điều này chỉ đơn giản là tạo hộp, giống như

Ghi chú. Hiện tại, nhiều tác nhân người dùng và/hoặc công cụ trợ năng không triển khai chính xác ý nghĩa trợ năng của các phần tử hiển thị có mối quan hệ ngữ nghĩa với các phần tử, vì vậy, chẳng hạn, ẩn các phần tử cha có vai trò đặc biệt (chẳng hạn như các hàng trong bảng) trong khi để các phần tử con với . Tác giả nên tránh tạo ra những tình huống này cho đến khi tình hình công cụ được cải thiện

Các hộp vô hình không được hiển thị (như thể chúng hoàn toàn trong suốt), không thể tương tác với (và hoạt động như thể chúng có ), bị xóa khỏi điều hướng (tương tự như ) và cũng không được hiển thị thành giọng nói (ngoại trừ khi là ). Tuy nhiên, như với màn hình. nội dung, vai trò ngữ nghĩa của chúng với tư cách là vùng chứa không bị ảnh hưởng, để đảm bảo rằng bất kỳ hậu duệ nào đều được giải thích chính xác

Ghi chú. Nếu là , một hộp khác được hiển thị thành giọng nói và có thể được tương tác bằng cách sử dụng các phương thức không gian/không trực quan

Mặc dù tạm thời ẩn mọi thứ với thường là đủ, nhưng làm như vậy sẽ loại bỏ hoàn toàn các thành phần khỏi bố cục, có thể gây ra chuyển động hoặc chỉnh lại dòng không mong muốn của trang khi một thành phần bị ẩn hoặc hiển thị. thay vào đó có thể được sử dụng để giữ cho bố cục của trang ổn định khi có nội dung nào đó bị ẩn và hiển thị

Ví dụ: đây là một triển khai có thể (được đơn giản hóa có chủ ý) của phần tử "spoiler" có thể được tiết lộ bằng cách nhấp vào văn bản ẩn

  
...div>
div>

4

Ví dụ này được cố tình đơn giản hóa đáng kể. Nó thiếu một số tính năng về khả năng truy cập và trải nghiệm người dùng mà một phần tử spoiler được thiết kế tốt sẽ phải thể hiện việc sử dụng một cách rõ ràng hơn. Không sao chép mã này cho một trang web thực sự

5. Bố cục Run-In

Hộp chạy vào là hộp hợp nhất thành một khối xuất hiện sau nó, chèn chính nó vào đầu nội dung cấp độ nội tuyến của khối đó. Điều này hữu ích để định dạng tiêu đề nhỏ gọn, định nghĩa và những nội dung tương tự khác, trong đó cấu trúc DOM thích hợp là có tiêu đề trước văn xuôi sau, nhưng cách hiển thị mong muốn là tiêu đề nội tuyến bố trí với văn bản

Ví dụ: các định nghĩa từ điển thường được định dạng sao cho từ đó phù hợp với định nghĩa.

  
...div>
div>

5

Được định dạng là

  
...div>
div>

6

A hành xử chính xác như bất kỳ khác, ngoại trừ

• A với nội dung của nó
• Nếu ngay sau a là một hộp khối không thiết lập new , nó sẽ được chèn dưới dạng con trực tiếp của hộp khối đó. sau các hộp của phần tử giả của nó (nếu có), nhưng trước bất kỳ hộp nào khác được tạo bởi nội dung của khối (bao gồm cả hộp được tạo bởi phần tử giả, nếu có). Việc tạo lại cha mẹ này lặp lại nếu có thể (để lần chạy vào thực sự trở thành một phần của “đoạn văn” tiếp theo sâu nhất trong ngữ cảnh định dạng của nó, thu thập các lần chạy mới liền kề khi nó diễn ra)

  Nội dung được sửa chữa sau đó được định dạng như thể ban đầu được đặt ở đó. Lưu ý rằng chỉ bố cục bị ảnh hưởng chứ không phải thừa kế, vì thừa kế thuộc tính cho các hộp không ẩn danh chỉ dựa trên cây phần tử

• Mặt khác (nếu khối này không theo sau), một hộp khối ẩn danh được tạo xung quanh trình tự chạy vào và tất cả ngay sau nội dung cấp độ nội tuyến (tối đa, nhưng không bao gồm, trình tự chạy vào tiếp theo, nếu có

Trình tự chạy vào là một trình tự tối đa của các hộp anh chị em liên tiếp và các hộp xen vào và/hoặc ngoài luồng

Ghi chú. Tuyên bố này ngụ ý rằng các hộp nằm ngoài luồng được sửa chữa nếu chúng nằm giữa hai hộp chạy vào. Một giải pháp thay thế khác là bỏ lại các hộp nằm ngoài luồng can thiệp hoặc để các hộp nằm ngoài dòng chảy cản trở việc chạy vào của các hộp trước đó. Người thực hiện và tác giả được khuyến khích liên hệ với CSSWG nếu họ có hành vi ưa thích, vì hành vi này được chọn hơi ngẫu nhiên

Bản sửa lỗi này xảy ra trước bản sửa lỗi khối ẩn danh và hộp nội tuyến được mô tả trong và ảnh hưởng đến việc xác định các phần tử bị ảnh hưởng như thể ban đầu nằm ở vị trí cuối cùng trong cây hộp

Ghi chú. Vì phần chạy vào sớm nhất đại diện cho văn bản đầu tiên trên khối chứa nó, phần tử giả được áp dụng cho phần tử khối đó chọn chữ cái đầu tiên của phần chạy vào, thay vì chữ cái đầu tiên của nội dung của chính nó

Ghi chú. Mô hình chạy thử này hơi khác so với mô hình được đề xuất trong các phiên bản trước của

Phụ lục A. Bảng chú giải

Các thuật ngữ sau đây được định nghĩa ở đây để thuận tiện

hộp chínhKhi an tạo ra một hoặc nhiều , một trong số chúng là , chứa các hộp con của nó và nội dung được tạo, đồng thời cũng là hộp liên quan đến bất kỳ lược đồ định vị nào

Một số phần tử có thể tạo ra các hộp bổ sung ngoài hộp chính (chẳng hạn như các phần tử tạo ra một hộp đánh dấu bổ sung hoặc các phần tử tạo ra một và một bổ sung ). Các hộp bổ sung này được đặt đối với hộp chính

inline-levelNội dung tham gia vào bố cục nội tuyến. Cụ thể, hộp cấp độ nội tuyến và. cấp khốiNội dung tham gia. Cụ thể, hộp cấp khối. hộp nội tuyếnMột hộp không được thay thế có. Nội dung của hộp nội tuyến tham gia vào ngữ cảnh định dạng nội tuyến giống như chính hộp nội tuyến. inlineĐược sử dụng như một cách viết tắt hoặc khi không rõ ràng, hoặc như một tính từ có nghĩa. Cách sử dụng sau không được dùng nữa. nội tuyến nguyên tửMột hộp cấp độ nội tuyến được thay thế (chẳng hạn như hình ảnh) hoặc thiết lập ngữ cảnh định dạng mới (chẳng hạn như hoặc ) và không thể phân chia thành các dòng (as và can)

Bất kỳ hộp mức nội tuyến nào không thiết lập ngữ cảnh định dạng mới của loại hiển thị bên trong đã chỉ định

bộ chứa khối Một bộ chứa khối hoặc chỉ chứa các hộp cấp độ nội tuyến tham gia vào một hoặc chỉ chứa các hộp cấp độ khối tham gia vào một (có thể tạo các hộp khối ẩn danh để đảm bảo ràng buộc này, như được định nghĩa trong )

Một bộ chứa khối chỉ chứa nội dung ở cấp độ nội tuyến sẽ thiết lập một bộ chứa mới. Sau đó, phần tử này cũng tạo ra một phần tử bao bọc tất cả nội dung nội tuyến của nó. Lưu ý, khái niệm này thay thế hiệu quả khái niệm "phần tử nội tuyến ẩn danh" được giới thiệu trong

Bộ chứa khối thiết lập một cái mới nếu ngữ cảnh định dạng gốc của nó không phải là ngữ cảnh định dạng khối;

Ghi chú. Hộp chứa khối có thể đồng thời thiết lập ngữ cảnh định dạng khối và ngữ cảnh định dạng nội tuyến

khối hộpA đó cũng là một

Ghi chú. Không phải tất cả các hộp là hộp. ví dụ: các ô bảng không được thay thế và không được thay thế là các hộp chứa khối nhưng không phải là hộp cấp độ khối. Tương tự, không phải tất cả các hộp cấp khối đều là hộp chứa khối. các phần tử được thay thế ở cấp độ khối () và bộ chứa flex (hiển thị. flex), ví dụ, không phải là khối chứa

blockĐược sử dụng làm cách viết tắt cho , , hoặc , khi không rõ ràng. phần tử thay thếMột phần tử có nội dung nằm ngoài phạm vi của mô hình định dạng CSS, chẳng hạn như hình ảnh hoặc tài liệu được nhúng. Ví dụ: nội dung của phần tử HTML

  
...div>
div>

8 thường được thay thế bằng hình ảnh mà thuộc tính

  
...div>
div>

9 của nó chỉ định

Các yếu tố được thay thế thường có. Ví dụ: hình ảnh bitmap có chiều rộng tự nhiên và chiều cao tự nhiên được chỉ định theo đơn vị tuyệt đối (từ đó tỷ lệ tự nhiên có thể được xác định rõ ràng). Mặt khác, các đối tượng khác có thể không có bất kỳ kích thước tự nhiên nào (ví dụ: tài liệu HTML trống). Nhìn thấy

Tác nhân người dùng có thể xem xét không có bất kỳ kích thước nào nếu người ta tin rằng các kích thước đó có thể làm rò rỉ thông tin nhạy cảm cho bên thứ ba. Ví dụ: nếu tài liệu HTML thay đổi kích thước tự nhiên tùy thuộc vào số dư ngân hàng của người dùng, thì UA có thể muốn hành động như thể tài nguyên đó không có kích thước tự nhiên

Nội dung của các phần tử được thay thế không được xem xét trong mô hình định dạng CSS; . Các phần tử được thay thế luôn thiết lập một

Phần tử không được thay thế là phần tử không. e. có kết xuất được quyết định bởi mô hình CSS

chứa khốiMột hình chữ nhật tạo thành cơ sở định cỡ và định vị cho liên kết với nó. Đáng chú ý, a không phải là a (nó là hình chữ nhật), tuy nhiên nó thường được suy ra từ kích thước của hộp. Mỗi hộp được đặt một vị trí đối với khối chứa nó, nhưng nó không bị giới hạn bởi khối chứa này; . Cụm từ “khối chứa của hộp” có nghĩa là “khối chứa trong đó hộp tồn tại”, không phải khối mà nó tạo ra

Nói chung, của một hành động giống như các hộp con cháu; . Nếu các thuộc tính của khối chứa được tham chiếu, chúng sẽ tham chiếu các giá trị trên hộp đã tạo ra khối chứa. (Đối với , các giá trị được lấy từ phần tử gốc trừ khi có quy định khác. )

Xem và và để biết chi tiết

chứa chuỗi khốiMột chuỗi liên tiếp tạo thành chuỗi tổ tiên-hậu duệ thông qua mối quan hệ khối chứa. Ví dụ, một khối chứa 's là hộp nội dung của tổ tiên gần nhất của nó; . ban đầu chứa blockThe của phần tử gốc. Xem cho ; . bối cảnh định dạngA là môi trường trong đó một tập hợp các hộp có liên quan được đặt ra. Các bối cảnh định dạng khác nhau sắp xếp các hộp của chúng theo các quy tắc khác nhau. Ví dụ: a bố trí các hộp theo quy tắc, trong khi a bố trí các hộp theo quy tắc bố cục khối và nội tuyến. Ngoài ra, một số loại bối cảnh định dạng đan xen và cùng tồn tại. ví dụ: an tồn tại bên trong và tương tác với bối cảnh định dạng khối của thành phần thiết lập nó và a phủ lên bối cảnh định dạng nội tuyến mà nó tham gia

Một hộp thiết lập một khối mới hoặc tiếp tục khối chứa nó. Trong một số trường hợp, nó có thể thiết lập thêm ngữ cảnh định dạng cùng tồn tại (không độc lập) mới. Tuy nhiên, trừ khi có quy định khác, việc thiết lập ngữ cảnh định dạng mới sẽ tạo ra ngữ cảnh định dạng độc lập. Loại bối cảnh định dạng được thiết lập bởi hộp được xác định bởi. e. g. a thiết lập một cái mới, a thiết lập một cái mới và a có thể thiết lập một cái mới và/hoặc một cái mới. Xem tài sản

bối cảnh định dạng độc lậpKhi một hộp thiết lập bối cảnh định dạng độc lập (dù đó có cùng loại với bố cục chính của nó hay không), về cơ bản, nó sẽ tạo ra một môi trường bố cục độc lập mới. ngoại trừ thông qua kích thước của chính hộp, bố cục của hậu duệ của nó (nói chung) không bị ảnh hưởng bởi các quy tắc và nội dung của ngữ cảnh định dạng bên ngoài hộp và ngược lại

Ví dụ: trong một hộp nổi ảnh hưởng đến bố cục của các hộp xung quanh. Nhưng ảnh hưởng của chúng không thoát khỏi. hộp thiết lập ngữ cảnh định dạng của chúng phát triển để chứa đầy đủ chúng và các phần nổi từ bên ngoài hộp đó không được phép nhô vào và ảnh hưởng đến nội dung bên trong hộp

Một ví dụ khác, lề không sụp đổ qua các ranh giới

Loại trừ có thể ảnh hưởng đến nội dung qua các ranh giới. (Tại thời điểm viết bài này, chúng là tính năng bố cục duy nhất có thể. )

Một số thuộc tính có thể buộc một hộp thiết lập ngữ cảnh định dạng độc lập trong trường hợp thông thường nó không. Ví dụ, làm một cái hộp khiến nó cũng như. Một ví dụ khác, các giá trị nhất định của thuộc tính có thể khiến hộp thiết lập ngữ cảnh định dạng độc lập. Biến một khối thành một khối sẽ khiến nó thiết lập một ngữ cảnh định dạng độc lập;

A thiết lập một cái mới cho nội dung của nó. Trong hầu hết các trường hợp khác, việc buộc một hộp thiết lập bối cảnh định dạng độc lập là điều cấm kỵ—hoặc hộp đã thiết lập (e. g. ), hoặc không thể thiết lập bối cảnh định dạng mới hoàn toàn độc lập trên loại hộp đó (e. g. không thay thế)

khối định dạng ngữ cảnh định dạng ngữ cảnh và được xác định trong. Bối cảnh định dạng nội tuyến tồn tại bên trong (là một phần của chúng chứa) bối cảnh định dạng khối; . bố cục khối Bố cục của , được thực hiện trong một. khối định dạng ngữ cảnh gốcA thiết lập một mới. BFCAviết tắt của hoặc. Có nhiều định nghĩa không chính thức khác nhau đề cập đến các hộp chứa số float bên trong, loại trừ số float bên ngoài và ngăn chặn sự sụp đổ của lề và do đó có thể đề cập cụ thể đến một trong số. out-of-flowin-flowMột hộp là nếu nó được trích xuất từ ​​vị trí và tương tác dự kiến ​​của nó với nội dung xung quanh và được trình bày bằng cách sử dụng một mô hình khác bên ngoài luồng nội dung thông thường trong ngữ cảnh định dạng gốc của nó. Điều này xảy ra nếu hộp được thả nổi (qua ) hoặc (qua ). Một hộp là nếu nó không nằm ngoài dòng chảy

Ghi chú. Một số ngăn cản sự trôi nổi, do đó một phần tử không nhất thiết phải

Thứ tự tài liệu Thứ tự xuất hiện của các hộp hoặc nội dung trong tài liệu (có thể khác với thứ tự xuất hiện khi hiển thị). Với mục đích xác định thứ tự tương đối của các phần tử giả, thứ tự cây hộp được sử dụng, xem

Xem Chương 9 để biết định nghĩa đầy đủ hơn về các thuật ngữ này

Phụ lục B. Ảnh hưởng của các yếu tố bất thường

Phần này (hiện tại) không theo quy chuẩn

Một số phần tử không được hiển thị hoàn toàn bằng các khái niệm hộp CSS;

Phụ lục này xác định cách chúng tương tác với

Phần tử HTML

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

2______53

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

4

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

5

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

6

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

7

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

8

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

9

  

    
...div>
  div>
div>

0

  
...div>
div>

8

  

    
...div>
  div>
div>

2

  

    
...div>
  div>
div>

3

  

    
...div>
  div>
div>

4

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

1

  

    
...div>
  div>
div>

6

  

    
...div>
  div>
div>

7

tính toán để hiển thị. không ai

  
...div>
div>

4

Theo HTML, một

  
...div>
div>

4 không phải là một , vì vậy nó không có hành vi hiển thị kỳ diệu. (Do đó, nó phản ứng để hiển thị. nội dung bình thường. )

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

0

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

1

  
...div>
div>

5

Những yếu tố này không có bất kỳ hành vi đặc biệt nào;

bất kỳ phần tử HTML nào khác

Cư xử như bình thường đối với

Phần tử SVG

Phần tử

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

3 có bố cục hộp CSS (điều này bao gồm tất cả

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

3 có cha mẹ là phần tử HTML, cũng như phần tử gốc của tài liệu)

tính toán để hiển thị. không ai

Tất cả các SVG khác cũng là SVG

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

5

loại bỏ phần tử khỏi cây định dạng và nâng nội dung của nó lên để hiển thị ở vị trí của nó. Những nội dung này bao gồm nội dung shadow-DOM cho

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

5

bất kỳ phần tử SVG nào khác

tính toán để hiển thị. không ai

Mục đích ở đây là hành vi áp dụng bất cứ khi nào "bối cảnh kết xuất" bên trong phần tử khác với bối cảnh bên ngoài phần tử. Nếu các phần tử con của phần tử không phải là phần tử con hợp lệ của phần tử cha, bạn không thể đơn giản kéo chúng lên cây định dạng

Ví dụ: nội dung văn bản và các thành phần định dạng văn bản trong SVG yêu cầu bối cảnh thành phần

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

7; . Vì lý do đó, trên

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

7 ngăn hiển thị toàn bộ thành phần văn bản. Ngược lại, bất kỳ nội dung hợp lệ nào bên trong

  
...div>
div>

20 hoặc

  
...div>
div>

21 cũng là nội dung hợp lệ bên trong ngữ cảnh định dạng văn bản gốc, do đó, hành vi cẩu áp dụng cho các phần tử này

Tương tự, nếu cẩu sẽ chuyển đổi con từ (e. g. , một hình bên trong

  
...div>
div>

22 hoặc

  
...div>
div>

23) đến (e. g. , một hình dạng là con trực tiếp của

table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

3), đó là một thay đổi không hợp lệ về ngữ cảnh hiển thị. Do đó, các phần tử vùng chứa không bao giờ được kết xuất không thể được "bỏ đóng hộp" bởi

Khi một phần tử bị loại bỏ khỏi cây định dạng, thì bất kỳ thuộc tính SVG nào trên phần tử đó kiểm soát bố cục và định dạng hình ảnh đều bị bỏ qua khi hiển thị nội dung. Tuy nhiên, SVG — ánh xạ tới các thuộc tính CSS — tiếp tục ảnh hưởng đến quá trình xử lý và kế thừa giá trị ;

Yếu tố MathML

Đối với tất cả các phần tử MathML, tính toán để hiển thị. không ai

Phụ lục C. Hướng dẫn xây dựng hộp cho tác giả Spec

Phần này là hướng dẫn phi quy chuẩn cho các tác giả đặc tả

Sự nhìn nhận

Chúng tôi xin cảm ơn nhiều người đã cố gắng tách biệt các chi tiết khác nhau của việc tạo hộp trong những năm qua, đặc biệt nhất là Bert Bos, người mà nỗ lực cuối cùng với mô hình hiển thị và vai trò hiển thị đã không đi đến đâu, nhưng đã dẫn dắt chúng tôi về . 1 Chương 9 buộc một số trật tự ra khỏi sự hỗn loạn; . Những đề cập đáng trân trọng cũng dành cho David Baron, Mats Palmgren, Ilya Streltsyn và Boris Zbarsky vì phản hồi của họ

thay đổi

Những thay đổi kể từ năm 2020 Khuyến nghị ứng viên

Hiện đã có Bố trí Nhận xét kể từ Đề xuất Ứng viên ngày 19 tháng 5 năm 2020

Những thay đổi kể từ Dự thảo Đề xuất Ứng viên ngày 18 tháng 12 năm 2020 bao gồm

Những thay đổi trước đây kể từ Đề xuất Ứng viên ngày 19 tháng 5 năm 2020 chỉ bao gồm các phần làm rõ biên tập nhỏ và cải tiến liên kết ngang

Những thay đổi kể từ năm 2019 Đề xuất ứng viên

Những thay đổi kể từ Đề xuất Ứng viên ngày 11 tháng 7 năm 2019 bao gồm

Những thay đổi kể từ Đề xuất Ứng viên ngày 28 tháng 8 năm 2018 bao gồm

• Nguồn gốc cây hộp được xác định;
• Đã thêm định nghĩa vào bảng thuật ngữ;
• Đã thêm tham chiếu chéo vào các dạng phân mảnh khác nhau trong
• Đổi tên “hộp bảng” thành “hộp lưới bảng” để dễ phân biệt hơn với “hộp bao bọc bảng”
• Đã thêm “trừ khi được chỉ định khác” vào gốc → ban đầu chứa sự lan truyền khối, vì có một số ngoại lệ đặc biệt đáng tiếc đối với phần tử HTML

  
    
  ...div>
  div>
  

  25

Thay đổi trước Trạng thái Đề xuất Ứng viên

Một bố trí ý kiến ​​​​có sẵn

Những thay đổi kể từ Dự thảo làm việc ngày 20 tháng 4 năm 2018 bao gồm

Những thay đổi kể từ Dự thảo làm việc ngày 20 tháng 7 năm 2017 bao gồm

Những thay đổi kể từ Dự thảo làm việc ngày 26 tháng 1 năm 2017 bao gồm

Một bố trí ý kiến ​​​​cũng có sẵn

Những thay đổi kể từ Dự thảo làm việc ngày 15 tháng 10 năm 2015 bao gồm

• Hoãn thuộc tính ngăn chặn hộp/hiển thị hoặc không sang cấp Hiển thị tiếp theo, để cung cấp thời gian thảo luận thêm về các trường hợp sử dụng
• Đã chỉ định tác động của các phần tử bất thường, chẳng hạn như các phần tử được thay thế và điều khiển biểu mẫu
• Đã làm rõ rằng phần tử và phần tử giả vẫn tồn tại nếu hộp riêng của nó không được tạo do
• Làm rõ rằng bong bóng sự kiện không bị ảnh hưởng bởi
• Làm rõ sự tương tác của các lần chạy với các yếu tố ngoài luồng và
• Chuyển đổi và để sử dụng như của họ, vì họ luôn tạo thành một ngữ cảnh gốc định dạng
• Đã đóng các vấn đề còn lại và thêm danh sách có nguy cơ

Những thay đổi kể từ Dự thảo làm việc ngày 21 tháng 7 năm 2015 bao gồm

Những thay đổi kể từ Dự thảo làm việc ngày 11 tháng 9 năm 2014 bao gồm

• Đã loại bỏ các thuộc tính hiển thị bên trong, hiển thị bên ngoài và hiển thị bổ sung, thay vào đó chỉ tạo đa giá trị. (Điều này đã được thực hiện để áp đặt các ràng buộc đối với những gì có thể được kết hợp. Các cấp độ trong tương lai của thông số kỹ thuật này có thể nới lỏng một số hoặc tất cả các hạn chế đó nếu chúng trở nên không cần thiết hoặc không mong muốn. )
• Đã tạo bố cục luồng và để thể hiện tốt hơn và để tạo một công tắc rõ ràng để biến một phần tử thành gốc. (Điều này sẽ loại bỏ nhu cầu hack như. sau { rõ ràng. cả hai; . )

Cân nhắc về quyền riêng tư

Thông số kỹ thuật này giới thiệu không có cân nhắc mới về quyền riêng tư

Cân nhắc về Bảo mật

Thông số kỹ thuật này giới thiệu không có cân nhắc bảo mật mới

Bảng câu hỏi tự đánh giá

theo

1. Thông số kỹ thuật này có xử lý thông tin nhận dạng cá nhân không?

   Không

2. Thông số kỹ thuật này có xử lý dữ liệu có giá trị cao không?

   Không

3. Thông số kỹ thuật này có giới thiệu trạng thái mới cho nguồn gốc tồn tại trong các phiên duyệt không?

   Không

4. Thông số kỹ thuật này có hiển thị trạng thái liên tục, có nguồn gốc chéo cho web không?

   Không

5. Thông số kỹ thuật này có hiển thị bất kỳ dữ liệu nào khác cho nguồn gốc mà nó hiện không có quyền truy cập không?

   Không

6. Thông số kỹ thuật này có cho phép các cơ chế tải/thực thi tập lệnh mới không?

   Không

7. Thông số kỹ thuật này có cho phép nguồn gốc truy cập vào vị trí của người dùng không?

   Không

8. Thông số kỹ thuật này có cho phép truy cập nguồn gốc vào các cảm biến trên thiết bị của người dùng không?

   Không

9. Thông số kỹ thuật này có cho phép truy cập nguồn gốc vào các khía cạnh của môi trường máy tính cục bộ của người dùng không?

   Không

10. Thông số kỹ thuật này có cho phép truy cập nguồn gốc vào các thiết bị khác không?

    Không

11. Thông số kỹ thuật này có cho phép nguồn gốc thực hiện một số biện pháp kiểm soát đối với giao diện người dùng gốc của tác nhân người dùng không?

    Không

12. Thông số kỹ thuật này có hiển thị số nhận dạng tạm thời trên web không?

    Không

13. Thông số kỹ thuật này có phân biệt giữa hành vi trong ngữ cảnh của bên thứ nhất và bên thứ ba không?

    Không

14. Thông số kỹ thuật này nên hoạt động như thế nào trong bối cảnh chế độ "ẩn danh" của tác nhân người dùng?

    không khác nhau

15. Thông số kỹ thuật này có duy trì dữ liệu cho thiết bị cục bộ của người dùng không?

    Không

16. Thông số kỹ thuật này có phần "Cân nhắc về bảo mật" và "Cân nhắc về quyền riêng tư" không?

    Đúng

17. Thông số kỹ thuật này có cho phép hạ cấp các đặc điểm bảo mật mặc định không?

    Không

Các yêu cầu tuân thủ được thể hiện bằng sự kết hợp của các xác nhận mô tả và thuật ngữ RFC 2119. Các từ khóa “PHẢI”, “KHÔNG PHẢI”, “BẮT BUỘC”, “SẼ”, “SẼ KHÔNG”, “NÊN”, “KHÔNG NÊN”, “KHUYẾN NGHỊ”, “CÓ THỂ” và “TÙY CHỌN” trong các phần quy chuẩn . Tuy nhiên, để dễ đọc, những từ này không xuất hiện ở tất cả các chữ in hoa trong thông số kỹ thuật này

Tất cả các văn bản của đặc điểm kỹ thuật này là quy chuẩn ngoại trừ các phần được đánh dấu rõ ràng là không quy chuẩn, ví dụ và ghi chú.

Các ví dụ trong đặc điểm kỹ thuật này được giới thiệu với các từ “ví dụ” hoặc được đặt ngoài văn bản quy chuẩn bằng

  
...div>
div>

26, như thế này

Ghi chú thông tin bắt đầu bằng từ “Ghi chú” và được đặt ngoài văn bản quy phạm bằng

  
...div>
div>

27, như thế này

Lưu ý, đây là một lưu ý thông tin

Lời khuyên là các phần quy phạm được tạo kiểu để gợi lên sự chú ý đặc biệt và được tách biệt khỏi văn bản quy phạm khác với

  
...div>
div>

28, như thế này. UA PHẢI cung cấp giải pháp thay thế có thể truy cập được

Sự phù hợp với đặc điểm kỹ thuật này được xác định cho ba lớp phù hợp

biểu định kiểu. trình kết xuất Diễn giải ngữ nghĩa của biểu định kiểu và hiển thị các tài liệu sử dụng chúng. công cụ soạn thảo viết biểu định kiểu

Biểu định kiểu phù hợp với thông số kỹ thuật này nếu tất cả các câu lệnh sử dụng cú pháp được xác định trong mô-đun này đều hợp lệ theo ngữ pháp CSS chung và ngữ pháp riêng của từng tính năng được xác định trong mô-đun này

Trình kết xuất phù hợp với thông số kỹ thuật này nếu, ngoài việc diễn giải biểu định kiểu như được xác định bởi các thông số kỹ thuật phù hợp, nó hỗ trợ tất cả các tính năng được xác định bởi thông số kỹ thuật này bằng cách phân tích cú pháp chúng một cách chính xác và hiển thị tài liệu tương ứng. Tuy nhiên, việc UA không thể hiển thị chính xác tài liệu do hạn chế của thiết bị không làm cho UA không tuân thủ. (Ví dụ: không bắt buộc phải có UA để hiển thị màu trên màn hình đơn sắc. )

Một công cụ soạn thảo phù hợp với thông số kỹ thuật này nếu nó viết biểu định kiểu đúng về mặt cú pháp theo ngữ pháp CSS chung và ngữ pháp riêng của từng tính năng trong mô-đun này và đáp ứng tất cả các yêu cầu tuân thủ khác của biểu định kiểu như được mô tả trong mô-đun này

Để các tác giả có thể khai thác các quy tắc phân tích cú pháp tương thích chuyển tiếp để gán giá trị dự phòng, trình kết xuất CSS phải coi là không hợp lệ (và ) mọi quy tắc tại, thuộc tính, giá trị thuộc tính, từ khóa và các cấu trúc cú pháp khác mà chúng không có mức hỗ trợ có thể sử dụng được. Cụ thể, tác nhân người dùng không được bỏ qua có chọn lọc các giá trị thành phần không được hỗ trợ và tôn trọng các giá trị được hỗ trợ trong một khai báo thuộc tính đa giá trị. nếu bất kỳ giá trị nào được coi là không hợp lệ (vì các giá trị không được hỗ trợ phải như vậy), CSS yêu cầu bỏ qua toàn bộ phần khai báo

Để tránh xung đột với các tính năng CSS ổn định trong tương lai, CSSWG khuyến nghị triển khai các tính năng và CSS

Sau khi thông số kỹ thuật đạt đến giai đoạn Đề xuất của ứng viên, có thể triển khai phi thử nghiệm và người triển khai nên phát hành triển khai không tiền tố của bất kỳ tính năng cấp CR nào mà họ có thể chứng minh là được triển khai chính xác theo thông số kỹ thuật

Để thiết lập và duy trì khả năng tương tác của CSS trong quá trình triển khai, Nhóm làm việc CSS yêu cầu các trình kết xuất CSS không thử nghiệm gửi báo cáo triển khai (và, nếu cần, các trường hợp thử nghiệm được sử dụng cho báo cáo triển khai đó) cho W3C trước khi phát hành triển khai không có tiền tố của bất kỳ . Các trường hợp thử nghiệm được gửi tới W3C sẽ được Nhóm làm việc CSS xem xét và chỉnh sửa

Bạn có thể tìm thêm thông tin về cách gửi bản thử nghiệm và báo cáo triển khai trên trang web của Nhóm làm việc CSS tại https. //www. w3. org/Kiểu/CSS/Thử nghiệm/. Các câu hỏi nên được chuyển đến public-css-testsuite@w3. danh sách gửi thư tổ chức

Để thông số kỹ thuật này được nâng cao lên Đề xuất được đề xuất, phải có ít nhất hai triển khai độc lập, có thể tương tác của mỗi tính năng. Mỗi tính năng có thể được triển khai bởi một nhóm sản phẩm khác nhau, không có yêu cầu rằng tất cả các tính năng phải được triển khai bởi một sản phẩm duy nhất. Với mục đích của tiêu chí này, chúng tôi định nghĩa các thuật ngữ sau

mỗi triển khai độc lập phải được phát triển bởi một bên khác và không thể chia sẻ, sử dụng lại hoặc lấy từ mã được sử dụng bởi một triển khai đủ điều kiện khác. Các đoạn mã không liên quan đến việc triển khai đặc tả này được miễn yêu cầu này. có thể tương thích với nhau, vượt qua (các) trường hợp thử nghiệm tương ứng trong bộ thử nghiệm CSS chính thức hoặc, nếu việc triển khai không phải là một trình duyệt Web, thì một thử nghiệm tương đương. Mỗi thử nghiệm có liên quan trong bộ thử nghiệm phải có một thử nghiệm tương đương được tạo nếu một tác nhân người dùng (UA) như vậy sẽ được sử dụng để yêu cầu khả năng tương tác. Ngoài ra, nếu một UA như vậy được sử dụng để yêu cầu khả năng tương tác, thì phải có một hoặc nhiều UA bổ sung cũng có thể vượt qua các bài kiểm tra tương đương đó theo cách tương tự cho mục đích tương tác. Các bài kiểm tra tương đương phải được cung cấp công khai cho mục đích đánh giá ngang hàng. triển khai một tác nhân người dùng mà

1. thực hiện các đặc điểm kỹ thuật
2. có sẵn cho công chúng. Việc triển khai có thể là một sản phẩm vận chuyển hoặc phiên bản công khai khác (i. e. , phiên bản beta, bản phát hành xem trước hoặc "bản dựng hàng đêm"). Các bản phát hành sản phẩm không vận chuyển phải đã triển khai (các) tính năng trong khoảng thời gian ít nhất một tháng để chứng minh tính ổn định
3. không phải là thử nghiệm (tôi. e. , một phiên bản được thiết kế đặc biệt để vượt qua bộ thử nghiệm và không dành cho mục đích sử dụng thông thường trong tương lai)

Thông số kỹ thuật sẽ vẫn là Khuyến nghị của Ứng viên trong ít nhất sáu tháng

[CSS-ALIGN-3]Elika Etemad; . Mô-đun căn chỉnh hộp CSS cấp 3. 24 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/css-align-3/[CSS-BACKGROUNDS-3]Bert Bos; . Mô-đun Nền và Đường viền CSS Cấp độ 3. 26 tháng bảy 2021. CR. URL. https. //www. w3. org/TR/css-backgrounds-3/[CSS-BOX-4]Elika Etemad. Mô-đun mô hình hộp CSS cấp 4. 3 tháng 11 năm 2022. WD. URL. https. //www. w3. org/TR/css-box-4/[CSS-BREAK-3]Rossen Atanassov; . Mô-đun phân mảnh CSS cấp 3. 4 Tháng mười hai 2018. CR. URL. https. //www. w3. org/TR/css-break-3/[CSS-BREAK-4]Rossen Atanassov; . Mô-đun phân mảnh CSS cấp 4. 18 Tháng mười hai 2018. WD. URL. https. //www. w3. org/TR/css-break-4/[CSS-CASCADE-3]Elika Etemad; . Xếp tầng CSS và kế thừa cấp độ 3. 11 Tháng hai 2021. GHI. URL. https. //www. w3. org/TR/css-cascade-3/[CSS-CASCADE-5]Elika Etemad; . Xếp tầng CSS và kế thừa cấp độ 5. 13 tháng một 2022. CR. URL. https. //www. w3. org/TR/css-cascade-5/[CSS-CONTAIN-1]Tab Atkins Jr. ; . Mô-đun ngăn chặn CSS cấp 1. 25 tháng mười 2022. GHI. URL. https. //www. w3. org/TR/css-contain-1/[CSS-FLEXBOX-1]Tab Atkins Jr. ; . Mô-đun bố cục hộp linh hoạt CSS cấp 1. 19 Tháng mười một 2018. CR. URL. https. //www. w3. org/TR/css-flexbox-1/[CSS-GRID-1]Tab Atkins Jr. ; . Mô-đun Bố cục Lưới CSS Cấp 1. 18 Tháng mười hai 2020. CR. URL. https. //www. w3. org/TR/css-grid-1/[CSS-GRID-2]Tab Atkins Jr. ; . Mô-đun Bố cục Lưới CSS Cấp 2. 18 Tháng mười hai 2020. CR. URL. https. //www. w3. org/TR/css-grid-2/[CSS-IMAGES-3]Tab Atkins Jr. ; . Mô-đun hình ảnh CSS cấp 3. 17 Tháng mười hai 2020. CR. URL. https. //www. w3. org/TR/css-images-3/[CSS-INLINE-3]Dave Cramer; . Mô-đun Bố cục Nội tuyến CSS Cấp 3. 27 Tháng tám 2020. WD. URL. https. //www. w3. org/TR/css-inline-3/[CSS-OVERFLOW-3]David Baron; . Mô-đun tràn CSS cấp 3. 23 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/css-overflow-3/[CSS-PAGE-3]Elika Etemad; . Mô-đun phương tiện phân trang CSS cấp 3. 18 Tháng mười 2018. WD. URL. https. //www. w3. org/TR/css-page-3/[CSS-POSITION-3]Elika Etemad; . Mô-đun Bố cục Định vị CSS Cấp 3. 1 tháng chín 2022. WD. URL. https. //www. w3. org/TR/css-position-3/[CSS-PSEUDO-4]Daniel Glazman; . Mô-đun phần tử giả CSS cấp 4. 31 Tháng mười hai 2020. WD. URL. https. //www. w3. org/TR/css-pseudo-4/[CSS-RUBY-1]Elika Etemad; . Mô-đun bố cục chú thích CSS Ruby cấp 1. 2 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/css-ruby-1/[CSS-SPEECH-1]Daniel Weck. Mô-đun lời nói CSS. 10 Tháng ba 2020. CR. URL. https. //www. w3. org/TR/css-speech-1/[CSS-TABLES-3]François Remy; . Mô-đun Bảng CSS Cấp 3. 27 Tháng bảy 2019. WD. URL. https. //www. w3. org/TR/css-tables-3/[CSS-TEXT-3]Elika Etemad; . Mô-đun văn bản CSS cấp 3. 5 tháng năm 2022. CR. URL. https. //www. w3. org/TR/css-text-3/[CSS-UI-4]Florian Rivoal. Mô-đun giao diện người dùng cơ bản CSS cấp 4. 16 Tháng ba 2021. WD. URL. https. //www. w3. org/TR/css-ui-4/[CSS-VALUES-3]Tab Atkins Jr. ; . Mô-đun Đơn vị và Giá trị CSS Cấp 3. 6 Tháng sáu 2019. CR. URL. https. //www. w3. org/TR/css-values-3/[CSS-VALUES-4]Tab Atkins Jr. ; . Mô-đun Đơn vị và Giá trị CSS Cấp 4. 19 Tháng mười 2022. WD. URL. https. //www. w3. org/TR/css-values-4/[CSS2]Bert Bos; . Cascading Style Sheets Cấp 2 Sửa đổi 1 (CSS 2. 1) Thông số kỹ thuật. 7 tháng sáu 2011. GHI. URL. https. //www. w3. org/TR/CSS21/[CSSOM]Daniel Glazman; . Mô hình đối tượng CSS (CSSOM). 26 Tháng tám 2021. WD. URL. https. //www. w3. org/TR/cssom-1/[HTML]Anne van Kesteren; . Tiêu chuẩn HTML. Chất lượng cuộc sống. URL. https. //html. thông số kỹ thuật. cái gì. org/multipage/[MEDIAQUERIES-5]Dean Jackson; . Truy vấn phương tiện cấp 5. 18 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/mediaqueries-5/[RFC2119]S. Bradner. Các từ khóa để sử dụng trong RFC để chỉ ra các mức yêu cầu. tháng 3 năm 1997. Thực tiễn tốt nhất hiện tại. URL. https. // trình theo dõi dữ liệu. vietf. org/doc/html/rfc2119[SELECTORS-4]Elika Etemad; . Bộ chọn cấp 4. 7 tháng năm 2022. WD. URL. https. //www. w3. org/TR/selectors-4/[SVG2]Amelia Bellamy-Royds; . Đồ họa véc tơ có thể mở rộng (SVG) 2. 4 Tháng mười 2018. CR. URL. https. //www. w3. tổ chức/TR/SVG2/

[CSS3-EXCLUSIONS]Rossen Atanassov; . Mô-đun Loại trừ CSS Cấp 1. 15 tháng một 2015. WD. URL. https. //www. w3. org/TR/css3-exclusions/[DOM]Anne van Kesteren. Tiêu chuẩn DOM. Chất lượng cuộc sống. URL. https. // thống trị. thông số kỹ thuật. cái gì. tổ chức/

CSS hiển thị nội tuyến là gì?

Làm cách nào để xóa khối hiển thị trong CSS?

Hiển thị flex nội tuyến trong CSS là gì?

Làm cách nào để ẩn div bằng CSS?