Содержание

• Какие значения бывают у свойства display? В чём их особенность?
• Что делает свойство margin? Какие есть особенности у отрицательных значений? Что такое margin collapsing?
• Что делает свойство vertical-align? Какие у него есть значения?
• Что делает свойство float? Почему родитель элемента с float может схлопываться?
• Что делает свойство position
• Что делает свойство z-index
• Контекст наложения
• Flex
• Рамки
• Внешние рамки (outline)
• Тени
• Фоны
• Градиенты
• Анимации
• Трансформации
• Единицы измерения
• Что делает свойство object-fit
• Как стилизовать чекбокс?
• Как прижать футер к низу страницы (назвать хотя бы два способа)?
• Как отцентровать элемент по горизонтали (назвать хотя бы три способа)?
• Как отцентровать элемент по вертикали (назвать хотя бы три способа)?
• Что такое media-queries
• Чем отличаются responsive, adaptive, liquid
• Какие есть типы селекторов (по тегу, по классу и далее)?
• Как работают приоритеты селекторов? Какие есть 4 вида возможных отношений?

CSS

Какие значения бывают у свойства display? В чём их особенность?

	none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
	block — элемент ведёт себя как блочный.
	inline-block — элемент ведёт себя как строчный.
	inline-block — элемент ведёт себя снаружи как строчный, а внутри как блочный.
	flex — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами. Подробнее в Гайде по flexbox.
	grid — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки.
	

Примеры позиционирования элементов внутри родительского блока, а также вложенных элементов, в зависимости от значения display:

Что делает свойство margin? Какие есть особенности у отрицательных значений? Что такое margin collapsing?

Margin - это отступ от границы текущего элемента до внутренней границы (border) его родительского элемента

Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position . Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле:

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

Схлопывание не срабатывает:
• для элементов, у которых на стороне схлопывания задано свойство padding (не распространяется на сестринские элементы).
• для элементов, у которых на стороне схлопывания задана граница;
• на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
• на плавающих элементах (для них свойство float задано как left или right);
• для строчных элементов;
• для <html>

Примеры схлопывания маржинов и результирующего позиционирования элементов относительно родительского блока и друг друга. Все блоки имеют отступы margin-top и margin-bottom 60px. Другие свойства указаны в таблицах для каждого рассматриваемого случая. Высота внутренних блоков 60px (равна маржину для более легкого визуального восприятия)

Что делает свойство vertical-align? Какие у него есть значения?

Свойство для выравнивания строчного или строчно-блочного элемента по вертикали

vertical-align: baseline vertical-align: middle

vertical-align: top vertical-align: text-top

vertical-align: bottom vertical-align: text-bottom

vertical-align: sub vertical-align: super

vertical-align baseline middle vertical-align

vertical-align top text-top super vertical-align

vertical-align bottom sub text-bottom

Помимо ключевых слов можно использовать числовые значения. Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз. Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline. Процент рассчитывается от line-height родительского элемента.

Что делает свойство float? Почему родитель элемента с float может схлопываться?

Это родитель элемента с float. Он схлопнулся

Это родитель элемента с float, и ему задано свойство display: flow-root

Это родитель элемента с float, и ему задано свойство overflow: hidden;

Что делает свойство position?

Свойство position задаёт способ позиционирования элемента в документе. Совместно со свойствами left, right, top, bottom элементу задаётся его местоположение на странице.

Какие элементы называют позиционированными?

Это элементы со значением свойства Position, отличным от Static

Относительно чего происходит позиционирование элементов при разных значениях свойства position?

• Relative: элемент позиционируется так же, как и статичный, но его отображение может быть смещено относительно своего начального положения при помощи свойств left, right, top, bottom. Это смещение чисто визуальное и не затрагивает положение соседних элементов, кроме случая, когда элемент выходит за границы родителя, имеющего возможность прокрутки.
• Absolute: элемент позиционируется относительно ближайшего позиционированного предка
• Fixed: элемент позиционируется относительно окна браузера, за исключением случаев, если один из родителей имеет значения свойств transform, perspective или filter, отличные от none. В этом случае блок становится опорным, и позиционирование будет производиться уже относительно него, а не окна браузера
• Sticky: элемент позиционируется в нормальном потоке так же, как и статичный, а затем смещается при помощи свойств left, right, top, bottom относительно ближайшего родителя, имеющего прокрутку.

