visibilityСвойство в CSS имеет две различные функции. Он скрывает строки и столбцы таблицы, а также скрывает элемент без изменения макета.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityимеет четыре действительных значений: visible, hidden, collapse, и inherit. Мы пройдемся по каждому из них, чтобы узнать больше.
видимый
Как это звучит, visibleделает вещи видимыми. По умолчанию ничего не скрыто, поэтому это значение ничего не делает, если вы не установили hiddenдля этого или родителя этого элемента.
скрытый
hidden Значение скрывает вещи. Это отличается от использования display: none, потому что hidden скрывает элементы только визуально. Элемент все еще здесь и по-прежнему занимает место на странице, но вы его больше не видите (вроде как установка непрозрачности на 0). Интересно, что это свойство не наследуется по умолчанию. Это означает, что, в отличие от свойств display или opacity, вы можете создать элемент hiddenи по-прежнему иметь один из его дочерних элементов visible, например:
Обратите внимание, что родительский элемент, будучи скрытым, не запускает :hover.
крах
Это влияет только на строки таблицы ( ), группы строк (например, ), столбцы ( ), группы столбцов ( ) или элементы, созданные таким образом через display).
В отличие от hiddenэтого, это значение скрывает подэлемент таблицы, не оставляя места, где он был. Если используется где-нибудь, но не на подэлементе таблицы, он действует как visibility: hidden.
В этом так много причуд, что трудно понять, с чего начать. Как закуска:
- Chrome / Safari свернет строку, но занимаемое ею пространство останется. И если у ячеек таблицы внутри была граница, она свернется в единую границу по верхнему краю.
- Chrome / Safari не сворачивает столбец или группу столбцов.
- Safari сворачивает ячейку таблицы (неправильно), но Chrome нет (правильно).
- В любом браузере, если ячейка находится в свернутом столбце (независимо от того, действительно ли она сворачивается), текст в этой ячейке отображаться не будет.
- Opera (до WebKit) уничтожит все дерьмо, кроме ячейки таблицы (что верно).
Есть еще кое-что, но в основном: никогда не используйте это.
наследовать
Значение по умолчанию. Это просто заставляет элемент наследовать значение своего родителя.
Flexbox
visibility: collapse; также используется во Flexbox и более четко определен.
Поддержка браузера
Основы, не считая всех причуд с развалом:
| Любой | Любой | Любой | 4+ | 4+ | Любой | Любой |
IE 7- не поддерживает collapseили inherit.