Курс 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; |
По умолчанию. Показывает элемент как инлайновый (как <span>). Default. Displays an element as an inline element (like <span>) |
display:block; |
Показывает элемент как блочный (как <p>). 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; |
Позволяет элементу вести себя как элемент <li>. Let the element behave like a <li> element. |
display:run-in; |
Показывает элемент или как блочный, или как инлайновый, в зависимости от контекста. Displays an element as either block or inline, depending on context. |
display:table; |
Позволяет элементу вести себя, как элемент <table>. Let the element behave like a <table> element. |
display:table-caption; |
Позволяет элементу вести себя, как элемент <caption>. Let the element behave like a <caption>) element. |
display:table-column-group; |
Позволяет элементу вести себя, как элемент <colgroup>. Let the element behave like a <colgroup> element. |
display:table-header-group; |
Позволяет элементу вести себя, как элемент <thead>. Let the element behave like a <thead> element. |
display:table-footer-group; |
Позволяет элементу вести себя, как элемент <tfoot>. Let the element behave like a <tfoot> element. |
display:table-row-group; |
Позволяет элементу вести себя, как элемент <tbody>. Let the element behave like a <tbody> element. |
display:table-cell; |
Позволяет элементу вести себя, как элемент <td>. Let the element behave like a <td> element. |
display:table-column; |
Позволяет элементу вести себя, как элемент <col>. Let the element behave like a <col> element. |
display:table-row; |
Позволяет элементу вести себя, как элемент <tr>. 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; |
Значение свойства display: будет унаследовано от родительского элемента. 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 *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.