В прошлом совете я рассказывал о ХТМЛ, ЦСС, тегах, элементах и их стилях. В этом совете — о том, как элементы раскладывать на странице.

Настроим отступы в резюме Остапа Бендера.

Было

<section>
  <h3>Кто такой? Чем знаменит?</h3>
  <p>
     Я великий комбинатор,
     идейный борец за денежные знаки.
  </p>
  <p>
     Кроме того, я знаю
     четыреста
     сравнительно честных
     способа отъёма денег.
  </p>
</section>

<section>
  <h3>Аферы</h3>
  <p>
     В городе Арбатове выдал себя за сына
     лейтенанта Шмидта и получил
     от председателя горисполкома
     небольшую материальную помощь.
  </p>
</section>

Стало

<style>
body {
  /*
  * Настраиваем основной текст:
  * Бюросериф, кегль 24 пикселя,
  * интерлиньяж 27 пикселей.
  */
  font-family: Bureauserif, serif;
  font-size: 24px;
  line-height: 27px;
}

h3 {
  /*
  * Для заголовков третьего уровня
  * используем жирный Бюросанс.
  */
  font-family: Bureausans, sans-serif;
  font-weight: bold;
  /*
  * Сбрасываем отступы,
  * чтобы заголовок не отбивался
  * от последующего текста.
  */
  margin: 0;
}

p {
  /*
  * Отступы задаются по часовой стрелке:
  * верхний, правый, нижний и левый.
  * Выставляем нижний отступ
  * в 2/3 от кегля.
  */
  margin: 0 0 .66em 0;
}

section {
  /*
  * После главы — увеличенный отступ.
  */
  margin: 0 0 2em 0;
}
</style>

<section>
  <h3>Кто такой? Чем знаменит?</h3>
  <p>
     Я великий комбинатор,
     идейный борец за денежные знаки.
  </p>
  <p>
     Кроме того, я знаю
     четыреста
     сравнительно честных
     способа отъёма денег.
  </p>
</section>

<section>
  <h3>Аферы</h3>
  <p>
     В городе Арбатове выдал себя за сына
     лейтенанта Шмидта и получил
     от председателя горисполкома
     небольшую материальную помощь.
  </p>
</section>
Кто такой? Чем знаменит?Я великий комбинатор, идейный борец за денежные знаки.Кроме того, я знаю четыреста сравнительно честных способа отъёма денег.
АферыВ городе Арбатове выдал себя за сына лейтенанта Шмидта и получил от председателя горисполкома небольшую материальную помощь.

Чтобы понять, где на странице показать элемент, браузер сверяется с его размерами и позиционированием. Чтобы определить размеры элемента, браузер представляет его в виде прямоугольной области (бокса) и считает ширину и высоту содержимого, отступы и рамки:

Иллюстрация блочной (боксовой) модели с Mozilla Developer Network
По‑английскиПо‑русски
contentсодержимоесодержимое бокса: текст и другие вложенные в него боксы
widthширина
heightвысота
paddingвнутренний отступотступ от содержимого до рамки
borderрамкарамка вокруг содержимого
marginвнешний отступотступы от рамки до внешних боксов

Можно сделать блочный элемент строчным и наоборот с помощью ЦСС. display: block сделает элемент блочным, display: inline — строчным.

Браузер по‑разному строит боксы для строчных и блочных элементов. Блочные элементы — прямоугольники, располагаются как кирпичи друг под другом и занимают всю ширину родительского элемента. Например, абзацы (<p>), заголовки (<h1>) и списки (<ul>) — блочные элементы.

Можно сделать блочный элемент строчным и наоборот с помощью ЦСС. display: block сделает элемент блочным, display: inline — строчным.

Строчные элементы занимают ровно столько места, сколько нужно их содержимому, выстраиваются друг за другом и переносятся как строки. Например, полужирное (<b>), курсивное (<i>) начертание и ссылки (<a>) — строчные элементы.

Особенности блочных и строчных элементов на Mozilla Developer Network.