Что делает свойство z-index?

Свойство z-index позволяет управлять порядком наложения элементов друг на друга.

Контекст наложения

Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.

Как влияет на расположение элементов с заданным значением z-index?

Какие свойства создают новый контекст наложения?

Новый контекст наложения формируется если:
• это корневой элемент (<html>)
• элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto
• флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex
• элементу задано свойство opacity со значением меньше 1
• элементу задано свойство transform со значением не none
• элементу задано свойство mix-blend-mode со значением не normal
• элементу задано свойство filter со значением не none
• элементу задано свойство will-change или аналогичный атрибут
• элементу задано свойство isolation со значением isolate
• элемент с position: fixed
• элементу задано свойство -webkit-overflow-scrolling со значением touch

Flex

Что такое flexbox?

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Существует ли инлайновый flexbox?

Да, display: inline-flex

Что такое flex-container и flex-items?

Флекс-контейнер: элемент, к которому применяется свойство display: flex или display: inline-display: flex. Вложенные в него элементы подчиняются правилам раскладки флексов.

Флекс-элемент: элемент, вложенный во флекс-контейнер.

Как выравнивать элементы с помощью flexbox?

При помощи свойств flex-контейнера и flex-элементов

Принципы работы flex-grow, flex-shrink. Каким образом рассчитывается занимаемое и свободное пространство при использовании этих свойств?

flex-grow - задает пропорцию, в которой элемент занимает свободное пространство в flex-контейнере по сравнению с другими элементами. Положительное целое или дробное число, устанавливающее коэффициент роста flex-элемента. Значение по умолчанию 0 (не расширяется).

flex-shrink - задает пропорцию, в которой элемент сжимается (уступает свою ширину) по сравнению с другими элементами в flex-контейнере. Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1(не сжимается)

Формула для расчета ширины, на которую уменьшается flex-элемент:

			разница между шириной                                                                    на сколько нужно 
			flex-контейнера и общей  *  flex-shrink  * ширина          /  ширина flex-контейнера =    уменьшить ширину 
			шириной flex-элементов      элемента       flex-элемента                                  flex-элемента

		

Рамки

Внешние рамки (outline)

В чем отличие от обычных рамок?

• Нельзя задать разные стили внешней рамки для разных сторон блока
• Не имеет свойства border-radius, т.е. если нужно скруглить углы, то это нужно сделать при помощи свойства border-radius (т.е. внутренней рамкой)
• внешняя рамка может отступать от элемента (или размещаться внутри него)

Тени

Что делает свойство text-shadow

Свойство text-shadow даёт возможность добавить тень буквам в тексте.

Каждая тень состоит из следующих значений:
• Два или три значения размера с единицами измерения.
  • Если задано только два значения, то они интерпретируются как смещение по осям x и y.
  • Если задано и третье значение тоже, то оно отвечает за размытие тени.
• Цвет тени в любом доступном формате. Может быть указан до числовых значений размеров, так и после. Но не между значениями. А то браузер запутается.

Что делает свойство box-shadow? Как им пользоваться?

Каждая тень состоит из следующих значений:
• Два, три или четыре значения размера с единицами измерения:
  • Если задано два значения, то они расшифровываются как смещение по оси x и по оси y.
  • Если задано третье значение, то оно интерпретируется как радиус размытия.
  • Если задано четвёртое значение, то оно отвечает за радиус распространения.
• Дополнительно (необязательно) можно указать ключевое слово inset, которое превратит тень из внешней во внутреннюю.
• Чаще всего, но не обязательно, нужно указывать цвет тени в любом доступном формате цвета.

Как сделать так, чтобы у одного элемента было несколько теней?

