Урок №13: виды блоков в CSS
Как вы уже знаете, элементы бывают блочными(div, p) и строчными(a, span). Такие виды им заданы изначально, по умолчанию, однако, в некоторых случаях возникает необходимость изменить их. Для этого существует многоцелевое свойство display определяющее, как должен быть показан элемент в документе. Рассмотри значения данного свойства.
Display:block
Благодаря display:block любой элемент будет отображаться как блочный, происходит перенос строк как в начале, так и в конце содержимого. Для примера создадим три ссылки в блоке.
Элемент а - строчный, поэтому ссылки в блоке расположены на одной строке. Предположим нам необходимо создать вертикальное меню. Для этого рассмотрим html-код и css нашего блока и вставим свойство Display:block для элемента а.
| CSS |
HTML-код |
.box7{
width:200px;
height:70px;
border:2px solid skyblue;
background:#C3E6F5;}
.box7 a{
color:red;
text-decoration:none;
display:block;}
.box7 a:hover{
color:white;
background:black;} |
<div class="box7">
<a href="http://main.html">Главная</a>
<a href="http://forum.html">Форум</a>
<a href="http://cont.html">Контакты</a>
</div> |
В результате, с помощью свойства display:block, которое мы применили к элементу а, к классу box7, ссылки в этом блоке будут переноситься на новую строку. Строчные элементы а, стали блочными.
Display:inline
Данное свойство задает функцию элемента, чтобы он отображался как строчный. Такие блочные элементы, как div и p, автоматически создают перенос и следующее содержимое будет отображаться с новой строки. Свойство display:inline отменяет у них такую особенность, поэтому содержимое блочных элементов отображается там, где окончился предыдущий элемент. Для примера зададим заголовку и параграфу свойство:
h3, p{display:inline;}
В результате заголовок третьего уровня будет находится на одной строке с содержимым параграфа:
Заголовок h3. Содержимое абзаца.
Display:list-item
Данное свойство выводит элемент как блочный и добавляет маркер списка к элементу. Это свойство используется крайне редко и все же рассмотрим его.
h3{display:list-item;}
В результате перед заголовками третьего уровня будут отображаться маркеры списка:
- Заголовок третьего уровня
- Заголовок третьего уровня
- Заголовок третьего уровня
Display:none и visibility:hidden
Если для элемента прописано свойство display: none, то он никак не отобразится на веб-странице, под него даже место не оставляется. Другое дело visibility:hidden, данное свойство просто скрывает элемент, однако место под него все же резервируется.
.p1{display:none;}
.p2{visibility:hidden;}
В данном случае содержимое элементы p1 исчезнет и его место займут следующие элементы, а содержимое p2 станет невидимым (место под него будет зарезервировано).
| 
R598551293139
