Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Мы рассмотрели основы блочной модели в блоке Введение в CSS. Эта статья является повторением и более детальным изучением некоторых подробностей в этом вопросе.

Необходимые знания: Базовый HTML (изучить Введение в HTML) и понимание как работает CSS (изучить Введение в CSS).
Цель: Повторить основы блочной модели CSS и более глубокое погружение в данную тему.

Блочные свойства

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

  • width и height устанавливают ширину и высоту для блока контента.
  • Семейство свойств padding устанавливает величину внутренних отступов (если необходимо установить отступ только для одной стороны, можно воспользоваться соответствующим свойством, например, нижний отступ padding-bottom).
  • Семейство свойств border устанавливает размер, стиль и цвет границы (также доступно много специальных свойств).
  • Семейство свойств margin устанавливает размеры внешних отступов снаружи CSS блока, которые отталкивают другие блоки в разметке страницы (опять же доступны спецальные свойства, такие как margin-bottom).

Некоторые другие моменты о которых стоит помнить:

  • Высота боксов не учитывает процентную длину; высота окна всегда принимает высоту содержимого коробки, если не задана конкретная абсолютная высота (например, пикселей или ems.) Это более удобно, чем высота каждого окна на вашей странице, на 100% от высоты окна просмотра.
  • Границы также игнорируют параметры процентной ширины.
  • Поля имеют определенное поведение, называемое крах развала: когда два ящика касаются друг друга, расстояние между ними - это значение самого большого из двух касательных полей, а не их суммы.

Note: See The box model article's Box properties section for a more complete overview and an example.

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.)

Note: See The box model article's Overflow section for a more complete overview and an example.

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 background-clip property on the box.

Outline

The outline of a box is something that looks like a border but which is not part of the box model. It behaves like the border but is drawn on top of the box without changing the size of the box (to be specific, the outline is drawn outside the border box, inside the margin area.)

Note: Beware when using the outline property. It is used in some cases for accessibility reasons to highlight active parts of a web page such as links when a user clicks on them. If you do find a use for outlines, make sure you don't make them look just like link highlights as this could confuse users.

Advanced box properties

Now we've had a brief recap, let's look at some more advanced box properties that you'll find useful.

Setting width and height constraints

Other properties exist that allow more flexible ways of handling content box size — setting size constraints rather than an absolute size. This can be done with the properties min-width, max-width, min-height, and max-height.

An obvious use is if you want to allow a layout's width to be flexible, by setting its outer container's width as a percentage, but you also don't want it to become too wide or too narrow because the layout would start to look bad. One option here would be to use responsive web design techniques (which we'll cover later), but a simpler method might be to just give the layout a maximum and minimum width constraint:

width: 70%;
max-width: 1280px;
min-width: 480px;

You could also couple this with the following line, which centers the container it is applied to inside its parent:

margin: 0 auto;

0 causes the top and bottom margins to be 0, while auto (in this case) shares the available space between the left and right margins of the container, centering it. The end result is that when the container is within the min and max width constraints, it will fill the entire viewport width. When 1280px width is exceeded, the layout will stay at 1280px wide, and start to be centered inside the available space. When the width goes below 480px, the viewport will become smaller than the container, and you'll have to scroll to see it all.

You can see the above example in action in min-max-container.html (see the source code).

Another good use of max-width is to keep media (e.g. images and video) constrained inside a container. Returning to the above example, the image causes a problem — it looks ok until the container becomes narrower than the image, but at this point the image starts to overflow the container (as it is a fixed width). To sort the image out, we can set the following declarations on it:

display: block;
margin: 0 auto;
max-width: 100%;

The first two make it behave like a block element and center it inside the parent container. But the real magic is in the third one. Setting the image's max-width to 100% constrains the image's width to be smaller than the width of the container. Therefore, if the container shrinks to be smaller than the image width, the image will shrink along with it.

You can try this modified example at min-max-image-container.html (see the source code).

Note: This technique works as far back as Internet Explorer 7, so it is nicely cross browser.

Changing the box model completely

