Блочная модель документа. Блочная модель CSS. Управление блочной моделью
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.
Рис. 3.1. Свойства, формирующие блочный элемент
Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.
Рис. 3.2. Матрёшки
На деле ни одно из этих свойств не является обязательным, в том числе и контент, поэтому вы можете формировать любые блоки, содержащие комбинации свойств padding , border и margin или вообще обойтись без них.
Поля
Полем будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Из-за того, что значения полей могут различаться на каждой стороне, применяют выражения «верхнее поле» или «поле сверху», и им подобные для других сторон. Обозначение «поля» следует понимать как одинаковое значение полей для всех сторон. Основное предназначение полей - создать пустое пространство вокруг содержимого блочного элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование полей повышает читабельность текста и улучшает внешний вид страницы. В примере 3.1 показано использование полей для оформления текста.
Пример 3.1.Использование свойства padding
Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах,
они шли, чтобы сделать с нами, вольными англичанами, то же самое, что
Кортес сделал с индейцами Анауака.
Результат примера показан на рис. 3.3.
Рис. 3.3. Поля вокруг текста
Значения полей не могут быть отрицательными.
Границы
Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left , border-top , border-right и border-bottom , соответственно устанавливающих границу слева, сверху, справа и снизу. В примере 3.2 показано добавление линии слева от элемента.
Пример 3.2. Красная пунктирная линия
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.4.
Рис. 3.4. Линия возле текста
Расстояние от линии до текста регулируется значением padding .
Отступы
Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.
Для отступов характерны следующие особенности.
- Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.
- Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left : -10px , это сдвинет блок на десять пикселов влево.
- Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.
- Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.
В примере 3.3 показано схлопывание отступов и их прозрачность.
Пример 3.3. Использование отступов
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Лев ревет только в том случае, когда сообщает, что
территория принадлежит ему или провозглашает себя царем природы.
Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.
Рис. 3.5. Отступы в элементе
На рисунке хорошо видно, что цвет, задаваемый через свойство background , не выходит за пределы границы элемента и не оказывает влияние на отступы.
Ширина блока это комплексная величина и складывается из нескольких значений свойств:
- width - ширина контента, т.е. содержимого блока;
- padding-left и padding-right - поле слева и справа от контента;
- border-left и border-right - толщина границы слева и справа;
- margin-left и margin-right - отступ слева и справа.
Как уже упоминалось, какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 3.6 в виде чёрной пунктирной линии.
Рис. 3.6. Ширина блока
Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.
Допустим, для слоя написан следующий стиль.
Width: 300px; /* Ширина контента */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */
Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.
Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342
Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся (в CSS3 так суммировать можно, только поддерживается эта возможность далеко не всеми браузерами). В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два - поменять алгоритм блочной модели и воспользоваться вложенными слоями.
Алгоритм блочной модели
Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в режиме совместимости (иными словами, когда не указан доктайп) алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам - не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 3.1 приведена поддержка браузерами.
| Браузер | Internet Explorer | Chrome | Opera | Safari | Firefox |
|---|---|---|---|---|---|
| Версия | 8.0+ | 2.0+ | 7.0+ | 3.0+ | 1.0+ |
| Свойство | box-sizing | -webkit-box-sizing | box-sizing | -webkit-box-sizing | -moz-box-sizing |
Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства одновременно (пример 3.4).
Пример 3.4. Ширина блока
XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx
Ширина блока 100%
Данный пример будет работать во всех браузерах, указанных в табл. 3.1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.
Вложенные слои
Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая - для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное - поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.
Пример 3.5. Вложенные слои
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Ширина слоя 100%
Результат данного примера показан на рис. 3.7.
Рис. 3.7. Ширина блока в процентах
Преимуществом вложенных слоев является использование отступов (box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить добавление дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.
На высоту блока действуют те же правила, что и на ширину. А именно, высота складывается из значений высоты контента (height ), полей (padding ), границ (border ) и отступов (margin ). Если свойство height не указано, то оно считается как auto , в этом случае высота контента вычисляется автоматически на основе содержимого. На рис. 3.8 показаны свойства, дающие итоговую высоту, которая обозначена чёрной пунктирной линией.
Рис. 3.8. Высота блока
Вместе с тем, несмотря на схожесть принципов построения ширины и высоты, у них есть существенные различия. Это касается того случая, когда значение width и height не указано, тогда по умолчанию оно принимается как auto . Для ширины блока - это максимально доступная ширина контента, а для высоты блока - это высота контента. Также для ширины блока известна ширина родителя, даже если она не указана явно. Это позволяет устанавливать значение width в процентах. Использование же процентов для height ни к чему не приведёт, потому что высота родителя не вычисляется и её надо указывать. В примере 3.6 показано, как задать высоту блока в процентах.
Пример 3.6. Высота блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Высота слоя 100%
Результат данного примера показан на рис. 3.9.
Рис. 3.9. Высота блока в процентах
Для тега
в примере родителем выступает тег
, поэтому для него устанавливаем значение height
равным 100%. В то же время на
действуют те же правила, что и на
, поэтому величина в процентах будет вычисляться не от высоты страницы, а от высоты контента. Так что для родителя
, которым является тег
, также требуется поставить значение height
равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты страницы.
Высота блока
Рамка
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
var styleElem = document.createElement("style");
var headElem = document.querySelector("head");
headElem.appendChild(styleElem);
function drawOutput() {
output.innerHTML = htmlInput.value;
styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = cssCode;
drawOutput();
});
solution.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = "/* General styles */\n\nbody {\n margin: 0;\n}\n\n#wrapper > * {\n padding: 20px;\n font-size: 20px;\n border: 20px solid rgba(0,0,0,0.5);\n}\n\n/* specific boxes */\n\n#wrapper header, #wrapper footer {\n background-color: blue;\n color: white;\n}\n\n#wrapper main {\n background-color: yellow;\n margin: 2%;\n padding: 2%;\n border: 60px solid rgba(0,0,0,0.5);\n width: 60%;\n}\n\n#wrapper header {\n\n}\n\n#wrapper footer {\n margin-top: 20px;\n}";
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
Поскольку на высоту влияет значение полей, границ и отступов, в примере появится вертикальная полоса прокрутки. Избавиться от этого влияния можно теми же методами, что и для ширины, а именно, использовать свойство box-sizing , либо воспользоваться вложенными слоями.
С высотой связана ещё одна особенность - при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).
Рис. 3.10. Превышение размеров блока
Код, приводящий к подобному результату, приведен в примере 3.7.
Пример 3.7. Превышение размеров блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Лев ревет только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царем природы.
Охотничий участок льва может иметь длину и ширину до тридцати километров.
Чтобы избежать подобных неприятностей, высоту контента лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется к стилю добавить свойство overflow со значением auto или hidden . Результат у них разный, auto добавляет полосы прокрутки автоматически, когда они требуются (рис. 11а), hidden скрывает всё, что не помещается в заданные размеры (рис. 11б).
а. Значение auto
б. Значение hidden
Рис. 11. Использование свойства overflow
Фон
Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.
д. Safari, Chrome
Рис. 12. Отображение фона в браузере
В примере 3.8 показано, как создать код для получения подобной границы.
Пример 3.8. Фон и граница
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Опаньки...
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид блока в браузерах будет практически одинаковым.
Блочная модель (box model) — одно из фундаментальных понятий верстки.
В спецификации W3C это понятие определяется так:
Блочная модель CSS описывает прямоугольный блок, генерируемый для элемента в дереве документа и выводящийся согласно визуальной модели форматирования.
Если по-русски, то это означает, что элемент в HTML документе выводится внутри своего отдельного прямоугольного блока.
Структура элемента в блочной модели
Вообще говоря, блок состоит из непосредственно контента (внутреннего содержимого), внутренних отступов , границ и, наконец, внешних отступов .
Для управления каждой из составных частей блока существуют соответствующие CSS свойства: внутренние отступы — , границы — , внешние отступы — . При желании эти свойства можно задать для каждой стороны блока отдельно (см. рисунок):
В чем различие между внутренним и внешним отступом
Итак, для элемента можно задать границы (рамку) и два вида отступов. Чем же они отличаются?
Основное различие сразу бросается в глаза: padding — это отступ между контентом и границей, а margin — это отступ между границей и «внешним миром».
Отсюда вытекает второе отличие — если для элемента задать фон (), то этим фоном зальется и контент и внутренний отступ (padding). Margin же, находясь снаружи, всегда остается прозрачным.
Padding, если провести аналогию, это поля на листе бумаги. Они имеют тот же цвет, что и сам лист, но текст на них не заходит. Margin — это расстояние от края листа до другого, лежащего рядом листа или, скажем, до края стола.
Третье отличие заключается в том, что padding и margin по разному участвуют в подсчете общей ширины блока. Это зависит от принятой блочной модели.
Какие бывают блочные модели
В настоящее время существуют две основные блочные модели: модель от W3C , которая поддерживается всеми основными браузерами и, так называемая, традиционная — ее поддерживает IE6 в режиме обратной совместимости.
В чем отличие различных блочных моделей
Структура блока элемента абсолютно одинакова. Единственное, чем отличаются различные модели — это правилами определения размеров элемента.
В традиционной блочной модели, которую поддерживает IE6 в режиме совместимости, размеры элемента, задаваемые свойствами и , включают в себя контентную часть элемента, внутренние отступы и границы.
В блочной модели W3C размеры элемента, задаваемые свойствами width и height, включают в себя только контентную часть. То есть width и height не включают в себя ни размеры внутренних отступов, ни размеры границ (см. рисунок).
Действительная ширина элемента соответственно будет равна: + + + + .
Соответственно тот же пример «ширина элемента 100px и внутренний отступ по 10px с каждой стороны» уже даст блок с общей шириной 120px! Так как width:100px означает именно 100px под контентную зону. Все отступы и границы добавляются к этому фиксированному значению.
Логика тоже ясна: главное в блоке — его содержимое. И если я сказал сто пикселей, значит сто, и никакие паддинги и бордеры мне ничего не поменяют!
На первый взгляд все легко и просто! Но не тут то было…
Как быть, например, в ситуации, когда width элемента равен 100%, а padding и/или border не равен 0? Тогда действительная ширина элемента будет больше 100%, а это далеко не всегда желательно.
Вот это и есть самая большая сложность блочной модели W3C: когда ширина указана в процентах, а padding и border в пикселях. Такую ситуацию нужно, если не избегать, то во всяком случае использовать пореже и с пониманием вопроса.
Управление блочной моделью
Как описано выше, блочная модель W3C в некоторых случаях может доставить немало хлопот, поэтому мудрые люди из того же W3C предусмотрели в CSS3 возможность переключаться между блочной моделью W3C и традиционной блочной моделью используя CSS3 свойство . Подробнее то, где и как это можно использовать описано в статье .
The CSS box model is the foundation of layout on the Web - each element is represented as a rectangular box, with the box"s content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model - this is what we"ll look at in this article.
| Prerequisites: | Basic computer literacy, basic knowledge of , HTML basics (study Introduction to HTML), and an idea of How CSS works (study the previous articles in this module .) |
|---|---|
| Objective: | To learn how the CSS box model works, and how individual elements are laid out on a page. |
Box properties
Every element within a document is structured as a rectangular box inside the document layout, the size and "onion layers" of which can be tweaked using some specific CSS properties. The relevant properties are as follows:
Note : Margins have a specific behavior called margin collapsing : When two boxes touch against one another, the distance between them is the value of the largest of the two touching margins, and not their sum.
Active learning: playing with boxes
At this point, let"s jump into an active learning section and carry out some exercises to illustrate some of the particulars of the box model that we discussed above. You can try these exercises in the live editor below, but it might be easier to see some of the effects if you create separate HTML and CSS files locally and try it in a separate browser window instead. You can find the example code on Github .
If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.
In the editable sample below, we have a set of three boxes, all of which contain text content and have been styled to span the whole of the body width. They are represented by element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, a search form, an author name, and so on.">
- Have a look at the box model of each individual element on the page by opening up the browser developer tools and clicking on the elements in the DOM inspector. See Discover browser developer tools for help on how to do this. Each browser has a box model viewer that shows exactly what margin, border and padding is applied to each box, how big the content box is, and the total space the element takes up.
- Set some margin-bottom on the element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
element, say 20px. Now set some margin-top on the element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents."> - Set a margin of 30px and a padding of 30px on every side of the element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
element - note how the space around the element (the margin) and the space between the border and the content (the padding) both increase, causing the actual content to take up a smaller amount of space. Again, check this with the browser developer tools. - Set a larger border on all sides of the element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
element, say 40px, and notice how this takes space away from the content rather than the margin or padding. You could do this by setting a complete new set of values for the width, style and color with the border property, e.g. 60px dashed red , but since the properties are already set in a previous rule, you could just set a new border-width . - By default, the content width is set to 100% of the available space (after the margin, border, and padding have taken their share) - if you change the browser window width, the boxes will grow and shrink to stay contained inside the example output window. The height of the content will default to the height of the content inside it.
- Try setting a new width and height on the element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
element - start with say 400px width and 200px height - and observe the effect. You"ll notice that the width no longer changes as the browser window is resized. - Try setting a percentage width on the element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
element instead - say 60% width - and observe the effect. You should see that the width now changes again as the browser window is resized. Remove the element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application."> element"s height setting for now. - Try setting your element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
element"s padding and margin to be 5% on all sides, and observe the result. If you use your browser developer tools to look at the width of the example output window and compare that to the width of the margin/padding, you"ll see that this 5% means "5% of the containing element"s width." So as the size of the example output window increases, so does the padding/margins. - Margins can accept negative values, which can be used to cause element boxes to overlap. Try setting margin-top: -50px; on the element represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">
element to see the effect. - Keep experimenting!
Playable code
HTML Input
CSS Input
Output
Some hints and ideas:
Advanced box manipulation
Beyond setting the width, height, border, padding and margin of boxes, there are some other properties available to change how they behave. This section discusses those other properties.
Overflow
When you set the size of a box with absolute values (e.g. a fixed pixel width/height), the content may not fit within the allowed size, in which case the content overflows the box. To control what happens in such cases, we can use the overflow property. It takes several possible values, but the most common are:
- auto: If there is too much content, the overflowing content is hidden and scroll bars are shown to let the user scroll to see all the content.
- hidden: If there is too much content, the overflowing content is hidden.
- visible: If there is too much content, the overflowing content is shown outside of the box (this is usually the default behavior.)
Here is a simple example to show how these settings work:
First, some HTML:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.
And now some CSS to apply to our HTML:
P { width: 400px; height: 2.5em; padding: 1em 1em 1em 1em; border: 1px solid black; } .autoscroll { overflow: auto; } .clipped { overflow: hidden; } .default { overflow: visible; }
The above code gives the following result:
Background clip
Box backgrounds are made up of colors and images, stacked on top of each other ( background-color , background-image .) They are applied to a box and drawn under that box. By default, backgrounds extend to the outer edge of the border. This is often fine, but in some cases it can be annoying (what if you have a tiled background image that you want to only extend to the edge of the content?) This behaviour can be adjusted by setting the or
Let"s have a look at an example, to see how this works. First, our HTML:
Div { width: 60px; height: 60px; border: 20px solid rgba(0, 0, 0, 0.5); padding: 20px; margin: 20px 0; background-size: 140px; background-position: center; background-image: url("https://mdn.mozillademos.org/files/11947/ff-logo.png"); background-color: gold; } .default { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; }
The above code produces the following result:
Outline
See also
- Block formatting context : The technical term for a CSS box laid out on a web page.
- Visual formatting model : An in depth explanation of the algorithm that lays out CSS boxes on a web page.
Вся 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).
От автора: все состоит из боксов – это, возможно, самый важный для понимания момент в 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 на паддинге и рамке:
< 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 «
