visibilityNieruchomość w CSS ma dwie różne funkcje. Ukrywa wiersze i kolumny tabeli, a także ukrywa element bez zmiany układu.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityma cztery prawidłowych wartości: visible, hidden, collapse, i inherit. Przejdziemy przez każdy z nich, aby dowiedzieć się więcej.
widoczny
Tak jak brzmi, visiblesprawia , że rzeczy są widoczne. Nic nie jest domyślnie ukryte, więc ta wartość nic nie robi, chyba że ustawiłeś hiddento lub rodzica tego elementu.
ukryty
hidden Wartość ukrywa rzeczy. Różni się to od używania display: none, ponieważ hidden tylko wizualnie ukrywa elementy. Element wciąż tam jest i nadal zajmuje miejsce na stronie, ale nie możesz go już zobaczyć (coś w rodzaju zmiany krycia na 0). Co ciekawe, ta właściwość nie dziedziczy domyślnie. Oznacza to, że w przeciwieństwie do właściwości display lub opacity, możesz utworzyć element hiddeni nadal mieć jedno z jego elementów podrzędnych visible, na przykład:
Zauważ, że podczas ukrycia element nadrzędny nie wyzwala :hover.
zawalić się
To wpływa tylko na wiersze tabeli ( ), grupy wierszy (takie jak ), kolumny ( ), grupy kolumn ( ) lub elementy utworzone w ten sposób przez display).
W przeciwieństwie do hiddentego wartość ta ukrywa element podrzędny tabeli, bez pozostawiania miejsca, w którym się znajdował. Jeśli jest używany gdziekolwiek poza elementem podrzędnym tabeli, zachowuje się jak visibility: hidden.
Jest w tym tak wiele dziwactw, że trudno wiedzieć, od czego zacząć. Jako przystawka:
- Chrome / Safari zwinie wiersz, ale zajmowane przez niego miejsce pozostanie. A jeśli komórki tabeli w środku mają obramowanie, zostanie zwinięte w pojedynczą ramkę wzdłuż górnej krawędzi.
- Chrome / Safari nie zwinie kolumny ani grupy kolumn.
- Safari nie zwinie komórki tabeli (źle), ale Chrome nie (dobrze).
- W dowolnej przeglądarce, jeśli komórka znajduje się w zwiniętej kolumnie (niezależnie od tego, czy faktycznie jest zwijana), tekst w tej komórce nie będzie wyświetlany.
- Opera (przed WebKitem) zwali wszystko, z wyjątkiem komórki tabeli (co jest poprawne).
Jest więcej, ale w zasadzie: nigdy tego nie używaj.
dziedziczyć
Wartość domyślna. To po prostu powoduje, że element dziedziczy wartość swojego rodzica.
Flexbox
visibility: collapse; jest również używany w Flexbox i lepiej zdefiniowany.
Wsparcie przeglądarki
Podstawy, nie biorąc pod uwagę wszystkich dziwactw z upadkiem:
| Każdy | Każdy | Każdy | 4+ | 4+ | Każdy | Każdy |
IE 7- nie obsługuje collapselub inherit.