The total width of a box is the sum of its width, padding-right, padding-left, border-right, and border-left properties. In some cases it is annoying (for example, what if you want to have a box with a total width of 50% with border and padding expressed in pixels?) To avoid such problems, it's possible to tweak the box model with the property box-sizing. With the value border-box, it changes the box model to this new one:

Let's look at a live example. We will set up two identical <div> elements, giving each one the same width, border and padding. We will also use some JavaScript to print out the computed value (the final on-screen value in pixels) of the width for each box. The only difference is that we've given the bottom box box-sizing: border-box, but we've left the top box with its default behaviour.

First, the HTML:

<div class="one"></div>
<div class="two"></div>

Now the CSS:

html {
  font-family: sans-serif;
  background: #ccc;
}

.one, .two {
  background: red;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px auto;
}

.two {
  box-sizing: border-box;
}

Finally, a little JavaScript to measure the overall computed widths:

var one = document.querySelector('.one');
var two = document.querySelector('.two');

function outputWH(box) {
  var width = box.offsetWidth;
  var height = box.offsetHeight;
  box.textContent = 'Width: ' + width + 'px, Height: ' + height + 'px.'
}

outputWH(one);
outputWH(two);

This gives us the following result:

So what's happened here? The width and height of the first box are equal to content + padding + border, as you'd expect. The second box however has its width and height equal to the width and height set on the content via CSS. The padding and border haven't added onto the total width and height; instead, they've taken up some of the content's space, making the content smaller and keeping the total dimensions the same.

You can also see this example running live at box-sizing-example.html (see the source code).

Типы отображения блоков

Всё, о чём мы говорили до сих пор относилось к блокам, которые представляют элементы блочного уровня (block-level elements). Тем не менее, CSS имеет и другие типы блоков, которые ведут себя иначе. Тип блока, применяемого к элементу, определяется свойством display.

Распространённые 

Существует множество различных значений для display, тремя самыми популярными из которых есть block, inline, и inline-block.

  • block - блок, который укладывается в другие блоки (то есть происходит перенос строки до и после элемента). Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float). Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно. Вся блочная модель, описана выше относится к блочным блокам block. Блоки прилегают друг к другу вплотную, если у них нет margin.
  • Блок inline является противоположным block: элементы располагаются на той же строке, последовательно. Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

    Содержимое inline может переноситься на другую строку. При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что inline состоит из объединения прямоугольников, но в целом, в отличие от block, прямоугольником не является. Любые padding, margin и border, установленные в inline, будут обновлять положение окружающего текста, но не влияют на положение окружающих block.

  • inline-block что-то среднее первых двух: элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства block. Как и inline-элемент: располагается в строке; размер устанавливается по содержимому. Во всём остальном – это block, то есть: элемент всегда прямоугольный; работают свойства width/height. Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

По умолчанию блочные элементы обозначаются как display: block; а встроенные -  display: inline; .

Примечание: Смотри The box model article's Types of CSS boxes section для детального ознакомления с примерами.

Uncommon display types

There are also some less commonly-used values for the display property that you will come across in your travels. Some of these have been around for a while and are fairly well supported, while others are newer and less well supported. These values were generally created to make creating web page/application layouts easier. The most interesting ones are:

  • display: table — allows you to emulate table layouts using non-table elements, without abusing table HTML to do so. To read more about this, See CSS tables.
  • display: flex — allows you to solve many classic layout problems that have plagued CSS for a long time, such as laying out a series of containers in flexible equal width columns, or vertically centering content. For more information, see Flexbox.
  • display: grid — gives CSS a native way of easily implementing grid systems, whereas it has traditionally relied on somewhat hack-ish CSS grid frameworks. Our CSS Grids article explains how to use traditional CSS grid frameworks, and gives a sneak peek at native CSS Grids.

What's next

After a quick little recap, we looked at some more advanced features of CSS for manipulating boxes, and finished up by touching on some advanced layout features. With this all behind us, we will now go on to look at backgrounds.

In this module

Метки документа и участники

Внесли вклад в эту страницу: KillerLive, SoMuchEffort, Maxim-Bernashevsky
Обновлялась последний раз: KillerLive,