Các thuộc tính CSS cho "hiển thị" và "mức độ hiển thị" đều cho phép bạn ẩn các thành phần trong HTML của trang, nhưng chúng khác nhau về ý nghĩa của chúng đối với hình thức và chức năng của nó. Hiển thị. hidden ẩn thẻ nhưng vẫn chiếm dung lượng và ảnh hưởng đến trang. Ngược lại, hiển thị. không loại bỏ thẻ và hiệu ứng của nó cho tất cả ý định và mục đích, nhưng thẻ vẫn hiển thị trong mã nguồn. Cả hai cách tiếp cận đều khác với việc chỉ xóa [các] mục trong câu hỏi khỏi phần đánh dấu HTML. Hãy xem xét cả hai chi tiết hơn
Hiển thị
Sử dụng khả năng hiển thị. hidden ẩn một phần tử khỏi trình duyệt; . Về cơ bản, khả năng hiển thị. ẩn làm cho phần tử ẩn đi đối với trình duyệt, nhưng nó vẫn ở nguyên vị trí và chiếm cùng một không gian nếu bạn không ẩn nó
Ví dụ: nếu bạn đặt DIV trên trang của mình và sử dụng CSS để cung cấp cho nó kích thước 100 x 100 pixel, khả năng hiển thị. hidden sẽ ẩn DIV, nhưng văn bản theo sau nó sẽ hoạt động như thể nó vẫn ở đó, tôn trọng khoảng cách 100 x 100 đó
Thuộc tính khả năng hiển thị không được sử dụng thường xuyên và chắc chắn không phải của riêng nó. Nếu bạn cũng đang sử dụng các thuộc tính CSS khác, chẳng hạn như định vị để đạt được bố cục, ban đầu, bạn có thể sử dụng khả năng hiển thị để ẩn mục đó, chỉ để hiển thị mục đó khi di chuột. Đó chỉ là một cách sử dụng khả dĩ của thuộc tính này, nhưng một lần nữa, việc sử dụng nó không thường xuyên
Trưng bày
Không giống như thuộc tính khả năng hiển thị, để lại một phần tử trong luồng tài liệu thông thường, hiển thị. về cơ bản không loại bỏ hoàn toàn phần tử khỏi tài liệu. Phần tử được đính kèm không chiếm bất kỳ dung lượng nào, mặc dù nó vẫn nằm trong mã nguồn. Đối với trình duyệt, mục này đã biến mất. Điều này có thể hữu ích;
Kiểm tra một trang là cách sử dụng phổ biến để hiển thị. không ai. Nếu bạn cần một khu vực biến mất một chút trong khi kiểm tra các khu vực khác của trang, hãy hiển thị. không ai hoàn thành công việc
Bác nào dùng tag test thì nhớ gỡ màn hình ra. không có thẻ nào trước khi khởi chạy trang web. Công cụ tìm kiếm và trình đọc màn hình không nhìn thấy các mục được gắn thẻ như thế này, mặc dù chúng vẫn nằm trong phần đánh dấu HTML. Trước đây, đây là một phương pháp mũ đen để tác động đến thứ hạng của công cụ tìm kiếm, vì vậy các mục không được hiển thị hiện là cờ đỏ đối với Google và các công cụ tìm kiếm khác
Trưng bày. không tìm thấy ứng dụng thích hợp trong các kịch bản trực tiếp, mặc dù. Ví dụ: nếu bạn đang xây dựng một trang web đáp ứng, bạn có thể bao gồm các yếu tố có sẵn cho một kích thước hiển thị nhưng không có sẵn cho các kích thước khác. Bạn có thể sử dụng màn hình. none để ẩn phần tử đó, sau đó bật lại bằng truy vấn phương tiện. Đây là cách sử dụng hiển thị có thể chấp nhận được. không có vì bạn không cố gắng che giấu bất cứ điều gì vì những lý do bất chính nhưng có nhu cầu chính đáng để làm như vậy
Để biết thêm thông tin về cách sử dụng CSS, hãy xem trang lừa đảo của Lifewire
Trích dẫn bài viết này
Định dạng
mla apa chicagotrích dẫn của bạn
Kyrnin, Jennifer. "Sự khác biệt giữa" Hiển thị. Không có" và "Khả năng hiển thị. Ẩn" trong CSS. "ThinkCo. https. //www. suy nghĩ. com/display-none-vs-visibility-hidden-3466884 [truy cập ngày 4 tháng 1 năm 2023]
CSS Display Không giúp nhà phát triển ẩn phần tử với thuộc tính hiển thị được đặt thành không. Đối với phần tử có hiển thị được đặt thành không, không có hộp nào được tạo cho phần tử đó và ngay cả các phần tử con của nó có thể có hiển thị được đặt thành các giá trị khác không
cú pháp
Sau đây là cú pháp CSS display none −
Selector { display: none; }
Ví dụ
Hãy xem một ví dụ về CSS không hiển thị -
Bản thử trực tiếp
CSS Display None CSS-Display-None
đầu ra
Điều này sẽ tạo ra đầu ra sau -
Trước khi nhấp vào nút 'Ẩn màu chính' -
Sau khi nhấp vào nút 'Ẩn màu chính' -
Ví dụ
Hãy xem một ví dụ khác về CSS Display Không -
Bản thử trực tiếp
AAAAAA
BBBBBB
CCCCC DDDDD
EEEE FFFF GGGG HHHH
đầu ra
Điều này sẽ tạo ra đầu ra sau -