Атрибут видимости в CSS используется для определения видимости элемента. Вы можете использовать этот атрибут с JavaScript для создания очень сложных меню или макетов веб-страниц. Например, при выполнении некоторых тестовых вопросов на веб-странице вы можете использовать видимость. атрибут для изменения ответов на вопросы Или скрыть парсинг и отобразить его при необходимости.
Возможные значения атрибута видимости следующие:
Пример:
1.видимый
Видимое (по умолчанию) использование
Так как отображается значение свойства по умолчанию. Итак, отображаются все три маленьких квадратика.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Документ</title><style>div{width:100px ;height:100px;}.one{background-color:palegreen;}.two{background-color:palevioletred;}.three{background-color:papayawhip;</style></head><body><div> </div><div></div><div></div></body></html>Результаты запуска:
2.скрытый
Когда мы устанавливаем неотображение первого маленького прямоугольника (видимость: скрыто;), второй маленький прямоугольник по-прежнему занимает исходное положение.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Документ</title><style>div{width:100px ;height:100px;}.one{background-color:palegreen;visibility:hidden;}.two{background-color:palevioletred;}.three{background-color:papayawhip;</style></head><body ><div></div><div></div><div></div></body></html>Результаты запуска:
Примечание. После того, как видимость скрывает элемент, он продолжает занимать исходное положение.
Если скрытый элемент хочет занять исходное положение, используйтеvisibility:hidden
Если скрытый элемент не хочет занимать исходное положение, используйте display:none
3.наследовать
Пример:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Документ</title><style>.one,.two ,.three{ширина:100 пикселей;высота:100 пикселей;}.one{цвет фона:бледно-зеленый;}.two{цвет фона:бледно-зеленый;}.three{цвет фона:папайавип;}.four,.five{ширина :50px;height:50px;background-color:powderblue;</style></head><body><div><div></div></div><div><div></div>< /div><div></div></body></html>Результаты запуска:
При использовании значения атрибута наследования.
(1) Поскольку первое большое зеленое поле не отображается, маленькое синее поле в первом поле наследует скрытый атрибут большого поля и не отображается.
(2) Второе маленькое синее поле наследует атрибут отображения по умолчанию, видимый от большого розового поля, поэтому оно отображается.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Документ</title><style>.one,.two ,.three{ширина:100 пикселей;высота:100 пикселей;}.one{цвет фона:бледно-зеленый;видимость:скрытый;}.two{цвет фона:палевиолетред;}.three{цвет фона:папайавип;}.four, .five{width:50px;height:50px;background-color:powderblue;</style></head><body><div><div></div></div><div><div>< /div></div><div></div></body></html>Результаты запуска:
