Блочная модель документа второе испытание 23. В чем отличие различных блочных моделей
Мы познакомились с HTML и CSS, знаем как они выглядят и как выполнить некоторые основы. Теперь мы собираемся погрузиться немного глубже и подробно рассмотреть, как элементы отображаются на странице и задаются их размеры.
В процессе мы обсудим тему, известную как блочная модель и как она работает с HTML и CSS. Мы также рассмотрим несколько новых свойств CSS и используем некоторые значения размеров, о которых рассказывали в уроке 3. Давайте начнём.
Как отображаются элементы?
Прежде чем перейти к блочной модели, нам надо понимать, как отображаются элементы. В уроке 2 мы рассмотрели разницу между блочными и строчными элементами. Быстро напомним, что блочные элементы занимают всю доступную ширину независимо от их содержимого и начинаются с новой строки. Строчные элементы занимают ширину, которая требуется для содержимого и выстраиваются на одной строке, друг за другом. Блочные элементы, как правило, используются для больших кусков контента, таких как заголовки и структурные элементы. Строчные элементы, как правило, применяются для маленьких частей содержимого, таких как несколько слов, выделенных жирным или курсивным начертанием.
display
Как именно отображаются элементы - как блочные или строчные или как-то ещё, определяется свойством display . Каждый элемент содержит значение свойства display по умолчанию, но как и с любым другим значением свойств, это значение может быть переписано. Есть немало значений для свойства display , но наиболее распространённые это block , inline , inline-block и none .
Мы можем изменить значение свойства display элемента, выбрав этот элемент в CSS и задав новое значение свойства display . Значение block сделает этот элемент блочным.
P { display: block; }
Значение inline сделает этот элемент строчным.
P { display: inline; }
Самое интересное это значение inline-block . Его использование позволит элементу вести себя как блочный, включая все свойства блочной модели (которые мы вскоре рассмотрим). Однако, элемент будет отображаться на строке с другими элементами, а не будет начинаться с новой строки по умолчанию.
P { display: inline-block; }
Демонстрация inline-block
Пространство между строчно-блочными элементами
Одним из важных отличий строчно-блочных элементов является то, что они не всегда соприкасаются или отображается непосредственно друг за другом. Обычно между двумя элементами будет небольшое пространство. Это пространство, возможно и раздражает, но это нормально. Мы обсудим, почему оно существует и как его убрать в следующем уроке.
В заключение, используя значение none полностью скрываем элемент и отображаем страницу, словно элемента не существует. Любые элементы, вложенные в такой элемент, также будут скрыты.
Div { display: none; }
Знание, как отображаются элементы и как изменить display довольно важно, так как display оказывает влияние на отображение блочной модели. В процессе обсуждения блочной модели мы обязательно взглянем на эти разные последствия и как они могут повлиять на представление элемента.
Что такое блочная модель?
В соответствии с концепцией блочной модели, каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы.
Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.
Рис. 4.01. Когда мы смотрим на каждый элемент по отдельности, то можем увидеть, что все они прямоугольны, независимо от их представленных форм
Каждый элемент на каждой странице соответствует блочной модели, так что это невероятно важно. Давайте взглянем на неё, наряду с несколькими новыми свойствами CSS, чтобы лучше понять, как мы можем с этим работать.
Работа с блочной моделью
Каждый элемент представляет собой прямоугольный блок и есть несколько свойств, которые устанавливают размер этого блока. Внутренность блока определяется шириной и высотой элемента, который может быть задан свойством display , содержимым элемента или свойствами width и height . padding и затем border расширяют размеры блока наружу от ширины и высоты элемента. Наконец, любой указанный margin идёт за пределами рамки.
Каждая часть блочной модели соответствует свойству CSS: width , height , padding , border и margin .
Взглянем на эти свойства внутри некоторого кода:
Div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }
В соответствии с блочной моделью общая ширина элемента может быть рассчитана по следующей формуле:
Margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
Для сравнения, в соответствии с блочной моделью общая высота элемента может быть рассчитана по следующей формуле:
Margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
Рис. 4.02. Блочная модель включает базовую высоту и ширину плюс padding, border и margin
Используя эти формулы, мы можем найти общую высоту и ширину блока из нашего примера.
Ширина: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px Высота: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px
Блочная модель, без сомнения, одна из наиболее запутанных частей HTML и CSS. Мы устанавливаем значение свойства width как 400 пикселей, но фактическая ширина нашего элемента 492 пикселя. По умолчанию блочная модель коробка аддитивна. Таким образом, для определения фактического размера блока мы должны принять во внимание поля, границы и отступы для всех четырёх сторон блока. Наша ширина включает не только значение свойства width , но и размер левого и правого поля, левую и правую границу, левые и правые отступы.
Пока многие из этих свойств не несут большого смысла и это нормально. Для уточнения давайте поближе посмотрим на все эти свойства width , height , padding , border и margin , которые формируют блочную модель.
width и height
У каждого элемента есть ширина и высота по умолчанию. Эта ширина и высота может быть равна нулю, но браузеры по умолчанию отображают каждый элемент с размером. В зависимости от того, как отображается элемент, ширина и высота по умолчанию может быть соответствующей. Если элемент является ключевым в макете страницы, для него может потребоваться задать определённые значения свойств width и height . В этом случае значения свойств для не строчных элементов могут быть указанными.
width
По умолчанию ширина элемента основана на значении display . У блочных элементов ширина по умолчанию 100% и занимает всё доступное горизонтальное пространство. Строчные и строчно-блочные элементы расширяются и сжимаются горизонтально для размещения их содержимого. Строчные элементы не могут иметь фиксированный размер, таким образом, ширина и высота относятся только к не строчным элементам. Чтобы задать определённую ширину для не строчных элементов, используйте свойство width :
Div { width: 400px; }
height
Высота элемента по умолчанию определяется его содержимым. Элемент будет расширяться и сжиматься по вертикали при необходимости, чтобы вместить его содержимое. Установить определённую высоту для не строчных элементов можно через свойство height :
Div { height: 100px; }
Размеры строчно-блочных элементов
Пожалуйста, помните, что строчные элементы не принимают свойства width и height и любые их значения. Блочные и строчно-блочные элементы, однако, принимают свойства width и height и соответствующие им значения.
margin и padding
В зависимости от элемента, браузеры могут применять отступы и поля по умолчанию для элемента, чтобы помочь с удобочитаемостью. Мы, как правило, видим это на текстовых элементах. Поля и отступы по умолчанию для этих элементов могут отличаться от браузера к браузеру и от элемента к элементу. В уроке 1 мы обсуждали использование сброса CSS чтобы все эти значения по умолчанию стали нулевыми. Это позволяет нам работать с нуля и задать собственные значения.
margin
Свойство margin позволяет нам установить пространство, которое окружает элемент. margin находятся за пределами любых границ и полностью прозрачны в цвете. Они могут использоваться для позиционирования элементов в конкретном месте на странице или добавить пустое пространство, сохраняя все другие элементы на безопасном расстоянии. Вот свойство margin в действии:
Div { margin: 20px; }
Одной из причуд margin являются вертикальные значения, сверху и снизу, они не применяются к строчным элементам, но применяются к блочным и строчно-блочным элементам.
padding
Свойство padding очень похоже на свойство margin , однако располагается внутри границ элемента. Свойство padding используется, чтобы задать пространство непосредственно внутри элемента. Вот код:
Div { padding: 20px; }
Свойство padding в отличие от margin работает вертикально для строчных элементов. Вертикальный padding может сливаться со строкой выше или ниже данного элемента, но будет отображаться.
margin и padding для строчных элементов
Строчные элементы ведут себя немного по-другому, чем блочные и строчно-блочные элементы, когда дело доходит до отступов и полей. Для строчных элементов margin работает только горизонтально - слева и справа от элементов. padding работает на всех четырёх сторонах строчных элементов, однако вертикальные поля сверху и снизу могут выходить за пределы строки выше и ниже элемента.
Отступы и поля работают как обычно для блочных и строчно-блочных элементов.
Установка margin и padding
В CSS существует несколько способов установить значения определённых свойств. Мы можем использовать обычную запись, в которой перечисляется несколько свойств и значений одно за другим, в котором у каждого значения есть собственное свойство. Или мы можем использовать сокращённую запись, перечисляя несколько значений одного свойства. Не у всех свойств есть сокращённый вариант, таким образом, мы должны убедиться что используем правильное свойство и структуру значений.
Свойства margin и padding существуют в обычном и сокращённом виде. При использовании сокращённого свойства margin , чтобы установить одно значение для всех четырёх сторон элемента мы задаём одно значение:
Div { margin: 20px; }
Чтобы установить одно значение для верхней и нижней стороны, а другое значение для левой и правой стороны элемента, укажите два значения: вначале сверху и снизу, затем слева и справа. Здесь для
Div { margin: 10px 20px; }
Чтобы установить уникальные значения для всех четырёх сторон элемента, укажите эти значения в следующем порядке: сверху, справа, снизу и слева, двигаясь по часовой стрелке. Здесь мы задаём для
Div { margin: 10px 20px 0 15px; }
Использование свойства margin или padding с любым числом значений считается сокращением. В обычной записи мы можем установить значение только для одной стороны используя уникальные свойства. После имени каждого из свойств (margin или padding в данном случае) идёт дефис и сторона блока, к которой должно применяться значение: top, right, bottom или left. Например, свойство padding-left принимает только одно значение и установит левое поле для этого элемента, свойство margin-top принимает только одно значение и установит верхний отступ для этого элемента.
Div { margin-top: 10px; padding-left: 6px; }
Когда мы хотим определить только одно значение margin или padding , то лучше использовать обычную запись. Это сохраняет наш код наглядным и помогает избежать путаницы по пути вниз. Например, вы действительно хотите установить margin в 0 сверху, справа и слева элемента или же на самом деле хотите установить margin снизу в 10 пикселей? Использование обычной записи для свойств и значений помогает нам это делать осмысленно. С другой стороны, когда имеешь дело с тремя или более значениями, сокращение невероятно полезно.
Цвет отступов и полей
Свойства margin и padding полностью прозрачны и не принимают какие-либо цветовые значения. Но будучи прозрачными они показывают цвет фона связанных элементов. Для margin мы видим цвет фона родительского элемента, а для padding видим цвет фона элемента, к которому применяется padding.
Границы
Границы располагаются между отступами и полями, создавая рамку вокруг элемента. Для свойства border требуется три значения: ширина, стиль и цвет. Сокращённая запись для border задаётся этом же порядке - ширина, стиль, цвет. В обычной записи эти три значения могут быть разбиты по свойствам border-width , border-style и border-color . Обычная запись полезна для изменения или переписывания отдельного значения границы.
Ширина и цвет границ могут быть определены с помощью обычных единиц размера и цвета CSS, как описано в уроке 3.
Универсальный селектор
На первом этапе данного упражнения мы представили универсальный селектор. В CSS звёздочка (*) это универсальный селектор, который выбирает каждый элемент. Вместо перечисления всех отдельных элементов мы можем использовать звёздочку для выбора всех элементов.
Псевдоэлементы :before и :after также упомянутые на этом этапе - это элементы, которые могут динамически генерироваться через CSS. Мы не станем применять эти элементы в нашем проекте, однако, при упоминании универсального селектора также хорошим тоном будет включить эти псевдоэлементы на случай, если они когда-нибудь появятся.
Резюме
Возьмите пирожок и погладьте себя по голове. Я подожду.
Изучение всех разных частей блочной модели - это немалый подвиг. Эти понятия, даже кратко изложенные, заняли довольно много времени до полного освоения, но мы находимся на верном пути.
Вкратце, в этом уроке мы говорили о следующем:
- Как отображаются разные элементы.
- Что такое блочная модель и почему она так важна.
- Как изменить размер элементов с учётом высоты и ширины.
- Как добавить к элементам margin, padding и border.
- Как изменить размер элементов и влияние блочной модели.
Теперь у нас есть лучшее понимание того, как отображаются элементы и вычисляются их размеры. Настало время переходить к позиционированию этих элементов.
Блочная модель (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.
В 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 используют вообще без задания смещений. В этом случае он ведет себя как обычный статический бокс, но поскольку он все таки не статический, то он создает внутри себя содержащий блок , тот самый, относительно которого будут позиционироваться боксы внутри него .
Пример . Пусть у нас есть три блока: "заголовок", "содержимое" и "низ", а внутри "содержимого" лежит блок "об авторе". Высота заголовка нам точно не известна. Боксы статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним. Блок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.
Последнее обновление: 21.04.2016
Для веб-браузера элементы страницы представляют небольшие контейнеры или блоки. Такие блоки могут иметь различное содержимое - текст, изображения, списки, таблицы и другие элементы. Внутренние элементы блоков сами выступают в качестве блоков.
Схематично блочную модель можно представить следующим образом:
Пусть элемент расположен в каком-нибудь внешнем контейнере. Это может быть элемент body, div и так далее. От других элементов он отделяется некоторым расстоянием - внешним отступом, которое описывается свойством CSS margin . То есть свойство margin определяет расстояние от границы текущего элемента до других соседних элементов или до границ внешнего контейнера.
После границы идет внутренний отступ, который в CSS описывается свойством padding . Внутренний отступ определяет расстояние от границы элемента до внутреннего содержимого.
Например, определим следующую веб-страницу:
Первый блок
Второй блок
После запуска веб-страницы в браузере мы можем посмотреть блочную модель конкретных элементов. Для этого надо нажать на нужный элемент правой кнопкой мыши и открывающемся контекстном меню выбрать пункт, который позволяет просмотреть исходный код элемента. Для разных браузеров этот пункт может называться по разному. К примеру в Google Chrome это Посмотреть код :
В Mozilla Firefox этот пункт называется Исследовать элемент .
И по выбору данного пункта браузер откроет панель, где будет показан код элемента его стили и блочная модель:
В этой модели мы можем увидеть, как задаются отступы элемента, его граница, посмотреть отступы от других элементов и при необходимости динамически поменять значения их стилей.
Если мы явным образом не указываем значения свойств margin, padding и border, то браузер применяет предустановленные значения.