<p style="border: 1px solid gray">
  На <i style="width: 300px">строчные</i>
  <b style="height: 300px">не действуют</b>
  width и height
</p>

<p style="border: 1px solid gray">
  А этот абзац
  займет 100% ширины
</p>
На строчные не действуют width и heightА этот абзац займет 100% ширины

Раскладка

Чтобы раскладывать элементы по странице, есть пять методов: позиционирование, флоаты, таблицы, флексбоксы и гриды. О таблицах, флексбоксах и гридах — в следующих советах. Разберёмся с позиционированием и флоатами.

Позиционированием элемент можно разместить в любом месте страницы, задав ему координаты. Есть пять вариантов позиционирования.

Static

Это способ по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.

<style>
div {
  height: 40px;
  margin: 0 0 1px;
  background: #e9ddc2;
}
</style>

<div></div>
<div></div>
<div></div>

Absolute

Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.

<style>
div {
  height: 40px;
  margin: 0 0 1px;
  background: #e9ddc2;
}

.absolute {
  position: absolute;
  top: -20px;
  left: -20px;
  right: 20px;
}
</style>

<div></div>
<div class="absolute"></div>
<div></div>

Relative

Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.

<style>
div {
  height: 20px;
  margin: 0 0 1px;
  background: #e9ddc2;
}

.relative {
  position: relative;
  top: 20px;
  left: 20px;
}
</style>

<div></div>
<div class="relative"></div>
<div></div>

Fixed и sticky

Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей. Закреплённое позиционирование — гибрид между относительным и фиксированным.

Флоаты

С помощью флоатов элемент можно прижать либо к левому, либо к правому краю родителя. Следующие за ним элементы подтягиваются вверх, пытаясь занять его место, или обтекают его.

Добавим в резюме Остапа Бендера его фотографию и ссылку, чтобы добавить страницу в избранное:

<style>
img {
  /*
  * Прижимаем картинку
  * к левому краю.
  */
  float: left;
  /*
  * Фиксируем высоту картинки.
  */
  height: 240px;
  width: auto;
  /*
  * Задаем внешние отступы:
  * 36% от кегля сверху,
  * чтобы попасть в строчные;
  * 50% от кегля справа,
  * чтобы отодвинуть текст.
  */
  margin: .36em .5em 0 0;
}

section {
  /*
  * Задаем левое поле
  * для всех секций.
  */
  padding-left: 1em;
  /*
  * Задаем относительное
  * позиционирование, чтобы
  * все дочерние элементы
  * с абсолютным позиционированием
  * отсчитывали свои координаты
  * от секции.
  */
  position: relative;
}

.bookmark {
  /*
  * Позиционируем ссылку
  * для добавления в закладки
  * в левом верхнем углу секции.
  * Выравниваем по базовой.
  */
  position: absolute;
  top: 0;
  left: -.15em;
  /*
  * Убираем подчеркивание.
  */
  text-decoration: none;
}
</style>

<section>
  <img src="ostap.jpg">
  <h3>Кто такой? Чем знаменит?</h3>
  <p>
     Я великий комбинатор,
     идейный борец за денежные знаки.
  </p>
  <p>
     Кроме того, я знаю
     четыреста
     сравнительно честных
     способа отъёма денег.
  </p>
  
  <a class="bookmark" href="#">☆</a>
</section>
Кто такой? Чем знаменит?Я великий комбинатор, идейный борец за денежные знаки.Кроме того, я знаю четыреста сравнительно честных способа отъёма денег.
АферыВ городе Арбатове выдал себя за сына лейтенанта Шмидта и получил от председателя горисполкома небольшую материальную помощь.

Что запомнить

  • Абсолютное позиционирование, чтобы вытащить элемент и переставить куда угодно.

  • Фиксированное или закреплённое позиционирование, чтобы элемент «залипал» в окне.

  • Любому элементу можно задать отступы и рамку. Блочным элементам можно задать ещё и ширину с высотой.

Что дальше

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы