Jaka jest różnica między visibility:collapsei display:none?
Odpowiedzi:
Krótka wersja:
Pierwsza służy do całkowitego ukrycia elementów stołu. Ten ostatni służy do całkowitego ukrycia wszystkiego innego.
Wersja długa :
visibility: collapseukrywa element całkowicie (aby nie zajmował miejsca w układzie), ale tylko wtedy, gdy element jest elementem tabeli .
Jeśli zostanie użyty na elementach innych niż elementy tabeli, visibility: collapsebędzie działać jak visibility: hidden. Dzięki temu element jest niewidoczny, ale nadal będzie zajmował miejsce w układzie.
display: nonecałkowicie ukrywa element , więc nie zajmuje miejsca w układzie, ale nie powinien być używany na elementach tabeli.
display: none;jest to, że łamie tabele przy użyciu colspani rowspan.
visibility: collapsezachowuje się dokładnie tak, jak visibility: hiddenw większości kontekstów formatowania: miejsce wymagane przez element jest „zarezerwowane” w układzie, ale sam element nie jest renderowany, pozostawiając puste miejsce w miejscu, w którym by się znajdował.
Są trzy wyjątki, o których wiem: wiersze tabeli, kolumny tabeli i elementy flex, w których visibility: collapsezachowuje się podobnie display: none, ale z jedną zasadniczą różnicą: „strut”. Możesz myśleć o strut jako o symbolu zastępczym o zerowej wielkości, który nie zajmuje własnego miejsca w procesie tworzenia układu, ale mimo to nadal jest częścią struktury formatowania i uczestniczy w obliczeniach rozmiaru.
Na przykład zwinięty wiersz tabeli nie będzie zajmować pionowej przestrzeni w tabeli, ale kolumny tabeli będą nadal wymiarowane „tak, jakby” zwinięty wiersz, a jego zawartość była rzeczywiście widoczna. Ma to na celu zapobieżenie „kołysaniu się” kolumn podczas włączania i wyłączania wierszy. Podobnie zwinięty element elastyczny nie zajmuje żadnej przestrzeni wzdłuż głównej osi, ale nadal przyczynia się do rozmiaru krzyża linii elastycznej.
„Nie używaj display: nonedo tabel” to cenna praktyczna zasada, ale nie mówi wszystkiego.
display: nonejeśli nie chcesz, aby ukryte elementy uczestniczyły w jakikolwiek sposób w procesie tworzenia tabeli (lub linii elastycznej).visibility: collapsejeśli chcesz dynamicznie wyświetlać i ukrywać elementy bez destabilizacji układu tabeli (lub linii elastycznej).Oto fragment kodu przedstawiający różnicę między wierszami tabeli display: nonei visibility: collapsedla nich:
visibility:collapsenie działa dla tabel w Safari. Okazało się, display:noneże działa dobrze w wierszach tabeli (w tym w Safari), chociaż powyższe komentarze dotyczące szerokości kolumn są poprawne
visibility:collapsepowinien być używany tylko na stołach. Na innych elementach będzie działać jako plik visibility:hidden.
visibility:hiddenukryj element, ale nadal zajmie miejsce elementu, ale display:nonenawet nie zachowa miejsca.
Zasoby :
Na ten sam temat:
display: nonenie należy używać w przypadku elementów tabeli, byłoby miłym dodatkiem.