Урок №7. CSS – Блоковая модель.

В HTML – разметке все существующие элементы разделяют на две группы:

     — Блочные

     — Строчные

Блочные элементы являются самостоятельной структурой – блоком. Блочные элементы, отличаются от других элементов абзацем. К таким элементам относят: p, div, h1…h6.

Строчные элементы отображаются линейной строкой, и никак не отделяются от других, присутствующих на странице элементов. Они присутствуют внутри блочных элементов. К таким относят em, strong и т.п.

Блоковая модель, именно она схематично изображена на картинке, для большего понимания происходящего:

Пример блоковой модели сайта

 

Ну что ж, разберем в деталях, что же это изображено.

У каждого блочного элемента есть содержимое, к примеру, для тега h1 – это текст. Вокруг содержимого присутствуют отступы (padding). Отступы предназначены для того, что бы содержимое не сливалось в одно целое с соседними элементами. Фон отступов = фону содержимого.

Затем идет рамка (border), так называемая граница блока. Границу можно делать как видимой, так и невидимой.

Так же присутствуют и поля блока (margin), это расстояние от границ блока к которому применено это свойство до ближайших соседних блоков. Фон полей – прозрачный и наследует фон от родительского элемента.

Так же у каждого блока присутствует ширина(width) и высота (height), которая определяется содержимым. Запомните, что поля и отступы не учитываются в размере блока.

Все эти нюансы мы рассмотрим чуточку позже. Ну что, давайте для остроты ощущений посмотрим это все на примере?

Возьмем простенькую страничку с двумя абзацами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Заголовок документа</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <p>Учебный параграф для примера блочной модели.</p>

       <p>Учебный параграф для примера блочной модели №2.</p>

     </body>

   </html>

 

Что бы сразу рассмотреть отступы, поля и границы, просто добавим рамку для наших блоков, а сделаем это через таблицу стилей:

p{

  border:1px solid blue;

}

 

Результат:

Пример свойства border

 

Добавим к этому всему еще и отступы. Как Вам уже известно, отступы задаются с помощью свойства padding, значением которого является единицы измерения длины:

p{

  border:1px solid blue;

  padding:20px;

}

 

Результат:

Пример свойства padding

 

Вот мы и сделали отступ от содержимого к границе блока. Давайте зададим поле между блоками. Поле задается с помощью свойства margin:

p{

  border:1px solid blue;

  padding:20px;

  margin:60px;

}

 

Результат:

Пример свойства margin

 

Пришло уже время для высоты и длины самого блока. Высоту и длину задаем с помощью свойств width (ширина) и height (высота):

p{

  border:1px solid blue;

  padding:20px;

  margin:60px;

  width:80px;

  height:80px;

}

 

Результат:

Пример свойств width (ширина) и height (высота)

 

Вот и все. Именно с помощью блочного моделирования можно управлять страницей так, как Вы того хотите, без всяких таблиц и запутанных кодов.
Повторите, переварите, и приступаем к более детальному изучению.

До встречи!

 


 

Закрыть меню