Введение в верстку DIV’ами – CSS box model

В начале я решил опубликовать небольшой урок для новичков по CSS кодингу, так как сам в последнее время в основном верстаю DIV’ами, а не таблицами, как раньше.

Существует два типа верстки – таблицами и div’ами. Первый способ чаще всего применялся, но в последнее время все чаще применяется верстка дивами. Это намного быстрее, эффективнее и более модно

В начале рассмотрим сам тег <div></div> и его CSS свойства. В интернете эта структура называется BOX MODEL – коробочная модель.

Зачем все это? Далее я буду писать уроки верстки, если вы не знаете что такое CSS и тег DIV вам не обойтись без этой информации просто никак.

При помощи тега DIV мы можем аккуратно оформить любой элемент веб-страницы, так как у него много свойств – margin (граница), padding (отступ), border (рамка) и outline (внешняя линия). Вот пример.

Как вы видите на рисунке всего четыре отступа, да да – при помощи всех четырех элементов можно создать отступы, придав каждому элементу разный цвет.

CSS свойства тега DIV

Margin – граница, с помощью свойства margin мы может сделать отступ блока от внешних элементов, например при трехколоночной верстке сайта.

Padding – отступ внутри дива, можем задать например рамку и отступ текста от нее.

Border – при помощи этого свойства мы можем задать рамку вокруг текста или рисунка не только прямую линию, но а также штрих-пунктирную и другие, цвет рамки.

Outline – вроде border, применяется редко, я использую это свойство для совсем другого элемента.

Width – ширина элемента.

Height – высота элемента.

Примеры на практике

Теперь немного попрактикуемся. Вот пример. при помощи всех этих элементов можно красиво оформлять рисунки, блоки текста и много чего другого.

В этом примере я использовал рамку – она белая толщиной 3 пикселя, наружную рамку outline шириной 1 пиксель, граница margin 30 пикселей, отступ padding 15 пикселей, ширина блока width 300 пикселей, цвет фона светло-голубой.

А теперь пример оформления блока сайта с заголовком, я использую такие приемы при верстке шаблонов для DLE.

Вот какой код я использовал, чтобы добиться такого эффекта для заголовка блока

1
2
3
4
5
6
7
8

border: 1px solid #454545; //рамка, комбинировал три свойства
width: 300px; //ширина блока
height: 25px; // высота блока
color: #ffffff; //цвет текста в блоке
font-size: 18px; // размер текста в блоке
text-align: center; // выравнивание текста по центру
background-color: #4caac8; // цвет фона блока
padding-top: 4px; // отступ сверху для выравнивания

Этот код для оформления блока текста, который вы видите под блоком заголовка

1
2
3
4
5
6
7
8
9

border-left: 1px solid #454545; // рамка слева
border-right: 1px solid #454545; // рамка справа
border-bottom: 1px solid #454545; // рамка снизу
padding: 7px; // отступ текста от рамки
width: 286px; // ширина блока текста
color: #333333; // цвет текста
font-size: 18px; // размер шрифта
text-align: justify; // выравнивание текста по ширине
background-color: lightblue; // цвет фона блока текста

Подводные камни, ошибки новичков

Некоторые новички, как и я раньше, частенько ошибаются при верстке html страниц при помощи CSS. Где же подводные камни при верстке дивами?

Вы заметили, что ширина блока заголовка 300 пикселей, а ширина блока текста всего 286 пикселей? Вот это и есть подводные камни.

Все дело в том, что ширина блока состоит из нескольких составляющих

1

width + padding-left + padding-right + border-left + border-right

Высота блока соответственно

1

height + padding-top + padding-bottom + border-top + border-bottom

Вот мы и имеем – 300 пикселей вычесть отступ слева 7 пикселей, вычесть отступ справа 7 пикселей = 286 пикселей. А рамка и там и там одинаковая, поэтому мы не берем ее в расчет.

Помните свойством padding:7px мы скомбинировали все четыре составляющие padding-left, padding-right, padding-top, padding-bottom – все они по 7 пикселей.

Ну вот в принципе и все, что требуется знать при верстке DIV’ами. Удачи вам, ждите следующие уроки.
С уважением, Заводской раб.