В чем разница между visibility:collapseи display:none?
Ответы:
Укороченная версия:
Первый используется для полного скрытия элементов таблицы. Последний используется, чтобы полностью скрыть все остальное.
Длинная версия :
visibility: collapseскрывает элемент полностью (чтобы он не занимал места в макете), но только тогда, когда элемент является элементом таблицы .
При использовании с элементами, отличными от элементов таблицы, visibility: collapseбудет действовать как visibility: hidden. Это делает элемент невидимым, но он все равно будет занимать место в макете.
display: noneШкуры элемент полностью , поэтому она не занимает никакого места в макете, но она не должна быть использована на элементах таблицы.
display: none;, потому что он разбивает таблицы с помощью colspanи rowspan.
visibility: collapseведет себя точно так же, как и visibility: hiddenв большинстве контекстов форматирования: пространство, необходимое для элемента, «зарезервировано» в макете, но сам элемент не отображается, оставляя пустое пространство там, где он был бы.
Я знаю три исключения: строки таблицы, столбцы таблицы и гибкие элементы, в которых visibility: collapseведет себя как display: none, но с одним существенным отличием: стойка. Вы можете думать о стойке как о заполнителе нулевого размера, который не требует никакого собственного пространства в процессе макета, но, тем не менее, все еще является частью структуры форматирования и участвует в некоторых вычислениях размера.
Например, свернутая строка таблицы не будет занимать какое-либо вертикальное пространство в таблице, но столбцы таблицы все равно будут иметь размеры, как если бы свернутая строка и ее содержимое были фактически видимы. Это сделано для того, чтобы столбцы не «раскачивались» при включении и выключении строк. Точно так же свернутый гибкий элемент не занимает места вдоль главной оси, но все же способствует поперечному размеру гибкой линии.
«Не использовать display: noneс таблицами» - ценное практическое правило, но оно не раскрывает всей картины.
display: noneесли вы не хотите, чтобы ваши скрытые элементы каким-либо образом участвовали в процессе компоновки таблицы (или гибкой линии).visibility: collapse если вы хотите динамически отображать и скрывать элементы, не дестабилизируя макет таблицы (или гибкой линии).Вот фрагмент кода, демонстрирующий разницу между строкой таблицы display: noneи visibility: collapseдля нее:
visibility:collapseне работает для таблиц в Safari. Я обнаружил, display:noneчто работает нормально со строками таблицы (в том числе в Safari), хотя приведенные выше комментарии о ширине столбца верны
visibility:collapseследует использовать только на таблицах. На других элементах он будет действовать как visibility:hidden.
visibility:hiddenскрыть элемент, но по-прежнему занимать пространство элемента display:none, даже не сохраняя пространство.
Ресурсы :
По той же теме:
display: noneне следует использовать в элементах таблицы, было бы хорошим дополнением.