Thuộc tính CSS: Hiển thị so với Hiển thị

Sự khác biệt giữa thuộc tính Hiển thị so với Hiển thị là gì?

Các visibilitytài sản duy nhất cho trình duyệt xem có nên hiển thị một yếu tố hay không. Nó có thể nhìn thấy được ( visible- bạn có thể thấy nó) hoặc vô hình (hidden - bạn không thể nhìn thấy nó).

Các displaybất động sản cho các trình duyệt như thế nào để vẽ và hiển thị một phần tử, nếu ở tất cả - dù đó sẽ được hiển thị như một inlinephần tử (tức là nó chảy với văn bản và các yếu tố nội tuyến khác) hoặc một blockyếu tố -level (tức là nó có chiều cao và chiều rộng thuộc tính bạn có thể thiết lập, nó có thể nổi trên mặt nước, vv), hoặc một inline-block(tức là nó hoạt động như một hộp khối nhưng được đặt inline thay) và một số người khác ( list-item, table, table-row, table-cell, flex, vv).

Khi bạn đặt một phần tử thành display: blockbut also được đặt visibility: hidden, trình duyệt vẫn coi nó như một phần tử khối, ngoại trừ bạn không nhìn thấy nó. Giống như cách bạn xếp một hộp màu đỏ lên trên một hộp vô hình: hộp màu đỏ trông giống như nó đang lơ lửng giữa không trung trong khi thực tế, nó nằm trên đầu một hộp vật lý mà bạn không thể nhìn thấy.

Nói cách khác, điều này có nghĩa là các phần tử displaykhông có nonesẽ vẫn ảnh hưởng đến luồng của các phần tử trong một trang, bất kể chúng có hiển thị hay không. Các hộp bao quanh một phần tử với display: nonesẽ hoạt động như thể phần tử đó chưa bao giờ ở đó (mặc dù nó vẫn nằm trong DOM).

khả năng hiển thị: ẩn;

• phần tử sẽ không được sơn VÀ không nhận được các sự kiện nhấp / chạm, nhưng không gian phần tử đó vẫn bị chiếm dụng
• bởi vì nó vẫn ở đó cho các mục đích bố trí, bạn có thể đo nó mà không bị hiển thị
• thay đổi nội dung vẫn sẽ tốn thời gian chỉnh lại / bố cục trang
• khả năng hiển thị được kế thừa, vì vậy điều này có nghĩa là bạn có thể hiển thị các con con bằng cách cho chúng khả năng hiển thị: hiển thị;

không trưng bày;

• sẽ làm cho phần tử không tham gia vào luồng / bố cục
• có thể (tùy thuộc vào trình duyệt được sử dụng) giết phim Flash và iframe (sẽ khởi động lại / tải lại khi hiển thị lại), mặc dù bạn có thể ngăn điều này xảy ra với iframe
• phần tử sẽ không chiếm bất kỳ không gian nào. vì mục đích bố trí, nó giống như nó không tồn tại
• sẽ làm cho một số trình duyệt / thiết bị (như iPad) trực tiếp lấy lại bộ nhớ được phần tử đó sử dụng, gây ra lỗi nhỏ nếu bạn chuyển đổi giữa giá trị không và giá trị khác trong khi hoạt ảnh

ghi chú thêm:

• hình ảnh trong nội dung ẩn: trong tất cả các trình duyệt phổ biến, hình ảnh vẫn được tải, mặc dù chúng nằm trong bất kỳ phần tử nào có khả năng hiển thị: ẩn; hoặc hiển thị: không có;
• phông chữ trong nội dung ẩn: trình duyệt webkit (Chrome / Safari) có thể trì hoãn việc tải phông chữ tùy chỉnh chỉ được sử dụng trong các phần tử ẩn, bao gồm thông qua khả năng hiển thị hoặc hiển thị. Điều này có thể khiến bạn đo lường các phần tử vẫn đang sử dụng phông chữ dự phòng cho đến khi phông chữ tùy chỉnh được tải.

display: none loại bỏ phần tử ra khỏi luồng html trong khi khả năng hiển thị: hidden thì không.

không trưng bày; sẽ loại bỏ phong cách trực quan / không gian vật lý của các phần tử DOM khỏi DOM, ngược lại khả năng hiển thị: hidden; sẽ không xóa phần tử, mà chỉ cần ẩn nó. Vì vậy, một div chiếm 300px không gian theo chiều dọc trong DOM của bạn sẽ VẪN chiếm 300px chiều ngang khi được đặt thành hiển thị: hidden; nhưng khi được thiết lập để hiển thị: không có; đó là phong cách trực quan và không gian mà nó chiếm được bị ẩn và không gian sau đó được "giải phóng" vì thiếu một từ hay hơn.

[EDIT] - Trước đây tôi đã viết phần trên, và việc tôi không đủ kiến ​​thức hay gặp phải một ngày tồi tệ thì tôi không biết, nhưng thực tế là, phần tử KHÔNG BAO GIỜ bị xóa khỏi hệ thống phân cấp DOM. Tất cả các 'kiểu' hiển thị ở mức khối hoàn toàn 'ẩn' khi sử dụng display: none, trong khi với khả năng hiển thị: hidden; bản thân phần tử bị ẩn nhưng nó vẫn chiếm không gian trực quan trong DOM. Tôi hy vọng điều này sẽ làm mọi thứ rõ ràng