Sự khác biệt giữa visibility:collapsevà là display:nonegì?
Câu trả lời:
Phiên bản ngắn:
Trước đây được sử dụng để ẩn hoàn toàn các phần tử bảng. Cái sau được sử dụng để ẩn hoàn toàn mọi thứ khác.
Phiên bản dài :
visibility: collapseẩn hoàn toàn một phần tử (để nó không chiếm bất kỳ khoảng trống nào trong bố cục), nhưng chỉ khi phần tử đó là một phần tử bảng .
Nếu được sử dụng trên các phần tử khác với phần tử bảng, visibility: collapsesẽ hoạt động như thế nào visibility: hidden. Điều này làm cho một phần tử vô hình, nhưng nó vẫn sẽ chiếm không gian trong bố cục.
display: noneẩn hoàn toàn một phần tử , vì vậy nó không chiếm bất kỳ không gian nào trong bố cục, nhưng nó không nên được sử dụng trên các phần tử bảng.
display: none;là vì nó phá vỡ các bảng sử dụng colspanvà rowspan.
visibility: collapsehoạt động giống hệt như visibility: hiddentrong hầu hết các ngữ cảnh định dạng: không gian mà phần tử yêu cầu được 'dành riêng' trong bố cục, nhưng bản thân phần tử đó không được hiển thị, để lại một khoảng trống ở nơi nó sẽ có.
Có ba ngoại lệ mà tôi biết: table-row, table-column và flex item, trong đó visibility: collapsehoạt động giống như vậy display: none, nhưng với một điểm khác biệt chính: 'thanh chống'. Bạn có thể coi thanh chống như một trình giữ chỗ có kích thước bằng 0, không yêu cầu bất kỳ khoảng trống nào của riêng nó trong quá trình bố trí, nhưng vẫn là một phần của cấu trúc định dạng và tham gia vào một số tính toán kích thước.
Ví dụ: một hàng trong bảng được thu gọn sẽ không chiếm bất kỳ không gian dọc nào trong bảng, nhưng các cột trong bảng sẽ vẫn được ghi kích thước 'như thể' hàng được thu gọn và nội dung của nó thực sự hiển thị. Điều này là để ngăn các cột 'lung lay' khi các hàng được chuyển vào và chuyển ra. Tương tự như vậy, một mục flex thu gọn không chiếm bất kỳ khoảng trống nào dọc theo trục chính, nhưng vẫn góp phần vào kích thước chéo của đường flex.
'Không sử dụng display: nonevới bảng' là một quy tắc ngón tay cái có giá trị, nhưng nó không nói lên toàn bộ câu chuyện.
display: nonenếu bạn không muốn các phần tử ẩn của mình tham gia vào bất kỳ cách nào trong quá trình bố trí bảng (hoặc dòng flex).visibility: collapsenếu bạn muốn tự động hiển thị và ẩn các phần tử mà không làm mất ổn định bố cục bảng (hoặc dòng flex).Đây là đoạn mã thể hiện sự khác biệt giữa display: nonevà visibility: collapsecho một hàng trong bảng:
visibility:collapsekhông hoạt động cho các bảng trong Safari. Tôi thấy display:noneđể làm việc tốt trên các hàng bảng (bao gồm trong Safari) mặc dù các ý kiến trên về cột chiều rộng là chính xác
visibility:collapsechỉ nên được sử dụng trên bảng. Trên các phần tử khác, nó sẽ hoạt động như một visibility:hidden.
visibility:hiddenẩn phần tử nhưng vẫn lấy không gian của phần tử trong khi display:nonethậm chí sẽ không giữ khoảng trống.
Tài nguyên :
Về chủ đề tương tự:
display: nonekhông nên được sử dụng trên các phần tử bảng sẽ là một bổ sung tốt.