Програмно обучение: Каква е разликата между видимостта: скрито и дисплея: няма?


Отговор 1:

видимост никой все още не оставя място за елемента на страницата. Не го премахва от страницата.

дисплей никой не премахва елемента от нормалния поток на страницата, което позволява на други елементи да попълват. Той все още е достъпен чрез DOM.

Това не е пълното обяснение, но е достатъчно, за да продължите.


Отговор 2:

Използвайки дисплей: няма, ефектът ще бъде същият, както ако просто сте изтрили елемента от уеб страницата напълно.

Браузърът няма да изобрази елемента или никакви деца, въпреки че той все още ще бъде там и можете да го модифицирате с помощта на CSS или JavaScript.

Нека да разгледаме примера.

HTML:

Първо
Втори
Трети

И CSS:

.box1, .box-2, .box-3 {
    височина: 30px;
}

.box-2 {
    дисплей: няма;
}

Ако стартирате този код, ще видите, че браузърът показва първия и третия div, докато действа, сякаш вторият div изобщо не е там.

Сега вместо дисплей: няма, поставете видимостта: скрита там.

Това, което бързо ще видите, е, че има разлика между 30 пиксела между тези две кутии. Това означава, че уеб браузърът все още визуализира елемента, но той е невидим. Стои там, заема място и не е напълно елиминиран от уеб страницата, като с дисплей: няма