Курс CSS. Урок 39. Видимость элементов.
Свойства visibility: и display:.
Свойства visibility: и display:.
Для того, чтобы сделать элемент невидимым используют свойства visibility (в таком виде: visibility:hidden;) и display (в таком виде: display:none;).
Обратите внимание, что эти две возможности дают разные результаты.
visibility:hidden; - (видимость:спрятан;) элемент будет спрятан, но он по-прежнему будет занимать тоже самое место, как и раньше.
display:none; - (отображать:нет;) также элемент будет спрятан, но он теперь НЕ будет занимать тоже самое место. Страница будет отображаться, как-будто данного элемента нет вообще.
Рассмотрим обе возможности на примерах.
Пример 1. visibility:hidden;
Пример 2. display:none;
Поиграйтесь кнопками справа, это позволит вам лучше почувствовать, как работают свойства visibility:hidden; и display:none;. Кстати, в реальной практике, эти свойства используются также, как и на этой страничке - в сочетании с программами на JavaScript, когда нужно быстро спрятать или показать какой-то элемент.
Теперь перейдем к теории.
Свойство visibility: может иметь два значения:
Что же касается свойства display:, то здесь возможных значений намного больше. Рассмотрим их в таблице ниже.
В примере использовали следующие правила для стилей:
В примере использовали следующий код HTML (ключевые моменты):
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_039_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_039_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Библиотеку jquery.js мы скачали заранее, еще на уроке 33...
Обратите внимание, что эти две возможности дают разные результаты.
visibility:hidden; - (видимость:спрятан;) элемент будет спрятан, но он по-прежнему будет занимать тоже самое место, как и раньше.
display:none; - (отображать:нет;) также элемент будет спрятан, но он теперь НЕ будет занимать тоже самое место. Страница будет отображаться, как-будто данного элемента нет вообще.
Рассмотрим обе возможности на примерах.
Пример 1. visibility:hidden;
Нажатие кнопки справа добавит мне свойство visibility:hidden;
Нажмите эту кнопку прямо сейчас...
Это текст в большом диве специально для того, чтобы показать обтекание этим текстом маленького дива. При нажатии кнопки обратите внимание каким образом меняется (и меняется ли вообще) расположение этого текста...
Нажмите эту кнопку прямо сейчас...
Пример 2. display:none;
Нажатие кнопки справа добавит мне свойство display:none;
Нажмите эту кнопку прямо сейчас...
Это текст в большом диве специально для того, чтобы показать обтекание этим текстом маленького дива. При нажатии кнопки обратите внимание каким образом меняется (и меняется ли вообще) расположение этого текста...
Нажмите эту кнопку прямо сейчас...
Поиграйтесь кнопками справа, это позволит вам лучше почувствовать, как работают свойства visibility:hidden; и display:none;. Кстати, в реальной практике, эти свойства используются также, как и на этой страничке - в сочетании с программами на JavaScript, когда нужно быстро спрятать или показать какой-то элемент.
Теперь перейдем к теории.
Свойство visibility: может иметь два значения:
- visibility:visible; - видимость включена, это значение по умолчанию.
- visibility:hidden; - видимость ВЫключена, элемент спрятан, см пример 1 выше, как работает это свойство.
Что же касается свойства display:, то здесь возможных значений намного больше. Рассмотрим их в таблице ниже.
Значение | Пояснение |
---|---|
display:inline; |
![]() Default. Displays an element as an inline element (like <span>) |
display:block; |
![]() Displays an element as a block element (like <p>) |
display:inline-block; |
![]() Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box. |
display:inline-table; |
![]() The element is displayed as an inline-level table. |
display:list-item; |
![]() Let the element behave like a <li> element. |
display:run-in; |
![]() Displays an element as either block or inline, depending on context. |
display:table; |
![]() Let the element behave like a <table> element. |
display:table-caption; |
![]() Let the element behave like a <caption>) element. |
display:table-column-group; |
![]() Let the element behave like a <colgroup> element. |
display:table-header-group; |
![]() Let the element behave like a <thead> element. |
display:table-footer-group; |
![]() Let the element behave like a <tfoot> element. |
display:table-row-group; |
![]() Let the element behave like a <tbody> element. |
display:table-cell; |
![]() Let the element behave like a <td> element. |
display:table-column; |
![]() Let the element behave like a <col> element. |
display:table-row; |
![]() Let the element behave like a <tr> element. |
display:none; |
The element will not be displayed at all (has no effect on layout). |
Элемент вообще не будет показан (не работает на слое).
display:inherit; |
![]() The value of the display property will be inherited from the parent element. |
В примере использовали следующие правила для стилей:
.visibility_hidden_039 { visibility:hidden; } .visibility_visible_039 { visibility:visible; } .display_none_039 { display:none; } .block_big_css_039 { background-color: #D2F2F2; width:440px; height:120px; padding: 10px; outline: 1px solid #72D2D2; padding: 5px; margin: 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:10px; } .block_little_css_039 { background-color: #D2F2D2; width:300px; height:60px; outline: 1px solid #02F202; float:right; padding:5px; margin: 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:8px; } .body_css_039 { position:relative; background-color: #D2D2D2; outline: 0px solid #CCCCCC; color: #696969; font: 11px Verdana, sans-serif; } .wrapper_css_039 { /* width:80%; */ width:650px; background-color: #F4F4F4; margin: 30px auto; } .header_css_039 { height:75px; background-color: #F8AC18; background-image: url('images/redHeader.png'); background-repeat: no-repeat; position:relative; } .content_css_039 { padding: 20px 30px; } #pic_new_css_039 { position:absolute; top:0; left:0; } #button_css_039 { position:absolute; top:-14px; left:294px; border:1px solid #F00000; z-index:10; } #bird_css_039 { position:absolute; top:-3px; left:272px; border:0px solid #000000; z-index:20; } #operator_css_039 { position:fixed; width:22px; height:180px; top:250px; left:0px; } #operator_css_039 img { border:none; }
В примере использовали следующий код HTML (ключевые моменты):
<div class="block_big_css_039" style=""> <div id="block_little_css_039_1" class="block_little_css_039 visibility_visible_039" style=""> Нажатие кнопки справа добавит мне свойство visibility:hidden;<br /> Нажмите эту кнопку прямо сейчас... </div> Это текст в большом диве специально для того, чтобы показать обтекание этим текстом маленького дива. При нажатии кнопки обратите внимание каким образом меняется (и меняется ли вообще) расположение этого текста... </div> ... <div class="block_big_css_039" style=""> <div id="block_little_css_039_2" class="block_little_css_039 visibility_visible_039" style=""> Нажатие кнопки справа добавит мне свойство display:none;<br /> Нажмите эту кнопку прямо сейчас... </div> Это текст в большом диве специально для того, чтобы показать обтекание этим текстом маленького дива. При нажатии кнопки обратите внимание каким образом меняется (и меняется ли вообще) расположение этого текста... </div> ...
Созданные новые классы в файле стилей CSS и код HTML будем также использовать в нашем очередном учебном тестовом примере.
css_039_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_039_001.zip ← скачайте пример, чтобы установить на свой сайт...
Напоминание. Библиотеку jquery.js мы скачали заранее, еще на уроке 33...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.