Блочная модель
В CSS мы, говоря упрощённо, имеем два типа элементов — блочные и строчные. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.
Если элемент определён как блочный, то он будет вести себя следующим образом:
- Начнётся с новой строки.
- Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.
- Будут применяться свойства width и height .
- Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.
Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <h1> ) и <p> , все используют block как свой внешний тип отображения по умолчанию.
Если элемент имеет тип отображения inline (строчный), то:
- Он не будет начинаться с новой строки.
- Свойства width и height не будут применяться.
- Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.
- Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.
Элемент <a> , используемый для ссылок, <span> , <em> и <strong> — всё это примеры по умолчанию строчных элементов.
Тип отображения, применяемый к элементу, определяется значениями свойства display , такими как block и inline , и относится к внешнему значению display .
Экскурс: внутренний и внешний типы отображения
Здесь следует объяснить, что такое внутренние и внешние типы отображения. Как уже говорилось выше, каждый блок в CSS имеет внешний тип отображения, который определяет, блочный он или строчный.
Элементы также имеют внутренний тип отображения, который определяет расположение элементов внутри них. По умолчанию элементы внутри блока располагаются в нормальном потоке: они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).
Однако мы можем изменить внутренний тип отображения, используя такие значения display как flex . Если мы установим display: flex; для элемента, внешний тип отображения примет значение block , но внутренний тип изменится на flex . Любые прямые дочерние элементы этого блока станут flex-объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.
Примечание: Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN Блочное и строчное расположение (en-US) .
Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите flex и другие внутренние значения, которые могут быть у ваших элементов, например grid .
Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют нормальным потоком (normal flow), потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.
Примеры разных типов отображения
Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML с внешним типом отображения block . Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается с новой строки и расширяется на всю доступную ему ширину.
Второй — это список, который свёрстан с использованием display: flex . Это устанавливает flex-расположение для элементов внутри контейнера, однако сам список — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.
Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <span> . Эти элементы по умолчанию имеют тип inline , однако у одного из них задан класс block, для которого мы установили display: block .
Мы можем видеть, как строчные элементы ( inline ) ведут себя в следующем примере. Элементы <span> в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.
У нас также есть элемент <ul> , для которого установлено display: inline-flex , что создаёт строчный элемент вокруг нескольких flex-объектов.
Наконец, у нас есть два абзаца, для которых установлено display: inline . И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи блочными элементами.
В примере вы можете заменить display: inline на display: block или display: inline-flex на display: flex для переключения между этими двумя режимами отображения.
Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства display может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.
В оставшейся части урока мы сосредоточимся на внешнем типе отображения.
Что такое блочная модель CSS?
Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.
Составляющие элемента
Составляя блочный элемент в CSS мы имеем:
- Содержимое: область, где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как width и height .
- Внутренний отступ: отступы располагаются вокруг содержимого в виде пустого пространства; их размер контролируется с помощью padding и связанных свойств.
- Рамка: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью border и связанных свойств.
- Внешний отступ: внешний слой, заключающий в себе содержимое, внутренний отступ и рамки, представляет собой пространство между текущим и другими элементами. Его размер контролируется с помощью margin и связанных свойств.
Рисунок ниже показывает эти слои:
Стандартная блочная модель CSS
В стандартной блочной модели, если указать элементу атрибуты width и height , это определит ширину и высоту содержимого. Любые отступы и рамки затем добавляются к этой ширине и высоте для получения общего размера элемента. Это показано на изображении ниже.
Предположим, что в элементе есть следующий CSS определяющий width , height , margin , border , и padding :
Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.
Примечание: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.
Альтернативная блочная модель CSS
Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).
По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство box-sizing: border-box . С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.
Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство box-sizing для элемента <html> , затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью the CSS Tricks article on box-sizing.
Примечание: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.
Играем с блочными моделями
В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box , который даёт им одинаковые параметры width , height , margin , border , и padding . Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.
Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ширина и высота совпали с первым блоком?
Примечание: вы можете найти решение этой задачи здесь.
Использование инструментов разработчика в браузере для просмотра блочных моделей
Инструменты разработчика вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!
Внешние, внутренние отступы и рамки
Вы уже видели свойства margin , padding и border в работе в приведённом выше примере. Используемые в этом примере свойства — сокращённые и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.
Давайте рассмотрим эти свойства более подробно.
Внешний отступ (margin)
Внешний отступ — это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Внешний отступ может быть как положительным, так и отрицательным. Негативное значение может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, внешний отступ всегда добавляется после расчёта размера видимого блока.
Мы можем контролировать все поля элемента сразу, используя свойство margin , или каждую сторону индивидуально, используя эквивалентные полные свойства:
В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.
Схлопывание внешних отступов
Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.
В примере ниже есть два абзаца. Первому абзацу задан margin-bottom 50 пикселей. У второго абзаца margin-top 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.
Вы можете проверить это, установив второму абзацу margin-top равный 0. Видимое расстояние между двумя абзацами не изменится — отступ остаётся равен 50 пикселям, заданным в margin-bottom первого абзаца. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения 50px у первого абзаца.
Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. margin collapsing. Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит.
Рамка
Рамка располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям width и height элемента. Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему width и height .
Для стилизации рамок существует большое количество различных свойств: четыре рамки, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.
Вы можете установить ширину, стиль или цвет всех четырёх рамок сразу, используя свойство border .
Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:
Для установки ширины, стиля или цвета всех рамок используйте:
Чтобы установить ширину, стиль или цвет для каждой рамки индивидуально, вы можете использовать следующие свойства:
В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.
Внутренний отступ (padding)
Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.
Вы можете контролировать значение padding для всех сторон элемента, используя свойство padding , или для каждой стороны индивидуально, используя следующие полные свойства:
Если вы измените значения padding для класса .box в примере ниже, то увидите, что это изменяет положение текста внутри элемента.
Вы также можете изменить padding для класса .container , который задаёт отступ между контейнером и блоком. Внутренний отступ может быть изменён для любого элемента и создаст пространство между его рамкой и содержимым.
Блочная модель и строчные элементы
Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например к <span> .
В приведённом ниже примере у нас есть <span> внутри абзаца, и мы применили к нему width , height , margin , border и padding . Вы можете видеть, что ширина и высота игнорируются. Вертикальные внешние и внутренние отступы и рамки применены, но они не изменяют положение других элементов относительно нашего строчного элемента, и поэтому отступы и рамка перекрывают другие слова в абзаце. Горизонтальные внешние и внутренние отступы и рамки применены и заставляют другие элементы отодвинуться от нашего.
Использование display: inline-block
Существует особое значение display , которое представляет собой золотую середину между inline и block . Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял width и height и избегал перекрытия, показанного выше.
Элемент с display: inline-block применяет ряд свойств блочного элемента, о которых мы уже знаем:
- Применяются свойства width и height .
- Использование padding , margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.
Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства width и height .
В следующем примере мы добавили display: inline-block к нашему элементу <span> . Попробуйте изменить значение свойства на display: block или полностью удалить строку, чтобы увидеть разницу.
Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив padding . <a> — это строчный элемент, такой же как <span> ; вы можете использовать display: inline-block , чтобы разрешить применение отступов, что упростит пользователю переход по ссылке.
Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <a> , потому что хотим, чтобы background-color изменялся при наведении курсора на <a> . Отступы перекрывают рамку элемента <ul> . Это происходит потому, что <a> — строчный элемент.
Добавьте в правило display: inline-block с помощью селектора .links-list a , и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.
Проверьте свои навыки!
В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. Проверка своих навыков: блочная модель (en-US) .
Заключение
Это большая часть того, что вам нужно знать о блочной модели. Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько велики блоки в вашей раскладке на странице.
В следующем уроке мы рассмотрим, как можно использовать фон и рамки, чтобы сделать ваши простые блоки более интересными.
Understanding the CSS Box-Model
The box-model is one of the basics things in CSS and HTML. But even in 2020, lots of web developers don’t understand the idea of how box-model behaves.
So, in this article, I will explain the basic logic of the box-model and why it is called the box-model. Besides, I will also give you a deeper insight into the behavior of the box-model.
Indeed, the name ‘box-model’ exists because, in the browsers, everything is built from boxes. So, let’s start exploring these boxes!
Everything is Boxes
Every HTML element is a box that can contain content.
Precisely, there are two basics types of boxes:
⦁ Block boxes
⦁ Inline boxes.
In the past, the Firefox browser had a feature that showed all the container boxes in a 3D visual way. For me, it was one of the best visual examples for beginner web developers in the web industry to understand it.
Those two types of boxes, were existed from the beginning of the web, let’s talk about them:
Block Boxes
Block boxes, by default, take all the space throughout the width of the container.
The common HTML element for a block box is the <div> HTML element.
Inline Boxes
Inline boxes, by default, take the space according to the content wrapped. The most common HTML element for an inline box is the <span> HTML element.
CSS Display Property for Behavior
The <div> and the <span> elements use the same behavior of basic styles as that of the browser. The behavior of all the boxes comes from the display property of CSS. The basic values of the display property are the inline and the block value.
And here you can guess it right that the <span> HTML element, by default, uses the value of inline while the <div> HTML element, by default, uses the value of block .
And now, if you want, you can change the behavior of every HTML element to your desired behavior.
For example, you can convert it into an opposite behavior:
Note: Most of the time, we don’t play with the display like in the last example.
Now, we use the <span> HTML element and more other inline HTML elements, such as the anchor tag of links, <a> , to add some styles for the text.
Under the Hood of CSS and HTML
Interestingly, all the HTML elements use the display property with the inline value.
You must be wondering how do I know this? And why I’m saying it?
Because every property in CSS has only one default value and for the display property, the initial value is always inline .
You can find this information for the initial value of every property of CSS in the MDN of Mozilla.
The Big Question
Now the question that we need to ask ourselves is that:
Why does the HTML element of <div> behave with the display: block value?
The answer is in the browser’s user-agent-stylesheet. So, let’s talk about it.
The Browser User-agent-stylesheet
When we create web pages, the browser loads its own CSS stylesheet before we even load a single line of CSS.
And here comes the funny part:
All the HTML elements which by default have a value of block , this is only because the browser decides to add them the display property with a value of block .
Let me repeat it; these styles aren’t the default styles of CSS. And if we reset a <div> HTML element to its initial display, it will become equal to inline .
The only reason that we have those differences between different kinds of HTML elements is that the browser loads its own CSS, and we have become used to it.
To get an idea of how the browser’s user-agent-stylesheet looks like, you can take a look at the WebKit user-agent-stylesheet of Chrome.
Now, if you want to know more about the initial value and other CSS reset keywords value, you can read my previous article “Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords”.
Controlling the Box-model
Every HTML element is a box that we can control on the outside space with the margin property.
After that, we can give it a border .
Here, with the padding property, we can also provide the inner spaces between the content and the border inside the box.
The funny image from Kelly Vaughn in her twitter account explains the box-model in the best way.
Styling the Box
In CSS, we can control the view of the HTML elements of the box according to all its parts i.e., content, padding, border, and margin.
Padding
Padding is the inner space between the content and the border of the box. You can use the same value all across the box, for example, padding: 20px; or you can give padding to only one side of the box, for example, padding-right: 10px; .
Besides, there are options for shorthand writing, which allow you to give a different value to each side, without writing them separately.
For example, padding: 10px 20px 5px 15px; , equal to padding-top: 10px , padding-right: 20px , padding-bottom: 5px and padding-left: 15px .
And there are even more possibilities for writing shorthand.
Examples for writing way for padding:
Borders
There are a lot of possibilities for styling borders in 2020. However, there are two basic styles for seeing the border on HTML elements.
Precisely, there are quite a lot of properties for creating a border. The three basic properties for creating borders are:
- border-style — mostly used with one of the common keywords: solid , dashed or dotted .
- border-width , tells the browser about the size of the border. Usually, we use pixel value for this property, for example, border-width: 5px; .
- border-color , by default, the value uses the currentColor of the text. However, we prefer to define it even if we don’t have to. For example, border-color: red; .
Most of the web developers don’t use those three properties separately. Instead, there is a shorthand that gives you the possibility to write all of them together, the border shorthand property.
With this property, we can write only border: solid 5px red .
Interestingly, we can control on every side of the padding in the same way we control all the sides of the borders separately.
In fact we can also control and give a different style to each part of the borders, for example:
Margins
Margins are the outer spaces between boxes.
But these outer spaces can’t get other styles, for example, the background color.
The values of margin property, works in a similar way like the padding property, with all the same shorthands:
Collapse behavior
Now, when two HTML block elements have vertical margins, and these two margins collapse into one, here the bigger will dominate.
Here, this visual example is the best way to understand it:
Understanding the Sizing of Boxes
By default, the width: auto value of HTML block elements, is equal to the width of the row.
But we can also give a specific width value to the HTML elements, for example, width: 300px; .
Where Developers Fail to Understand the Box-model?
This basic calculation is straightforward when you only give the width for an HTML element.
But in a real project, you provide HTML elements with width and padding and sometimes borders too.
In this calculation, most of the junior developers fail to understand the basics of how sizing works in browsers.
The Tricky Question
The tricky question for beginner developers is about the width size of an HTML element which has width: 300px , padding: 10px and border: solid 2px green ?
The conventional thinking is that the width includes the padding and the borders.
But it wasn’t like that at the beginning of the web browsers.
And if you gave those properties: width of 300px + two sides of padding (20px) + two sides of borders (4px), it meant that the box HTML element size was equal to 324px.
Example:
Honestly, this way of calculation size isn’t intuitive.
And then in 2009/2010 came a new property to CSS, the box-sizing property, that changed all this behavior.
The New box-sizing Property
The box-sizing property gives you the possibility to tell the browser what size property (width or height) is included.
By default, it included only the content ( content-box value).
But now, you can tell the browser to include the padding and the borders in the calculation with the new value of border-box .
- content-box — include only the content.
- border-box — include content + padding + border.
This new possibility is a lot more intuitive to include the padding and the border in the size of the HTML element.
Resetting Everything to Border-box
In 2020, it is better to reset all the HTML elements to the border-box value. This, in most cases, is a better way to calculate size.
Because it is easier, we can now see that in a lot of new websites, adding in the CSS Reset styles, reset for all HTML elements will behave as box-sizing: border-box .
Resetting all HTML elements:
This way if we give an HTML element a width: 300px , padding: 10px , border: solid 2px green and box-sizing: border-box , the total width of this element will be 300px (and not 324px).
It also means that the content will shrink in this case to 276px width.
HTML тег <div>
Тег <div> — пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.
Тег <div> является блочным элементом, поэтому разрыв строки помещается до и после него.
Вы можете поместить любой элемент HTML в тег <div>, включая другой тег <div>.
Для применения стилей внутри параграфа используется тег <span>.
Синтакс
Тег <div> — парный, состоит из двух частей, открывающего (<div>) и закрывающего (</div>) тегов.
Пример
Результат
Расположение блоков <div>
При верстке HTML страниц с помощью слоев тег <div> является ее базовым фундаментом, так как именно этот тег определяет многочисленные структурные блоки веб-страницы.
Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.
Флексбокс¶
Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Пример
Результат
CSS свойство float ¶
CSS свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. С помощью свойства float можно размещать элементы по горизонтали рядом друг с другом, что позволяет верстать типовые фрагменты веб-страниц, вроде врезок, горизонтальных меню, каталога товаров, колонок и др.
Пример
Результат
Отрицательные отступы ¶
Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.
Пример
Результат
Позиционирование Relative + absolute positioning¶
Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative , а для дочернего position: absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.
Создание макета страницы и верстка
Как правило, веб-страница состоит из множества различных элементов, которые могут иметь сложную структуру. Поэтому при создании веб-страницы возникает необходимость нужным образом позиционировать эти элементы, стилизовать их так, чтобы они располагались на странице нужным образом. То есть возникает вопрос создания макета страницы, ее верстки.
Существуют различные способы, стратегии и виды верстки. Изначально распространенной была верстка на основе таблиц. Так как таблицы позволяет при необходимости очень легко и просто разделить вcе пространство веб-страницы на строки и столбцы. Строками и столбцами довольно легко управлять, в них легко позиционировать любое содержимое. Именно это и определило популярность табличной верстки.
Однако табличная верстка создает не самые гибкие по дизайну страницы, что является особенно актуальным аспектом в мире, где нет одного единственного разрешения экрана, за то есть большие экраны на телевизорах, малые экраны на планшетах и фаблетах, очень маленькие экраны на смартфонах и т.д. Все это многообразие экранов табличная верстка оказалась не в состоянии удовлетворить. Поэтому постепенно ей на смену пришла блочная верстка. Блочная верстка — это отосительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство float , а основным строительным элементов веб-страниц является элемент <div> , то есть по сути блок. Используя свойство float и элементы div или другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет значительно гибче.
Ранее в одной из прошлых тем рассматривалось действие свойства float . Теперь используем его для создания двухколоночной веб-страницы. Допустим, вверху и внизу у нас будут стандартно шапка и футер, а в центре — две колонки: колонка с меню или сайдбар и колонка с основным содержимым.
В начале определим все блоки. При работе с элементами, которые используют обтекание и свойство float , важен их порядок. Так, код плавающего элемента, у которого устанавливается свойство float , должен идти перед элементом, который обтекает плавающий элемент. То есть блок сайдбара будет идти до блока основного содержимого:
То есть пока получается примерно следующая страница:
Высота, граница и отступы блоков в данном случае добавлены только для красоты, чтобы идентифицировать пространство блока и отделять его от других.
Далее, чтобы переместить блок сайдбара влево по отношению к блоку основного содержимого и получить эффект обтекания, нам надо указать у блока сайдбара свойство float: left и предпочтительную ширину. Ширина может быть фиксированной, например, 150 px или 8 em. Либо также можно использовать проценты, например, 30% — 30% от ширины контейнера body. С одной стороны, блоками с фиксированной шириной легче управлять, но с другой процентные значения ширины позволяют создавать более гибкие, резиновые блоки, которые изменяют размеры при изменении размеров окна браузера.
Последним шагом является установка отступа блока с основным содержимым от блока сайдбара. Поскольку при обтекании обтекающий блок может обтекать плавающий элемент и справа и снизу, если плавающий элемент имеет меньшую высоту, то нам надо установить отступ, как минимум равный ширине плавающего элемента. Например, если ширина сайдбара равна 150px, то для блока основного содержимого можно задать отступ в 170px, что позволит создать пустое пространство между двумя блоками.
При этом не стоит у блока основного содержимого указывать явным образом ширину, так как браузеры расширяют его автоматически, чтобы он занимал все доступное место.
Итак, принимая во внимание все выше сказанное, изменим стили блоков сайдбара и основного содержимого следующим образом:
В итоге у нас получится сайдбар по левую сторону от основного блока:
Высота блоков в данном случае указана условно для большей наглядности, в реальности, как правило, высоту будет автоматически устанавливать браузер.
Создание правого сайдбара будет аналогично, только теперь нам надо установить у сайдбара значение float: right , а у блока основного содержимого — отступ справа:
При этом разметка html остается такой же, блок сайдбара по прежнему должен предшествовать блоку основного содержимого.