У чому різниця між visibility:collapseі display:none?
Відповіді:
Коротка версія:
Перший використовується для повного приховування елементів таблиці. Останній використовується, щоб повністю приховати все інше.
Довга версія :
visibility: collapseповністю приховує елемент (щоб він не займав місця в макеті), але лише тоді, коли елемент є елементом таблиці .
Якщо використовується для елементів, відмінних від елементів таблиці, visibility: collapseдіятиме як visibility: hidden. Це робить елемент невидимим, але він все одно займе місце в макеті.
display: noneШкури елемент повністю , тому вона не займає ніякого місця в макеті, але вона не повинна бути використана на елементах таблиці.
display: none;є те, що він розбиває таблиці за допомогою colspanта rowspan.
visibility: collapseповодиться точно так само, як і visibility: hiddenв більшості контекстів форматування: простір, необхідний елементу, є "зарезервованим" у макеті, але сам елемент не відображається, залишаючи порожній простір там, де він міг би бути.
Мені відомі три винятки: рядки таблиці, таблиці-стовпці та елементи гнучкості, в яких visibility: collapseповодиться як display: none, але з однією головною відмінністю: „strut”. Ви можете розглядати strut як заповнювач нульового розміру, який не вимагає власного простору в процесі макетування, але тим не менше все ще є частиною структури форматування і бере участь у обчисленнях деяких розмірів.
Наприклад, згорнутий рядок таблиці не займе жодного вертикального простору в таблиці, але стовпці таблиці все одно матимуть розмір "як би" згорнутий рядок та його вміст були фактично видимі. Це робить запобігання коливанню стовпців під час перемикання та вимикання рядків. Подібним чином, згорнутий елемент гнучкості не займає простору вздовж головної осі, але все одно сприяє збільшенню розміру лінії гнучкості.
«Не використовувати display: noneз таблицями» - це важливе правило, але воно не розповідає всієї історії.
display: noneякщо ви не хочете, щоб ваші приховані елементи як-небудь брали участь у процесі розмітки таблиці (або гнучкої лінії).visibility: collapseякщо ви хочете динамічно показувати та приховувати елементи, не дестабілізуючи макет таблиці (або гнучкого рядка).Ось фрагмент коду, що демонструє різницю між рядком таблиці display: noneта visibility: collapseдля нього:
visibility:collapseне працює для таблиць у Safari. Я виявив, display:noneщо чудово працюю з рядками таблиць (у тому числі в Safari), хоча наведені вище коментарі щодо ширини стовпців правильні
visibility:collapseслід використовувати лише на столах. В інших елементах він діятиме як a visibility:hidden.
visibility:hiddenприховати елемент, але все одно зайняти простір елемента, тоді як display:noneнавіть не збереже простір.
Ресурси:
З тієї ж теми:
display: noneне слід використовувати в елементах таблиці, було б гарним доповненням.