Виды и свойства блоков.

01.11.2022 14:14

    Как вы помните, элементы могут быть блочными и строчными. По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a - строчными. Но иногда это необходимо изменить, для этого используется свойство display. 

    Это свойство может принимать одно из четырех значений. 

    Рассмотрим все четыре на примерах.

 
display:block
 
    Это значение делает элемент блочным. Предположим, мы решили сделать вертикальное меню. Для этого на html-странице мы напишем следующий код:
 
<html>
  <head>
    <title>css display</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="menu">
     <a href="index.html">Главная</a>
     <a href="about_us.html">О нас</a>
     <a href="contact.html">Контакты</a>
    </div>
  </body>
</html>
    

    Зададим на странице style.css стиль для наших ссылок, причем только для ссылок, которые находятся в div-е с id="menu" (тогда другие ссылки на странице, если они будут, останутся без изменения или им можно будет задать другой стиль):

 
#menu{
 width:200px;
 background:yellow;
}
#menu a{
 color:#2b3845;
 text-decoration:none;
}
#menu a:hover{
 color:#92A9BF;
 background:blue;
}
    

    Сейчас наши ссылки выглядят так:

    Элемент a является строчным, поэтому наши ссылки расположились в одну строку и их размер зависит от текста. Но мы хотели сделать вертикальное меню, для этого мы и добавим нашим ссылкам свойство display:block:

 
#menu{
 width:200px;
 background:yellow;
}
#menu a{
 color:#2b3845;
 text-decoration:none;
 display:block;
}
#menu a:hover{
 color:#92A9BF;
 background:blue;
}
    
Теперь наше меню выглядит так:

Обратите внимание, так как теперь наши ссылки стали блочными элементами, то и размер у них стал одинаковый, равный ширине родительского div-а.

 

 
display:inline
 

Это значение делает элемент строчным. Предположим, мы хотим разместить на странице параграф, который должен начинаться с заголовка. На html-странице мы напишем следующий код:

 
<html>
  <head>
    <title>css display</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h5>Заголовок.</h5> <p>Текст параграфа</p>
  </body>
</html>
    
Сейчас наша страница выглядит так:

Добавим на страницу style.css стили для наших элементов:

 
h5, p{
 display:inline;
}
    

Теперь наша страница выглядит так, как мы и хотели:

 

display:list-item

 

    Это значение делает любой элемент частью списка. Используется он редко, да и поддерживается браузерами не в полной мере. Но давайте все-таки посмотрим пример. Пусть у нас есть три заголовка одного уровня, и мы хотим оформить их списком. Для этого на html-странице мы напишем:

 
<html>
  <head>
    <title>css display</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <ul>
    <h6>Заголовок</h6>
    <h6>Заголовок</h6>
    <h6>Заголовок</h6>
   </ul>
  </body>
</html>
    

    Сейчас наши заголовки выглядят, как положено:

    На странице стилей напишем всего одно свойство:

 
h6{
 display:list-item;
}
    

    В результате получим список из заголовков:

 

display:none

 

    Это значение убирает элемент со страницы. Очень часто используется для формирования раскрывающихся меню сайтов, например, с помощью языка javascript. Вы, наверно, встречали такие меню, где при щелчке по пункту меню раскрывается список подпунктов. Вот в таких меню и используется значение display:none.

    Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока - visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым).

    Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а visibility:hidden делает элемент прозрачным. Понятнее будет на примере. Пусть у нас есть пять параграфов:

 
<html>
  <head>
    <title>css display</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Параграф 1</p>
    <p id="p2">Параграф 2</p>
    <p>Параграф 3</p>
    <p id="p4">Параграф 4</p>
    <p>Параграф 5</p>
  </body>
</html>
    

    Сейчас наша страница выглядит так:

 
Параграф 1
Параграф 2
Параграф 3
Параграф 4
Параграф 5
 

    Давайте зададим для второго параграфа свойство display:none, а для четвертого - свойство visibility:hidden:

 
#p2{
 display:none;
}
#p4{
 visibility:hidden;
}
    

    Посмотрим, что получилось:

Параграф 1
Параграф 3
 
Параграф 5
 

    Как видите, второй параграф отсутствует, а четвертый - невидим, но место под него оставлено. В этом и заключается разница. Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.

 

Отображение содержимого блоков

    Как вы думаете, что будет, если блочному элементу задать меньшие размеры, чем его содержимое?

    Воспользуемся свойством overflow. 

    Это свойство может принимать четыре значения:

  • visible - если содержимое превышает размеры блока, оно все-равно останется на экране. Результат будет такой же, как на рисунке выше.
  • hidden - браузер отрежет содержимое, которое превышает размер блока.
  • scroll - блок будет снабжен полосами прокрутки, причем как горизонтальной, так и вертикальной.
  • auto - блок будет снабжен только теми полосами прокрутки, которые необходимы.

    Например, для overflow: auto, браузеры предоставляют прокрутку, если содержимое переполняет блок:

:

    Надо сказать, что на практике свойство overflow используется редко, но знать о его существовании все-таки стоит.

Назад