Есть ли возможность задавать параметры теней отдельно (например, задать отдельно цвет или размер тени)?

Фоны

background-image задаёт элементу фоновую картинку или градиент. Синтаксис: background-image: url("background.png") или background-image: linear-gradient(red, yellow, green);

background-position управляет положением фоновой картинки внутри элемента. Синтаксис: background-position: 100% 100% или background-position: center bottom или background-position: 10px 150px. Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки, т.е. от свободного места. Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали. Значение по умолчанию — 0% 0% (левый верхний угол). Если указано только одно значение, то второе подставляется автоматически и равняется 50%. То есть значение 100% расположит картинку по центру правого края.

background-size - позволяет изменять размер фонового изображения. Синтаксис: background-size: 100% 100%

В качестве значения для свойства background-size можно задавать:
• Точный размер в любых единицах измерения, доступных в вебе.
• Проценты. Размер в процентах будет рассчитываться от размеров элемента.
• Ключевое слово auto. Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию.
• Ключевое слово cover. Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается.
• Ключевое слово contain. Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.

background-repeat - управляет тем, будет ли повторяться фоновое изображение. По умолчанию значение у этого свойства repeat. Значит фоновая картинка будет повторяться по вертикали и по горизонтали

background-origin - определяет какие области блока будет занимать фоновая картинка: все области, включая рамку, внутренний отступ и контент или только контент. Не влияет на background-color

background-clip - определяет, в каких областях будет находиться фоновая картинка и фоновый цвет блока.

background-attachment - определяет будет ли фон прокручиваться вместе со страницей или будет зафиксирован на одном месте. Часто используется для создания так называемого эффекта параллакса

background-color - для задания цвета фона элемента

Шорткат, позволяющий задать все свойства фона разом. Объединяет в себе:
• background-attachment
• background-clip
• background-color
• background-image
• background-position
• background-repeat
• background-size

Градиенты

Что делает функция linear-gradient? Как ей пользоваться?

Используется для задания фона в виде линейного градиента. Градиент — это плавный переход между цветами. Линейный градиент описывает изменение цвета вдоль прямой линии. В отличие от фоновых изображений градиент не может иметь конкретных размеров и его фактический размер совпадает с размером элемента.

	Синтаксис:
	background-image: linear-gradient(угол_поворота_оси, цвет точка_останова точка_останова, цвет точка_останова точка_останова (сколько угодно цветов))

	Угол поворота оси: если указан, тогда линия, вдоль которой строится градиент, повернётся на нужный угол.
	Единица измерения - deg или turn

	Точка останова:  в начальной точке заканчивается плавный переход из предыдущего цвета. 
	Конечная точка — это точка, с которой начинается плавный переход в следующий цвет.
	

background-image: linear-gradient(45deg, yellow, purple, white, black);

background-image: linear-gradient(yellow 10%, purple 30% 50%, green 50%, black);

background-image: repeating-linear-gradient(rgb(238, 238, 117) 10%, rgb(235, 155, 235) 20%, rgb(238, 238, 117) 30%);

Что делает функция radial-gradient? Как ей пользоваться?

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

	Синтаксис:
	background-image: radial-gradient(размер положение_центра, форма, цвет, цвет, (сколько угодно цветов) );

	Размер:
		closest-side — градиент имеет такую форму, что заканчивается у ближайшей к центру границы элемента;
		farthest-side — градиент заканчивается у дальней от центра границы элемента;
		closest-corner — форма градиента подбирается таким образом, чтобы его край проходил через ближайший к центру угол;
		farthest-corner — край градиента будет проходить через дальний от центра угол.
	Положение центра:
		at left
		at top
		at right
		at bottom
		at center
		at top left
		at 20% 50%
		at 130px 500px
		и т.д.
	Форма: circle, ellipse (по умолчанию). Размер и положение центра совместимы только с ellipse (они не работают, если одновременно указана форма градиента,
	т.е. работают только для значения формы по умолчанию)
	

background-image: radial-gradient(circle, yellow, purple, white, black);

background-image: radial-gradient(at 20% 40%, yellow, purple, white, black);

background-image: radial-gradient(at top, yellow, purple, white, black);

background-image: radial-gradient(closest-corner at 40% 20%, yellow, purple, white, black);

background-image: repeating-radial-gradient(closest-side at 40% 20%, yellow, purple);

Анимации

Что такое @keyframes? Зачем нужно? Как им пользоваться?

Первый этап создания CSS-анимации — это определение ключевых кадров. В ключевом кадре определяется вид той или иной сцены. Таких кадров может быть множество. Когда анимация воспроизводится, браузер двигается от одного ключевого кадра ко второму и прорисовывает промежуточные значения между ними. Яркий пример подобной прорисовки — анимация через transition, где вы предоставляете два ключевых кадра (начальный и конечный стили), а браузер берет на себя работу по просчету промежуточных фаз. Ключевые кадры позволяют создавать большее количество стилей, а не ограничиваться двумя.

Для записи ключевых кадров используется специальное правило @keyframes. В каждом ключевом кадре необходимо разместить те свойства, которые должны применяться к элементу в заданный момент времени.

Структура правила выглядит следующим образом:

 
	@keyframes animationName {
	from {
	/* Список CSS-свойств */
	}
	to {
	/* Список CSS-свойств */
	}
	}	

Сначала мы объявляем правило с помощью слова @keyframes, после чего указываем название анимации (имя может быть произвольным, но при этом желательно сделать его информативным). Следом, в фигурных скобках записываем ключевые кадры (минимум два). В нашем примере первый кадр начинается ключевым словом from, а второй — словом to. После этого ставятся фигурные скобки, в которых записываются необходимые CSS-свойства в привычном нам формате. Другими словами, каждый ключевой кадр имеет вид обычного стиля CSS, состоящего из набора свойств.

Представим, что мы хотим создать примитивную двухкадровую анимацию, в которой один цвет фона (красный) меняется на другой (зеленый). Мы запишем правило в таком виде:

	
	@keyframes changeBackgroundColor {
	from {
	background-color: red;
	}
	to {
	background-color: green;
	}
	}

Но это самый простой пример. Как мы уже говорили, можно создавать более двух ключевых кадров, что гораздо более интересно. Давайте модифицируем наш пример, добавив еще один ключевой кадр в середину анимации, чтобы фоновый цвет сначала менялся с красного на желтый, а затем с желтого на зеленый:

	@keyframes changeBackgroundColor {
	from {
	background-color: red;
	}
	50% {
	background-color: yellow;
	}
	to {
	background-color: green;
	}
	}

Запись 50% означает, что фон станет желтым ровно в середине анимации. По такому принципу можно добавлять сколько угодно ключевых кадров — просто используйте необходимое число в процентах (30%, 60%, 75% и так далее). Позже, когда будет задана длительность анимации, станет понятно, сколько времени пройдет до появления желтого цвета. К примеру, если вы установите длительность в размере 6 секунд, то желтый цвет фона появится через 3 секунды после старта анимации.

Разумеется, можно указывать в одном кадре несколько CSS-свойств. Например, чтобы сместить наш элемент вниз на 50 пикселей к середине анимации, и еще на 50 пикселей — к концу анимации, следует записать:

	
	@keyframes changeBackgroundColor {
	from {
	background-color: red;
	}
	50% {
	background-color: yellow;
	transform: translateY(50px);
	}
	to {
	background-color: green;
	transform: translateY(100px);
	}
	}

Еще более интересно то, что можно создавать паузы в анимации, записывая один набор свойств для нескольких ключевых кадров сразу. Например, чтобы красный цвет сменился на желтый к 33% от длительности анимации, а переход от желтого к зеленому начался после 66%, запишите следующее:

	@keyframes changeBackgroundColor {
	from {
	background-color: red;
	}
	33%, 66% {
	background-color: yellow;
	transform: translateY(50px);
	}
	to {
	background-color: green;
	transform: translateY(100px);
	}
	}

Таким образом мы создадим эффект паузы на временном отрезке с 33% до 66%.

Ключевые слова from и to равнозначны процентным записям 0% и 100% соответственно. Вам не обязательно начинать анимацию с 0% и заканчивать на 100%. Ее можно запускать позже и завершать раньше, при этом добиваясь интересных эффектов.

Можно ли задать несколько анимаций для элемента?

Можно, через запятую:

		animation:
		circle-to-square 10s infinite alternate ease-out 1s,
		color-change 5s alternate linear infinite;
	

Трансформации

Что делает свойство transform? Какие значения ему можно задавать?

Свойство transform используем, когда нам нужно применить к элементу какие-либо трансформации: смещение, масштабирование, искажение, поворот. Нельзя трансформировать строчные и табличные элементы.

Можно ли задать несколько трансформаций для элемента?

Можно, через пробел, без запятой: transform: rotateZ(30deg) translateX(50px);

Изменяется ли положение координатной плоскости при трансформациях?

Нет

Единицы измерения

Как рассчитываются width и height заданные в процентах?

Width: ширина в процентах рассчитывается от ширины родительского элемента. Если родительский элемент ограничен по ширине, к примеру, 450 пикселями, то у вложенного элемента ширина в 100% будет равна 450 пикселям. То есть 100% от родительского элемента. Если при этом у родителя будут также указаны внутренние отступы (padding), то 100% ширины для ребёнка будут равны 450px минус боковые отступы.

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

Как рассчитываются padding и margin заданные в процентах?

% от ширины блока. Верхние и нижние поля тоже вычисляются относительно ширины элемента

Как рассчитывается line-height заданный в процентах?

это процент, умноженный на вычисленный размер шрифта элемента

Как пользоваться vh, vw, vmin, vmax

		vh
		Размер указывается в процентах от высоты вьюпорта (viewport height). 100vh соответствует полной высоте вьюпорта. 1vh = 1% высоты вьюпорта.

		vw
		Размер в процентах от ширины вьюпорта (viewport width). 100vw соответствует полной ширине вьюпорта. 1vw = 1% ширины вьюпорта.
		
		vmin
		Размер в процентах от меньшей размерности вьюпорта. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.

		vmax
		Размер в процентах от большей размерности вьюпорта. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
		

Что делает свойство object-fit

Свойство, которое позволяет управлять тем, как картинка <img> или видео <video> будет подстраиваться под заданные размеры. По своему поведению очень похоже на свойство background-size для фоновых изображений. Работает только если картинке задан хотя бы один размер: ширина или высота. Иначе браузер не понимает в какую область нужно вписать картинку.

Возможные значения:

		fill — картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям.
		contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций.
		cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное.
		none — значение по умолчанию, картинка отображается без изменения пропорций или размеров.
		scale-down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом.
		

Object-fit хорошо комбинируется с Object-position, которое, в свою очередь, без Object-fit не работает. Свойство Object-position спозиционирует изображение относительно размера, заданного в разметке. По применению и доступным значениям свойство похоже на background-position. Оно может принимать как значения в единицах измерения (пикселях, процентах и т. д.), так и с указанием расположения относительно границы элемента — bottom, top, center, left или right. Кроме того, как и в background-position, мы можем указать значения отдельно по вертикали и по горизонтали — первое значение обозначает ось x, второе — ось y. По умолчанию свойство позиционирует контент по центру элемента.

