CSS

Базовый дизайн страницы

По мотивам https://jgthms.com/web-design-in-4-minutes/#font-family

body {
  margin: 0 auto;
  max-width: 50em;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  padding: 4em 1em;
  color: #555;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

h1,
h2,
strong {
  color: #333;
}

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

display

block

Блочные элементы

Начинаются с новой строки и занимают всю доступную ширину.

К блочным элементам относятся: div, p, form, li, header, footer, section и другие.

inline

Строчные элементы

Вставляются в абзац, не нарушая его структуры. К строчным относятся span, a.

none

Элемент не показывается, как будто бы не существует (в случае visibility:hidden элемент продолжает занимать место, просто становится невидим).

margin:auto

При установке блочному элементу левого и правого марджина в auto он автоматически центруется по горизонтали.

max-width

Если установить блоку абсолютный width, то при уменьшении размера браузера появится горизонтальный скролл. Поэтому лучше указывать max-width, тогда блок будет стремиться занять указанную ширину, но сжиматься, если не умещается.

box model

Размеры padding и border выходят за пределы указанных размеров width и height. То есть если указано:

width: 50px;
border: 1px solid;
padding: 5px;

То реальная ширина элемента будет 57 пикселей (50+1+1+5)

Чтобы этого не происходило, можно указать:

box-sizing:border-box;

Тогда у элемента будет ширина ровно 50 пикселей.

position

static

Значение по умолчанию.

relative

Ведет себя как static, пока не будут добавлены top, right, bottom или left. Они позволяют сдвигать положение элемента относительно его изначального расположения. При этом все элементы вокруг двигаться не будут и будут располагаться так, как будто все эти свойства равны нулю.

Помимо этого, position:relative позволяет использовать z-index. Без position:relative z-index работать не будет!

fixed

Занимает фиксированное положение на экране. Можно задать расположеное элементами top, right, bottom или left.

absolute

Ведет себя как fixed за исключением того, что позиционирование отсчитывается относительно ближайшего родителя с position != static. Если такого родителя нет, то считается относительно окна браузера.

Помимо этого, элемент "исключается" из нормальной структуры документа, то есть остальные элементы будут вести себя так, как будто его нет на странице!

float

Предназначен для обертывания текста вокруг изображений. При его использовании получается следующее:

нижеследующие элементы без float позиционируются, как будто элемента с float не существует.
однако текст в них "обтекает" элемент с float.
при этом обтекание текста происходит так, будто элементы, содержащие текст, никуда не позиционировались!
каждый нижеследующий элемент с float обтекает предыдущий

Чтобы действие элемента с float прекратилось, нужно указать свойство clear:[left|right|both] тому элементу, начиная с которого обтекать больше не нужно.

media queries

@media screen and (min-width:600px) {
	...
}

@media screen and (max-width:599px) {
	...
}

Список таргетов для медиа-запросов: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

inline-block

Похожи на inline элементы, но имеют ширину и высоту.

Странности

Collapsing margins

Если есть несколько граничащих марджинов (т.е. между ними нет никакого контента, паддинга, бордера или зазора) двух или более элементов (как соседних так и вложенных), то они объединяются, чтобы образовать единый марджин, размер которого будет равер размеру максимального из объединенных.

Иными словами, если вертикальные марджины двух элементов соприкасаются, то оставляется только тот марджин, который больше, а другой будет "схлопнут". Если у одного из элементов марджин отрицательный, то правило не работает и марджины будут суммированы. Если оба отрицательны, то используется наибольший.

В следующих случаях правило не работает:

"плавающие" (floated) элементы
абсолютно позиционированные элементы
элементы inline-block
элементы со значением overflow, любым кроме visible
"очищенные" элементы
корневой элемент

Здесь есть примеры: https://www.sitepoint.com/collapsing-margins/

Height

Иногда бывает так, что применяешь на элементе height в процентах, а он игнорится. Тут нужно понимать несколько вещей про поведение этого атрибута:

если у родительского элемента не указана высота, то у дочернего атрибут height игнорируется!
значение в процентах означает, сколько процентов от высоты родительского элемента будет занимать этот
значение вычисляется от реальной высоты родительского контейнера

Hints

Спрятать скролл-бар

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

http://jsfiddle.net/5GCsJ/20882/

Диву-потомку задать ту же ширину/высоту, что и у дива-родителя

#child {
  width: 100%;
  height: 100%;
}

Див, занимающий всю доступную высоту, в котором все элементы растягиваются, а нижний имеет фиксированную высоту

Мы снизу у контейнера сделаем марджин, в котором и будет находиться наш элемент с фиксированной высотой. То есть он будет как бы за пределами контейнера, но при этом не будет мешать соседним элементам, так как целиком находится в марджине.

<div class="container">
  <div class="panel1"/>
  <div class="panel2"/>
  <div class="footer"/>
</div>

.container {
  height: 100%;
  padding-bottom: 60px; // высота футера
}

.panel1 {
  height: 60%;
}

.panel2 {
  height: 40%;
}

.footer {
  height: 60px;
}

How's that again?

CSS