Thuộc tính CSS: Hiển thị và hiển thị

Question

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

Answer 1

Thuộc tính visibility chỉ cho trình duyệt biết có hiển thị phần tử hay không. Nó có thể nhìn thấy (visible - bạn có thể nhìn thấy nó), hoặc vô hình (hidden - bạn không thể nhìn thấy nó).

Thuộc tính display cho trình duyệt cách để vẽ và hiển thị một phần tử, nếu ở tất cả - dù đó sẽ được hiển thị như một yếu tố inline (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 yếu tố -level block (nghĩa là nó có các thuộc tính chiều cao và chiều rộng mà bạn có thể đặt, có thể nổi bật, v.v.) hoặc inline-block (tức là nó hoạt động như một hộp khối nhưng được đặt bên trong) và một số khác (list-item, table, table-row, table-cell, flex, v.v.)

Khi bạn đặt thành phần là display: block nhưng cũng đặt visibility: hidden, trình duyệt vẫn xử lý thành phần tử chặn, 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 trôi nổi giữa không trung khi trong thực tế nó đang ngồi trên 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 thành phần có display không phải là none sẽ 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: none sẽ hoạt động như thể yếu tố đó chưa bao giờ có (mặc dù nó vẫn còn trong DOM).

Answer 2

display: none xóa phần tử ra khỏi luồng của html trong khi khả năng hiển thị: ẩn không.

Answer 3

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

[EDIT] - Đã lâu rồi tôi viết ở trên và liệu tôi có đủ hiểu biết hay có một ngày tồi tệ, tôi không biết, nhưng thực tế là, yếu tố KHÔNG BAO GIỜ bị xóa khỏi Phân cấp DOM. Tất cả các hiển thị mức khối 'phong cách' 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 một không gian trực quan trong DOM.Tôi hy vọng điều này sẽ xóa mọi thứ lên

Answer 4

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

• nguyên tố này sẽ không được sơn VÀ không nhận được nhấn/chạm vào các sự kiện, nhưng không gian phải mất vẫn chiếm
• vì nó vẫn còn đó cho các mục đích bố trí, bạn có thể đo nó mà không có nó là hiển thị
• thay đổi nội dung sẽ vẫn mất 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ị trẻ con bằng cách hiển thị chúng;

display: none;

• sẽ làm cho nguyên tố này không tham gia vào dòng chảy/layout
• có thể (tùy thuộc vào trình duyệt được sử dụng) giết phim Flash và iframe (mà sẽ khởi động lại/reload trên cho thấy một lần nữa), mặc dù bạn có thể ngăn chặn điều này xảy ra với iframe
• yếu tố sẽ không chiếm bất kỳ dung lượng nào. cho các 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 sử dụng bởi yếu tố đó, gây hickups nhỏ nếu bạn chuyển đổi giữa không và một giá trị khác trong hình ảnh động

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 nạp, mặc dù họ là trong bất kỳ phần tử với visibility: hidden; hoặc hiển thị: none;
• phông chữ trong nội dung ẩn: trình duyệt webkit (Chrome/Safari) có thể trì hoãn tải phông chữ tùy chỉnh chỉ được sử dụng trong các yếu tố ẩn, bao gồm thông qua hiển thị hoặc hiển thị. Điều này có thể khiến bạn đo lường các yếu 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.