x
 
Василий
17 августа 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как раскладывать ХТМЛ-элементы на странице? (Часть первая: боксы и позиционирование)


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

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

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

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

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

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

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

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

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

<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: 20px;
  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;
  /*
  * Задаем внешние отступы:
  * 40% от кегля сверху,
  * чтобы попасть в строчные;
  * 50% от кегля справа,
  * чтобы отодвинуть текст.
  */
  margin: .4em .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>

Кто такой? Чем знаменит?

Я великий комбинатор, идейный борец за денежные знаки.

Кроме того, я знаю четыреста сравнительно честных способа отъёма денег.

Аферы

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

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

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

Что дальше

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

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Занятия с 27 августа. Мы напишем вам, когда будет открыт набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что за font-family? Где его взять? 2 Заметил, что сайт бюро перешел на HTTPS. Расскажите, как переходили? 1 Как сделана залипающая кнопка на странице книжной полки




Недавно всплыло

Как объяснить возрастному руководителю проектов, что не стоит жить совдепией? 1 Почему в главном меню на сайте бюро вы не подчёркиваете ссылки? 3 Илья, видео с переговорами прикольные, продолжайте :-) 2 Исследование Гугля: пользователям легче читать, когда подписи над полями 1