Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:35
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №13: виды блоков в CSS

Виды блоков в 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 станет невидимым (место под него будет зарезервировано).


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru