В прошлом совете я рассказывал о ХТМЛ, ЦСС, тегах, элементах и их стилях. В этом совете — о том, как элементы раскладывать на странице.
Настроим отступы в резюме Остапа Бендера.
Было
<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>
Чтобы понять, где на странице показать элемент, браузер сверяется с его размерами и позиционированием. Чтобы определить размеры элемента, браузер представляет его в виде прямоугольной области (бокса) и считает ширину и высоту содержимого, отступы и рамки:
| По‑английски | По‑русски | |
| 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>Раскладка
Чтобы раскладывать элементы по странице, есть пять методов: позиционирование, флоаты, таблицы, флексбоксы и гриды. О таблицах, флексбоксах и гридах — в следующих советах. Разберёмся с позиционированием и флоатами.
Позиционированием элемент можно разместить в любом месте страницы, задав ему координаты. Есть пять вариантов позиционирования.
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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.