Как стилизовать чекбокс?

			// HTML

		// все заворачиваем в label
		<label class="checklist__cat">
		
			// чекбокс, который будет скрыт
			<input class="checklist__cat-checkbox" type="checkbox">

			// span, который выполняет роль стилизованного чекбокса	
			<span class="checklist__cat-checkmark"></span>

		// подпись
			Можно курить
		</label>


			// CSS

		// скрываем чекбокс
		.checklist__cat-checkbox {
			position: absolute;
			clip: rect(0 0 0 0);
			width: 1px;
			height: 1px;
			margin: -1px;
		}
		
		// стилизуем span
		.checklist__cat-checkmark {
			border: 1px solid gray;
			width: 18px;
			height: 18px;
			border-radius: 5px;
			display: inline-block;
			background-color: white;
			box-sizing: border-box;
		}
		
		//стили для span при состоянии checked чекбокса 
		.checklist__cat-checkbox:checked + .checklist__cat-checkmark,
		.checklist__cat-checkbox:checked:focus + .checklist__cat-checkmark {
			border: 2px solid rgb(148, 110, 238);
			background-image: url("tip.svg");
			background-position-y: 42%;
			background-position-x: 40%;
			background-repeat: no-repeat;
		}
		

Как прижать футер к низу страницы (назвать хотя бы два способа)?

Способ 1: CSS Flexbox

Оборачиваем всю страницу в блок, делаем его флекс-контейнером, внутрь вкладываем хэдер, мейн и футер. Родителю задаём flex-direction: column чтобы блоки встали друг под другом, а не в ряд, и min-height: 100vh, чтобы он занимал как минимум всю высоту экрана. Мейну задаём flex-grow: 1, и вуаля! Центральный блок страницы будет всегда растягиваться на всё доступное свободное пространство. Из-за этого футер всегда будет прижиматься к нижнему краю страницы. При этом, если контента в мейне будет больше чем на один экран, то он растянется и подстроится, ничего не сломается.

Способ 2: Grid Layout

Тег <body> содержит три элемента: шапку, область контента и подвал. Стили требуются только для <body>:

body {
	min-height: 100vh; 
	display: grid; 
	grid-template-rows: auto 1fr auto; 
	box-sizing: border-box; 
	margin: 0;
}

Как отцентровать элемент по горизонтали (назвать хотя бы три способа)?

Способ 1

• Родителя делаем флекс-контейнером.
• Задаём ему выравнивание по основной оси по центру justify-content: center.

Способ 2

Ограничив ширину блочного элемента, можно очень просто выровнять его по центру экрана. Для этого пропишем внешний отступ (margin) со значениями 0 auto, где 0 отвечает за отступы сверху и снизу, а ключевое слово auto — за боковые отступы. Именно таким образом принято выравнивать контент сайта по центру окна браузера.

Способ 3

• внешнему блоку: text-align:center;
• внутреннему блоку:
  • max-width: 100px;
  • display: inline-block (чтобы стало работать свойство text-align у родителя)

Как отцентровать элемент по вертикали (назвать хотя бы три способа)?

Способ 1

• Родителя делаем флекс-контейнером.
• Задаём ему выравнивание по поперечной оси по центру align-items: center.

Способ 2

Этот способ работает, только если известна высота внутреннего блока, т.к. ему нужно задавать отрицательный верхний маржин, равный половине его высоты
• родителю задать position: relative
• внутреннему элементу:
  • position: absolute
  • top: 50%
  • margin-top: минус половина высоты внутреннего элемента

Способ 3

Этот способ работает, только если во внешнем блоке нет текста, т.к. ему нужно задать line-leight, равный его высоте. Соответственно, высота внешнего блока должна быть известна
• внешнему блоку: height: 300px;line-height: 300px;
• внутреннему блоку
  • line-height: 1.25 (вернуть стандартный line-height)
  • display: inline-block (чтобы стало работать свойство vertical-align)
  • vertical-align: middle(для вертикального выравнивания)

Что такое media-queries

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

Чем отличаются responsive, adaptive, liquid

Responsive: характеризуется наличием определенных макетов для различных разрешений. Внутри каждого макета дизайн является плавным и меняет ширину элементов относительно изменяющегося размера окна. Вы можете думать о Responsive как о серии макетов Liquid.

Adaptive: характерно наличие определенных макетов для разных разрешений. В каждом макете изменение размера окна не приводит к изменению макета. Вы можете думать об Adaptive как о серии Static макетов.

