Поток документа (flow) - порядок отображения элементов на странице.
Элементы, расположенные выше по коду, отображаются перед элементами, расположенными ниже. Это делает результат вывода элементов страницы предсказуемым и управляемым.
Такие элементы имеют ширину, высоту, отступы
Блоки занимают всю ширину родительского элемента. Например, если задать им фон, то фон будет виден по всей ширине родительского элемента
Так как блочный элемент занимает всю ширину, его внутренние элементы могут быть выровнены горизонтально, т.е. к левому, правому краю, посередине и по всей ширине
Свойства строчных элементов не предназначены для блочных элементов, например, вертикальное выравнивание (vertical-align)
В строчные элементы запрещено вставлять блочные
Высота строчных элементов не контролируется свойством height
Ширина пропорциональна ширине контента
Строчным элементам можно задать вертикальное выравнивание
В строчно-блочных (inline-block) элементах возможно размещать текст или блочные элементы
Высота элемента рассчитывается автоматически браузером на основе контента
Ширина равна ширине контента с учетом отступов и границ
Inline-block элементы расположены в одной строке и переносятся на следующую при необходимости
Могут быть выровнены по вертикали
Допускается установка ширины и высоты
HTML интерпретирует символы <, >, &, " и др. как специальные. При необходимости их использования они заменяются на, соответственно, <, >, &, ".
CSS являются каскадными таблицами стилей. Это показывает, как стили применяются к элементам документа.
CSS-каскад называется так, потому что объявления стилей "каскадируются" на элементы из многих источников.
Каскад комбинирует важность, происхождение, специфичность и порядок источников для принимаемых стилей, чтобы точно и безконфликтно определить, какой именно стиль должен быть применен к конкретному элементу.
НВ CSS действует наследование. Но не все свойства могут наследоваться. Например, свойство text-size передается потомкам, а padding - нет.
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д.
Классы определяют группу тегов.
Для выбора уникального элемента используются ID. На странице не должно быть более одного элемента с одинаковыми ID.
Универсальный селектор *. Этот селектор позволяет выбрать абсолютно все элементы страницы.
Чтобы выбрать какой-либо элемент, вложенный в другой, используют селектор потомков.
Данный селектор используется, когда надо выбрать только прямых потомков, т.е. вложенных непосредственно в родителя.
General Sibling Combinator позволяет выбрать элементы, расположенные рядом, т.е. те, которые находятся на том же уровне вложенности после нужного элемента.
Этот комбинатор аналогичен General Sibling Combinator, но позволяет выбрать только смежные элементы.
Данный селектор позволяет выбрать элементы с определенными атрибутами. Объявляется в квадратных скобках
Псевдо-классы используются для определения псевдо-состояния, в котором может быть элемент. Для использования псевдо-классов используется двоеточие.
Используется формула (an + b). Описание:
a - размер цикла,
n - счетчик (начинается с 0),
и b - шаг цикла.
Также в CSS можно определять псевдо-элементы с помощью ::
Браузер руководствуется специфичностью селекторов при выборе свойств CSS, которые наиболее релевантны для элемента и будут к нему применены.
При использовании !important в объявлении свойства, оно перекрывает любое другое объявление.
Использование !important считается плохой практикой, его стоит избегать, т.к. оно затрудняет дебаггинг из-за нарушения естественного каскадирования ваших стилей.
Универсальный селектор * обладает нулевым весом
Псевдо-элементы имеют вес (0, 0, 0, 1) в отличие от псевдо-классов (0, 0, 1, 0)
Псевдо-класс :not() не добавляет специфичности селектору
Значение !important может перекрыться только другим !important, определенным в CSS позже. Можно считать, что его вес составляет 1, 0, 0, 0, 0
inline
Основные значения свойства display:
block
inline-block
HTML-теги: <span>, <a>, <input> ...
HTML-теги: <div>, <p>, <h1> ...
HTML-теги: <button>, <select> ...
Свойство float определяет, к какой стороне документа будет выровнен элемент, в то время как остальные элементы будут обтекать его с другой стороны.
Когда значение свойства равно none, элемент отображается на странице обычным образом.
http://htmlbook.ru/css/float
Чтобы запретить обтекание элемента с какой-либо стороны следует использовать cвойство clear. В этом случае блок будет под элементом. Основные значения: both, right, left.
Пример использования:
Может возникнуть ситуация, при которой в контейнере расположены только "плавающие элементы". В этом случае он "схлопнется" по высоте
Overflow:hidden для контейнера может помочь в таком случае
Text
Свойство flex определяет, как элемент может расширяться или сжиматься в своем флекс-контейнере. Это свойство объединяет свойства flex-grow, flex-shrink иflex-basis.
CSS-columns не работают с флекс-боксами, как и float, clear и vertical-align.
Для выравнивания по вертикали используются align-content (для родителя) и align-items (для потомков)
Может использоваться для верстки, особенно для панелей навигации, подсказок для полей форм, всплывающих модальных окон и т.д..
static
absolute
relative
fixed
sticky
isn't fully supported http://caniuse.com/#feat=css-sticky
CSS Grid Layout - это двумерная система, которая может обрабатывать как колонки так и строки.
Двумя основными компонентами CSS Grid являются контейнер сетки и дочерние элементы (прямые потомки).
Hint triangle: https://css-tricks.com/snippets/css/css-triangle/
http://htmlbook.ru/samcss Самоучитель CSS
http://css.yoksel.ru/css-selectors Css-селекторы, часть 1
http://css.yoksel.ru/css-selectors-part2 Css-селекторы, часть 2
http://css.yoksel.ru/specifity/ Сколько весят селекторы?
http://css.yoksel.ru/pages/css-selectors.html Таблица селекторов
http://htmlbook.ru/css/cat/pseudoclass Псевдоклассы
http://htmlbook.ru/css/cat/pseudoelement Псевдоэлементы
https://css-tricks.com/specifics-on-css-specificity Specifics on CSS Specificity
http://habrahabr.ru/post/137588 Взвешиваем селекторы CSS
http://cssspecificity.com CSS Specifity
https://events.yandex.ru/lib/talks/560 CSS: Селекторы, псевдоклассы. Специфичность и наследование
http://webhitech.ru/articles/selectors-performance-part-1 Селекторы и производительность