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

Суть позиционирования очень проста: любой бокс можно расположить в любом месте страницы, задав ему точные координаты. Именно любой, а не только <div >. Существуют четыре способа позиционирования боксов.

Статическое (Static ), отсутствие какого бы то ни было специального позиционирования, а просто выкладывание боксов одного за другим сверху вниз – прямой поток. Способ по умолчанию.

Абсолютное (Absolute ). Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется, и в этом месте сразу начинают раскладываться следующие боксы. Говорят, что он "исключается из потока".

Фиксированное (Fixed ). Схоже сabsolute , но при этом он не скролится вместе с остальной страницей.

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

Рисунок 5.2 – Способы позиционирования боксов

Чтобы расположить бокс абсолютно, ему надо задать нужный тип позиционирования и координаты:

#somebox {

position:absolute;

left:100px; top:100px;

bottom :100 px ; right :100 px ;

Координаты означают расстояние бокса от краев содержащего блока. Любая из координат необязательна. В случае, если координаты не задают вертикального или горизонтального положения, то оно остается таким же, какое было бы без позиционирования. То есть в случае, когда у нас есть два произвольных бокса один за другим "box1" и "box2", то по вертикали он останется прямо под первым боксов, а по горизонтали будет отстоять от левого края на 150 пикселов:

< div id =" box 1"> первый div >

< div id =" box 2"> второй div >

и второй мы позиционируем так:

position:absolute;

left:150px;

Рассмотрим относительно каких границ двигают бокс координатные свойства.

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

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

Любой позиционированный (не static ) бокс создает внутри себя такой стакан в терминологии CSS называемый – содержащий блок (containing block ).

Бокс с position:fixed – это, разновидность того же абсолютного позиционирования с разницей в том, что при скролинге окна эти боксы остаются на месте. Этот эффект широко используется на страницах веб-приложений для всяческих прилипающих блоков меню и тулбаров. Особенность – если фиксированный бокс не влезет в окно, то доскролиться до него будет уже нельзя.

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

#somebox {

position:absolute;

top:0; left:0; right:0;

margin :20 px ; padding :20 px ;

Этот бокс с заданными левой и правой координатами будет точно касаться боковых сторон своего содержащего блока , какой бы ширины тот ни был, а margin"ы и padding"и будут откладываться внутрь бокса.

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

Рисунок 5.3 – Пример абсолютного позиционирования боксов

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

Пример - абсолютным позиционированием нельзя сделать самую традиционную раскладку: заголовок, содержимое любой высоты в несколько колонок и нижний блок. Обычно получается такое – рисунок 5.4

Рисунок 5.4 – Пример абсолютного позиционирования боксов

Видны две проблемы:

    Колонки не получается выровнять по высоте, потому что колонки друг в друге не лежат, и в CSS нет средств сказать "высота как вот у другого бокса.

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

Относительное позиционирование похоже на абсолютное, но к нему зачем-то добавляется эффект: бокс продолжает занимать место в потоке.

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

Пример . Пусть у нас есть три блока: "заголовок", "содержимое" и "низ", а внутри "содержимого" лежит блок "об авторе". Высота заголовка нам точно не известна. Боксы статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним. Блок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.

Содержимое

Вся html страница состоит из блоков

. Очень важно уметь управлять и изменять данные блоки. Об этом мы и поговорим сегодня. А начнем мы с отступов блоков, а точнее о свойствах margin и padding .

margin

<html > <head > <title > Главная</ title > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > <body > <div id = "content" > <div class = "firstPar" > <p > </ p > <p > </ p > </ div > <div class = "secondPar" > <p > Cras</ p > <ul > <li > amet condimentum</ li > <li > aliquam volutpat</ li > <li > elementum interdum</ li > </ ul > </ div > </ div > </ body > </ html >

А в CSS для каждого из блоков

пропишем разные границы:

Посмотрим как это выглядит в браузере:

Сейчас применим для блока

свойство margin — внешние отступы. Что касается данного свойство оно как и граница может быть: margin-top , margin-right , margin-bottom и margin-left . А отступы задаются в пикселях(px). Также данное свойство может наследоваться от родителя. Давайте попробуем сделать отступ:

Как это выглядит в браузере:


А сейчас попробуем поставить отступы сразу со всех сторон:

Как это выглядит в браузере:


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

Давайте подробно рассмотрим данную запись:

Как видите первая цифра отвечает за отступ сверху, вторая — отступ справа, третья — отступ снизу и четвертая — отступ слева.

padding

Отступы бывают внешними и внутренними. Как вы уже знаете внешние задаются через свойство margin . Внутренние отступы задаются с помощью свойства padding .

Для примера возьмем код из прошлого примера:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html > <head > <title > Главная</ title > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > <body > <div id = "content" > <div class = "firstPar" > <p > Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</ p > <p > Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</ p > </ div > <div class = "secondPar" > <p > Cras</ p > <ul > <li > amet condimentum</ li > <li > aliquam volutpat</ li > <li > elementum interdum</ li > </ ul > </ div > </ div > </ body > </ html >

И зададим для второго блока внутренний отступ в 20 пикселей(px).

В данной статье рассмотрен очень важный момент верстки веб-страниц - box model, или другими словами блочная система верстки сайтов.

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

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

Строение блочного элемента

Структура box model не отличается особой сложностью.

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

Для более наглядного представления данного вопроса представлен рисунок ниже:

Величина каждой составляющей регулируется с помощью соответствующего стиля CSS: margin – внешние поля, border – границы непосредственно самого элемента, и padding – величина внутренних полей.

Также стоит отметить, что величина полей и границ может управляться независимо для каждой стороны, что наглядно проиллюстрировано на рисунке снизу:

Принципиальные различия между margin и padding

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

Следующее принципиальное отличие этих элементов заключается в том, что при присвоении фону некой цветовой гаммы цвет распространиться только на пространство, относящееся к элементу padding.

Еще одна отличительная черта этих элементов основывается на подсчете общей ширины блочного компонента. Стандартно padding входит в эту ширину, а margin – нет. Это обстоятельство зависит от используемой блочной модели документа.

Разновидности блочных моделей

На сегодняшний день существует всего 2 разные модели блочных систем : традиционная, основывающаяся на особенностях работы Internet Explorer 6 и общераспространённая, основанная на основных принципах постулатов W3C. Последняя используется всеми современными браузерами.

Отличительная черта блочных элементов из разных систем

Существует одно единственное отличие между блоками в традиционной и общераспространённой системах. Оно основывается на отличии в правилах подсчета высоты и ширины блока.

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

Однако же более современная блочная система, которая регламентируется постулатами W3C, при присвоении свойств ширины и высоты учитывает только контент. Наглядное отличие продемонстрировано на рисунке ниже:

Очень важно помнить об этих отличиях при создании нового веб-ресурса.

Определение реальных размеров элементов

Надеюсь, с традиционным подходом присвоения высоты и ширины блоку все предельно ясно. К примеру, если веб-мастер в файле CSS пишет следующий код:

Block { width: 200px; padding: 20px; }

То это значит, что элемент с классом block будет шириной 200px, с учетом того, что сам контент будет занимать 180 px, а оставшиеся 20px пойдут на внутренний отступ.

Второй случай, который не относиться к традиционному, связан с определенными трудностями. Они возникают из-за того, что свойства ширины и высоты относятся только к контенту, вследствие чего размеры блока не будут совпадать с данными параметрами.

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

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

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

Именно поэтому опытные веб-мастера стараются как можно реже использовать процентное обозначение ширины для блочной верстки по правилам W3C.

Подводя итоги

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

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

Последнее обновление: 21.04.2016

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

Схематично блочную модель можно представить следующим образом:

Пусть элемент расположен в каком-нибудь внешнем контейнере. Это может быть элемент body, div и так далее. От других элементов он отделяется некоторым расстоянием - внешним отступом, которое описывается свойством CSS margin . То есть свойство margin определяет расстояние от границы текущего элемента до других соседних элементов или до границ внешнего контейнера.

После границы идет внутренний отступ, который в CSS описывается свойством padding . Внутренний отступ определяет расстояние от границы элемента до внутреннего содержимого.

Например, определим следующую веб-страницу:

Блочная модель в CSS3

Первый блок

Второй блок

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

В Mozilla Firefox этот пункт называется Исследовать элемент .

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

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

Если мы явным образом не указываем значения свойств margin, padding и border, то браузер применяет предустановленные значения.

Рейтинг:
Похожие публикации

Публикации