Liquid: характеризуется масштабированием ширины частей дизайна относительно окна. Он имеет тенденцию выходить из строя, когда окно намного меньше или намного больше, чем оно было изначально спроектировано.

Static: это традиционный веб-сайт: один дизайн находится в центре страницы и требует горизонтальной прокрутки, если окно слишком маленькое для него. Сайты M dot являются традиционным ответом на это, предоставляя полностью отдельный сайт для более низкого разрешения - и всю работу по созданию отдельного сайта.

Какие есть типы селекторов (по тегу, по классу и далее)?

• по тегу: div{...}
• по классу: .class-name{...}
• по id: #id{...}
• универсальный: *{...}
• по атрибуту:
• по точному совпадению со значением атрибута: [attr=value]{...}
• по точному совпадению со значением атрибута, если в значении атрибута есть пробелы или знаки, отличные от цифр и букв: [attr="value"]{...}
• выбирает все элементы, значение атрибута attr это перечень слов, разделённых пробелом, и среди этих слов есть такое, чьё значение равно value (т.е. если значение атрибута состоит из нескольких слов, то можно искать по одному из них): [attr~=value]{...}
• выберет все элементы, значение атрибута attr которых либо в точности равно value, либо начинается с value, за которым следует символ дефиса -: [attr|=value]{...}
• выберет все элементы, значение атрибута attr которых начинается с value: [attr^=value]{...}
• выберет все элементы, значение атрибута attr которых оканчивается на value: [attr$=value]{...}
• выберет все элементы, атрибут attr которых содержит в себе значение: [attr*=value]{...}
• селектор с псевдоэлементом: .class-name::after{...}
• селектор с псевдоклассом: .class-name::checked{...}
• селектор с фильтром по месту среди соседей: .class-name:фильтр{...}. Возможные фильтры:

  	:first-child – первый потомок своего родителя.
  	:last-child – последний потомок своего родителя.
  	:only-child – единственный потомок своего родителя, соседних элементов нет.
  	:nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.
  	:nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число.
  	Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.
  
  	:nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
  	:nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.
  
  	Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:
  	:first-of-type
  	:last-of-type
  	:only-of-type
  	:nth-of-type
  	:nth-last-of-type
  	Они имеют в точности тот же смысл, что и обычные 
  	:first-child, 
  	:last-child и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.
  				

Комбинации селекторов
• по тегу div и классу class-name: div.class-name{...}
• по двум классам на одном и том же DOM-элементе class-name-1 и class-name-2 (пишутся слитно): .class-name-1.class-name-2{...}
• по двум классам на элементе-родителе и элементе прямом потомке class-parent и class-child (пишутся через пробел): .class-parent>class-child{...}
• по двум классам на элементе-родителе и элементе потомке любого уровня class-parent и class-descendant (пишутся через пробел): .class-parent class-descendant{...}
• по двум классам - на элементе и элементе непосредственном соседе слева class-parent и class-neighbor (элемент справа от + должен следовать в HTML сразу за элементом слева от +): .class-parent+class-neighbor{...}
• по двум классам - на элементе и элементе любом соседе левее class-parent и class-neighbor (Правило применится ко всем блокам, подходящим под правый селектор, при учёте, что они являются соседями блоков из селектора слева от ~. При этом оба селектора должны иметь одного родителя и находиться на одном уровне вложенности. В HTML правый селектор должен идти после левого селектора): .class-parent~class-neighbor{...}

Как работают приоритеты селекторов? Какие есть 4 вида возможных отношений?

Приоритет селекторов:
• 1. Инлайновые стили
• 2. Селекторы по идентификатору
• 3. Селекторы по классу, селекторы по атрибуту и селекторы с псевдоклассами
• 4. Селекторы по тегу, селекторы с псевдоэлементами
• Комбинаторы +, >, ~, универсальный селектор * и псевдокласс not() веса не имеют

Ключевое слово !important отменяет правила приоритета

Отношения селекторов:
• div p – элементы p, являющиеся потомками div
• div > p – только непосредственные потомки
• div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div
• div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть)