В данной статье рассмотрен очень важный момент верстки веб-страниц - 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. Но я бы не рекомендовал этого делать, поскольку забыв о таком нюансе в будущем или же просто передавая свои сайты другим людям вы после можете оказаться в достаточно не ловкой ситуации.
Вся html страница состоит из блоков
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 для каждого из блоков
Посмотрим как это выглядит в браузере:
Сейчас применим для блока
Как это выглядит в браузере:
А сейчас попробуем поставить отступы сразу со всех сторон:
Как это выглядит в браузере:
В данном свойстве применяется очень часто сокращенная запись. Выглядит она следующим образом:
Давайте подробно рассмотрим данную запись:
Как видите первая цифра отвечает за отступ сверху, вторая — отступ справа, третья — отступ снизу и четвертая — отступ слева.
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).
В 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 используют вообще без задания смещений. В этом случае он ведет себя как обычный статический бокс, но поскольку он все таки не статический, то он создает внутри себя содержащий блок , тот самый, относительно которого будут позиционироваться боксы внутри него .
Пример . Пусть у нас есть три блока: "заголовок", "содержимое" и "низ", а внутри "содержимого" лежит блок "об авторе". Высота заголовка нам точно не известна. Боксы статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним. Блок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.
От автора: все состоит из боксов – это, возможно, самый важный для понимания момент в CSS. Если в деталях, то каждый элемент в документе генерирует бокс. Бокс может быть блочного или инлайнового уровня. Тип бокса определяет то, как элемент будет воздействовать на макет страницы.
Создается бокс или нет, а также тип этого бокса зависит от языка разметки. CSS спроектирован как способ стилизации HTML-документов, поэтому модель визуального рендеринга CSS в значительной степени корениться в различиях между блочными и инлайновыми элементами в HTML. По умолчанию элементы p и section создают боксы блочного уровня, а теги a, span и em создают инлайновые боксы. SVG вообще не использует блоковую модель, поэтому большая часть макетных свойств CSS не работает с SVG.
Боксы блочного уровня создают новые блоки контента, как видно на Рисунке 4.1. Блочные боксы рендерятся вертикально в исходном порядке и заполняют (кроме таблиц) всю ширину контейнера. Это обычное отображение значений block, list-item, table и других table-* значений (например, table-cell).
Рисунок 4.1. боксы блочного уровня в тегах h1, p, ul и table внутри контейнера (серая область)
Боксы инлайнового уровня не формируют новые блоки контента. Эти боксы создают строки внутри блочного бокса. Они отображаются горизонтально и заполняют ширину бокса-контейнера, перепрыгивая на новые строки по необходимости, как показано на Рисунке 4.2. К боксам инлайнового уровня относятся значения свойства display inline, inline-block, inline-table и ruby.
Рисунок 4.2. пример инлайнового бокса с margin: 1em и padding: 5px
Но как же рассчитываются размеры бокса? Вот тут все немного сложнее. На Рисунке 4.3 видно, что размеры бокса складываются из контентной области, padding’а и ширины, плюс ширина рамки, как определено в CSS2. Ширина margin’а создает на элементе margin-бокс и влияет на другие элементы в документе, но никак не воздействует на размеры самого бокса.
Рисунок 4.3. блоковая модель по CSS 2.1
Например, тег p с width: 300px, padding: 20px и border: 10px будет иметь вычисленную ширину в 360px. Ширина складывается из ширины параграфа, левого и правого паддинга, а также из левого и правого border-width. Чтобы общая ширина элемента была 300px, при этом сохраняя 20px паддинга и 10 пикселей рамки, необходимо задать width: 240px. Большинство браузеров вычисляют ширину именно таким образом. Но это не относится к IE 5.5.
IE 5.5 использует свойство width, как окончательное значение для размеров бокса, загоняя паддинг и рамку внутрь бокса, как показано на Рисунке 4.4. Оба значения вычитаются из width, уменьшая размер контентной области. Многие программисты считают такой подход более разумным, несмотря на то, что он работает не по спецификации.
Рисунок 4.4 блоковая модель в CSS 2.1 и блоковая модель в старом IE 5.5
Рабочая группа CSS представила свойство box-sizing, как частичный способ решения этих конкурирующих моделей. Оно позволяет выбирать реализация блоковой модели, а также сильно упрощает вычисления при работе с адаптивным дизайном.
Выбор блоковой модели с помощью свойства box-sizing
Свойство box-sizing определено в спецификации CSS Basic User Interface Module Level 3 и принимает два возможных значения: content-box и border-box.
По умолчанию установлено значение content-box. С этим значением свойства width и height влияют на размер контентной области, что совпадает с поведением, описанным в спецификации CSS 2.1. Такое поведение установлено по умолчанию в современных браузерах (как показано на Рисунке 4.4).
Значение border-box добавляет немного магии. Свойства width и height начинают применяться к внешней границе рамки, а не к контентной области. Рамка и паддинг рисуются внутри бокса элемента, что совпадает со старым поведением в IE 5.5. Давайте разберем пример, в котором ширина в процентах совмещена с px на паддинге и рамке:
This is a headline
< div class = "wrapper" > < article > < h2 > This is a headline < / h2 > < p >< / p > < / article > < aside > < h2 > This is a secondary headline < / h2 > < p > Lorem ipsum dolor sit amet , consectetur adipisicing . . . < / p > < / aside > < / div > |
К тегам article и aside применен CSS-код ниже, что дает нам макет, показанный на Рисунке 4.5, где первый элемент имеет ширину 60%, а второй – 40%:
article, aside { background: #FFEB3B; border: 10px solid #9C27B0; float: left; padding: 10px; } article { width: 60%; } aside { width: 40%; }
article , aside { background : #FFEB3B; border : 10px solid #9C27B0; float : left ; padding : 10px ; article { width : 60 % ; aside { width : 40 % ; |
Рисунок 4.5. элементы с box-sizing: content-box
По умолчанию aside и article задано свойство box-sizing со значением content-box. Значения border-width и padding добавляют 40 пикселей к ширине элементов, что изменяет соотношение 60%/40%. Давайте добавим к тегам article и aside свойство box-sizing: border-box:
article, aside { box-sizing: border-box; }
article , aside { box - sizing : border - box ; |
Изменения показаны на Рисунке 4.6: ширина элементов сохранилась, однако из-за box-sizing: border-box ширина теперь состоит также из рамки и паддинга. Width теперь применяется к внешней грани рамки, а не к контентной области, поэтому наши элементы плотно прижаты друг к другу и не сместились на новую строку.
Рисунок 4.6 элементы с box-sizing: border-box
Я предложил бы использовать свойство box-sizing: border-box. Оно упрощает жизнь, с ним не нужно вычислять width, чтобы подогнать ширину под padding и border.
Лучше всего применять box-sizing: border-box с правилами сброса. Пример ниже взят из статьи Криса Койера с CSS-Tricks «
Последнее обновление: 21.04.2016
Для веб-браузера элементы страницы представляют небольшие контейнеры или блоки. Такие блоки могут иметь различное содержимое - текст, изображения, списки, таблицы и другие элементы. Внутренние элементы блоков сами выступают в качестве блоков.
Схематично блочную модель можно представить следующим образом:
Пусть элемент расположен в каком-нибудь внешнем контейнере. Это может быть элемент body, div и так далее. От других элементов он отделяется некоторым расстоянием - внешним отступом, которое описывается свойством CSS margin . То есть свойство margin определяет расстояние от границы текущего элемента до других соседних элементов или до границ внешнего контейнера.
После границы идет внутренний отступ, который в CSS описывается свойством padding . Внутренний отступ определяет расстояние от границы элемента до внутреннего содержимого.
Например, определим следующую веб-страницу:
Первый блок
Второй блок
После запуска веб-страницы в браузере мы можем посмотреть блочную модель конкретных элементов. Для этого надо нажать на нужный элемент правой кнопкой мыши и открывающемся контекстном меню выбрать пункт, который позволяет просмотреть исходный код элемента. Для разных браузеров этот пункт может называться по разному. К примеру в Google Chrome это Посмотреть код :
В Mozilla Firefox этот пункт называется Исследовать элемент .
И по выбору данного пункта браузер откроет панель, где будет показан код элемента его стили и блочная модель:
В этой модели мы можем увидеть, как задаются отступы элемента, его граница, посмотреть отступы от других элементов и при необходимости динамически поменять значения их стилей.
Если мы явным образом не указываем значения свойств margin, padding и border, то браузер применяет предустановленные значения.
Доступно о пенсии в России. Финансовые услуги пенсионерам. Материнский капитал. НПФ. СНИЛС