zrayev/ display: inline-block;

## display: inline-block;
Характеристики этих элементов следующие.

  Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
  Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
  Ширина равна содержимому плюс значения отступов, полей и границ.
  Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  Можно выравнивать по вертикали с помощью свойства vertical-align.
  Разрешено задавать ширину и высоту.
   Эффект схлопывания отступов не действует.

## "px", "em", "rem"
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
    Главное достоинство пикселя – чёткость и понятность

    Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Давно на свалке: mm, cm, pt, pc


1em – текущий размер шрифта.
Размеры в em – относительные, они определяются по текущему контексту.
Можно брать любые пропорции от текущего шрифта: 2em, 0.5em 0.1.

Проценты %, как и em – относительные единицы.
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.


Единица rem: смесь px и em


px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: "x"(ex) и "0"(ch), используется там, где нужно упростить масштабирование компоненты.
rem – задаёт размер относительно шрифта <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у <html>.
% – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
vw, vh, vmin, vmax – относительно размера экрана.

## block
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника.
Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым,
и он всегда начинается с новой строки.
К блочным элементам относятся теги

<address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul>

и некоторые устаревшие.
Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table
и в некоторых случаях run-in.

Для блочных элементов характерны следующие особенности.

Блоки располагаются по вертикали друг под другом.
На прилегающих сторонах элементов действует эффект схлопывания отступов.
Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>.
По ширине блочные элементы занимают всё допустимое пространство.
Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
Текст по умолчанию выравнивается по левому краю.

## EM vs REM
Как? У меня есть два простых правила:
  Задавай значения в em, если свойства масштабируются относительно font-size;
  Во всех остальных случаях задавай значения в rem.

Используем только REM'ы для создания элемента заголовка
rem. rem (“root em”) (кореневий em) це розмір шрифту кореневого елементу
документа.
На відміну від em, яка може бути різною для кожного елемента,
rem є постійною для всього документа.

## inline
Строчными называются такие элементы документа, которые являются непосредственной частью строки.
К строчным элементам относятся теги

<img>, <span>, <a>, <q>, <code> и др.,

а также элементы, у которых свойство display установлено как inline.
В основном они используются для изменения вида текста или его логического выделения.

По аналогии с блочными элементами перечислю их характерные особенности.

Внутрь строчных элементов допустимо помещать текст или другие строчные элементы.
Вставлять блочные элементы внутрь строчных запрещено.
  Эффект схлопывания отступов не действует.
Свойства, связанные с размерами (width, height) не применимы.
Ширина равна содержимому плюс значения отступов, полей и границ.
Несколько строчных элементов идущих подряд располагаются на одной строке
и переносятся на другую строку при необходимости.
Можно выравнивать по вертикали с помощью свойства vertical-align.
Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов.
Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое,
но легко объединяется со стилями через классы или идентификаторы.
За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

Для вёрстки строчные элементы применяются реже, чем блочные.
Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры
<div>, <p> и подобные широко распространённые теги.
Тем не менее, блочные и строчные элементы удачно дополняют друг друга,
поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.

## Дерево DOM
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.


Всё, что есть в HTML, находится и в DOM.

Всего различают 12 типов узлов, но на практике мы работаем с четырьмя из них:

Документ – точка входа в DOM.
Элементы – основные строительные блоки.
Текстовые узлы – содержат, собственно, текст.
Комментарии – иногда в них можно включить информацию, которая не будет показана, но доступна из JS.

DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы.


Итого

DOM-модель – это внутреннее представление HTML-страницы в виде дерева.
Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.
У элементов DOM есть свойства и методы, которые позволяют изменять их.
IE8- не генерирует пробельные узлы.
Кстати, DOM-модель используется не только в JavaScript, это известный способ представления XML-документов.

## авп
ап

## Плюсы Mobile First подхода
Плюсы Mobile First подхода

Напомню, что на сегодняшний день количество пользователей использующих мобильные устройства для серфинга в интернете достигло 60%. И поэтому использование Mobile First при разработке вебсайта дает большие преимущества для этих пользователей в первую очередь.

Один вебсайт для всех устройств
Пользователи получат важное содержание страницы в первую очередь
Быстрая загрузка страниц при низкой скорости подключения
Удобный интерфейс для навигации в мобильном экране
Минимальное количество веб ресурсов требуемое для отображения основного содержимого – экономия мобильного Интернет трафика
Топовые позиции в результатах поиска Google
	Характеристики этих элементов следующие.

	Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
	Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
	Ширина равна содержимому плюс значения отступов, полей и границ.
	Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
	Можно выравнивать по вертикали с помощью свойства vertical-align.
	Разрешено задавать ширину и высоту.
	Эффект схлопывания отступов не действует.
	Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
	Главное достоинство пикселя – чёткость и понятность

	Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

	Давно на свалке: mm, cm, pt, pc


	1em – текущий размер шрифта.
	Размеры в em – относительные, они определяются по текущему контексту.
	Можно брать любые пропорции от текущего шрифта: 2em, 0.5em 0.1.

	Проценты %, как и em – относительные единицы.
	Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.


	Единица rem: смесь px и em


	px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
	em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: "x"(ex) и "0"(ch), используется там, где нужно упростить масштабирование компоненты.
	rem – задаёт размер относительно шрифта <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у <html>.
	% – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
	vw, vh, vmin, vmax – относительно размера экрана.
	Блочным называется элемент, который отображается на веб-странице в виде прямоугольника.
	Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым,
	и он всегда начинается с новой строки.
	К блочным элементам относятся теги

	<address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul>

	и некоторые устаревшие.
	Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table
	и в некоторых случаях run-in.

	Для блочных элементов характерны следующие особенности.

	Блоки располагаются по вертикали друг под другом.
	На прилегающих сторонах элементов действует эффект схлопывания отступов.
	Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>.
	По ширине блочные элементы занимают всё допустимое пространство.
	Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
	Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
	Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
	На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
	Текст по умолчанию выравнивается по левому краю.
	Как? У меня есть два простых правила:
	Задавай значения в em, если свойства масштабируются относительно font-size;
	Во всех остальных случаях задавай значения в rem.

	Используем только REM'ы для создания элемента заголовка
	rem. rem (“root em”) (кореневий em) це розмір шрифту кореневого елементу
	документа.
	На відміну від em, яка може бути різною для кожного елемента,
	rem є постійною для всього документа.
	Строчными называются такие элементы документа, которые являются непосредственной частью строки.
	К строчным элементам относятся теги

	<img>, <span>, <a>, <q>, <code> и др.,

	а также элементы, у которых свойство display установлено как inline.
	В основном они используются для изменения вида текста или его логического выделения.

	По аналогии с блочными элементами перечислю их характерные особенности.

	Внутрь строчных элементов допустимо помещать текст или другие строчные элементы.
	Вставлять блочные элементы внутрь строчных запрещено.
	Эффект схлопывания отступов не действует.
	Свойства, связанные с размерами (width, height) не применимы.
	Ширина равна содержимому плюс значения отступов, полей и границ.
	Несколько строчных элементов идущих подряд располагаются на одной строке
	и переносятся на другую строку при необходимости.
	Можно выравнивать по вертикали с помощью свойства vertical-align.
	Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов.
	Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое,
	но легко объединяется со стилями через классы или идентификаторы.
	За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

	Для вёрстки строчные элементы применяются реже, чем блочные.
	Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры
	<div>, <p> и подобные широко распространённые теги.
	Тем не менее, блочные и строчные элементы удачно дополняют друг друга,
	поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.
	Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов.

	Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

	DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.


	Всё, что есть в HTML, находится и в DOM.

	Всего различают 12 типов узлов, но на практике мы работаем с четырьмя из них:

	Документ – точка входа в DOM.
	Элементы – основные строительные блоки.
	Текстовые узлы – содержат, собственно, текст.
	Комментарии – иногда в них можно включить информацию, которая не будет показана, но доступна из JS.

	DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы.


	Итого

	DOM-модель – это внутреннее представление HTML-страницы в виде дерева.
	Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.
	У элементов DOM есть свойства и методы, которые позволяют изменять их.
	IE8- не генерирует пробельные узлы.
	Кстати, DOM-модель используется не только в JavaScript, это известный способ представления XML-документов.
	Плюсы Mobile First подхода

	Напомню, что на сегодняшний день количество пользователей использующих мобильные устройства для серфинга в интернете достигло 60%. И поэтому использование Mobile First при разработке вебсайта дает большие преимущества для этих пользователей в первую очередь.

	Один вебсайт для всех устройств
	Пользователи получат важное содержание страницы в первую очередь
	Быстрая загрузка страниц при низкой скорости подключения
	Удобный интерфейс для навигации в мобильном экране
	Минимальное количество веб ресурсов требуемое для отображения основного содержимого – экономия мобильного Интернет трафика
	Топовые позиции в результатах поиска Google