Что такое семантическая вёрстка (semantic HTML) и зачем использовать , , или вместо ?

Семантическая вёрстка означает, что элемент выбирают по смыслу содержимого, а не по внешнему виду.

Что такое блочная модель CSS (box model) и какой ширины будет .card на экране с box-sizing: border-box и без него?

Каждый элемент состоит из четырёх слоёв: содержимое, padding, рамка (border) и margin.

Чем отличаются блочные, строчные и строчно-блочные элементы (block, inline и inline-block)?

Блочный элемент начинается с новой строки, занимает всю ширину родителя и принимает `width`, `height` и все margin.

Чем отличаются три способа скрыть элемент: display: none, visibility: hidden и opacity: 0?

`display: none` убирает элемент из раскладки и из дерева доступности.

Чем отличаются static, relative, absolute, fixed и sticky, и относительно чего позиционируется элемент с absolute?

`static` означает обычный поток; `relative` остаётся в потоке и только визуально сдвигается на `top` и `left`; `absolute` выпадает из потока и позиционируется относительно ближайшего позиционированного предка; `fixed` относительно вьюпорта; `sticky` прокручивается как обычно, пока не дойдёт до отступа `top`, а потом прилипает внутри родителя.

Чем отличаются px, em, rem, %, vh и dvh, и что использовать для размера шрифта?

`px` фиксирован, `em` считается от размера шрифта элемента (внутри `font-size` от родительского), `rem` от размера шрифта корня, `%` от размера родителя, а `vh` и `dvh` от высоты вьюпорта.

Как отцентрировать элемент по горизонтали и вертикали, и какой способ вы бы выбрали сегодня?

Сделать родителя гридом с `place-items: center` или flex-контейнером с `justify-content: center` и `align-items: center`.

Чем псевдоклассы отличаются от псевдоэлементов, и что даёт :has()?

Псевдокласс (`:hover`, `:focus-visible`, `:nth-child()`) выбирает существующий элемент в определённом состоянии или позиции; псевдоэлемент (`::before`, `::after`, `::placeholder`) стилизует часть, которая не является DOM-элементом.

Что такое схлопывание margin (margin collapsing) и что такое блочный контекст форматирования (BFC)?

Вертикальные margin соседних блоков не складываются, а сливаются в один, равный большему из них, а верхний margin первого ребёнка может «вытечь» сквозь родителя.

Что делают flex-grow, flex-shrink и flex-basis, и что на самом деле означает flex: 1?

`flex-basis` задаёт исходный размер элемента вдоль главной оси, `flex-grow` его долю оставшегося свободного места, а `flex-shrink` то, сколько он уступит, если элементы не помещаются.

Найдите баг: длинное имя файла во flex-строке не обрезается многоточием и выталкивает кнопки за край экрана.

`.info` является flex-элементом со значением по умолчанию `min-width: auto`, поэтому не может сжаться меньше своего содержимого, а при `nowrap` содержимое равно полному имени файла.

Как fr, minmax() и repeat() задают размеры треков в CSS Grid, и чем auto-fill отличается от auto-fit?

`fr` означает долю места, оставшегося после фиксированных треков, `minmax(min, max)` позволяет треку меняться между двумя размерами, а `repeat()` записывает список треков один раз.

Что такое CSS custom properties (CSS-переменные), чем они отличаются от переменных Sass, и как сделать на них светлую и тёмную темы?

Custom properties (`--accent: #2563eb`, чтение через `var(--accent)`) являются настоящими значениями CSS в браузере: они наследуются вниз по DOM, переопределяются для элемента или медиазапроса и меняются во время работы.

Как построить адаптивную раскладку на медиазапросах по принципу mobile-first, и когда лучше подходят container queries?

Mobile-first означает, что базовые стили написаны для самого узкого экрана, а блоки `@media (min-width: 768px)` добавляют колонки по мере роста ширины.

Как srcset, sizes и отдают подходящую картинку, и как не дать картинкам сдвигать раскладку?

`srcset` перечисляет одно изображение в нескольких ширинах, а `sizes` сообщает, какой ширины оно будет на странице, и браузер выбирает самый маленький файл, который выглядит чётко на этом экране.

Чем CSS transition отличается от анимации на @keyframes, и какие свойства можно анимировать плавно?

`transition` анимирует свойство от старого значения к новому, когда оно меняется, например на `:hover` или при переключении класса.

Как изолировать стили в React-приложении: BEM, CSS Modules, Tailwind или CSS-in-JS, и чем приходится платить за каждый подход?

Обычный CSS глобален, поэтому каждый подход по-своему избегает конфликтов: BEM через именование, CSS Modules через переименование классов каждого файла при сборке, Tailwind через утилитарные классы вместо имён, CSS-in-JS через генерацию стилей в компоненте.

Чем приходится платить за runtime CSS-in-JS вроде styled-components или Emotion, и почему Server Components подталкивают команды к стилям без рантайма?

Runtime CSS-in-JS превращает стили, написанные на JavaScript, в CSS во время рендера компонентов: библиотека едет в браузер, вставляет правила во время рендера и должна отправлять их вместе со стримящимся HTML.

Irbisa · Шпаргалка

HTML и CSS

Семантический HTML, блочная модель, display и позиционирование, единицы, Flexbox и Grid, схлопывание отступов, адаптивность и container queries, CSS-переменные и темы, CSS Modules, Tailwind и CSS-in-JS

Junior-разработчик · 18 вопросов

01
Что такое семантическая вёрстка (semantic HTML) и зачем использовать <nav>, <main>, <article> или <button> вместо <div>?
Семантическая вёрстка означает, что элемент выбирают по смыслу содержимого, а не по внешнему виду.
```
<body>  <header>    <nav aria-label="Main">      <a href="/">Home</a>      <a href="/pricing">Pricing</a>    </nav>…
```
02
Что такое блочная модель CSS (box model) и какой ширины будет .card на экране с box-sizing: border-box и без него?
```
.card {  width: 300px;  padding: 20px;  border: 2px solid #ccc;  margin: 16px;} .card.border-box {  box-sizing: border-box;}
```
Каждый элемент состоит из четырёх слоёв: содержимое, padding, рамка (border) и margin.
03
Чем отличаются блочные, строчные и строчно-блочные элементы (block, inline и inline-block)?
Блочный элемент начинается с новой строки, занимает всю ширину родителя и принимает width, height и все margin.
04
Чем отличаются три способа скрыть элемент: display: none, visibility: hidden и opacity: 0?
display: none убирает элемент из раскладки и из дерева доступности.
```
/* Hidden on screen, still read by screen readers */.visually-hidden {  position: absolute;  width: 1px;  height: 1px;  margin: -1px;…
```
05
Чем отличаются static, relative, absolute, fixed и sticky, и относительно чего позиционируется элемент с absolute?
static означает обычный поток; relative остаётся в потоке и только визуально сдвигается на top и left; absolute выпадает из потока и позиционируется относительно ближайшего позиционированного предка; fixed относительно вьюпорта; sticky прокручивается как обычно, пока не дойдёт до отступа top, а потом прилипает внутри родителя.
```
.avatar {  position: relative; /* the badge is placed against this box */}.avatar .badge {  position: absolute;  top: -4px;…
```
06
Чем отличаются px, em, rem, %, vh и dvh, и что использовать для размера шрифта?
px фиксирован, em считается от размера шрифта элемента (внутри font-size от родительского), rem от размера шрифта корня, % от размера родителя, а vh и dvh от высоты вьюпорта.
07
Как отцентрировать элемент по горизонтали и вертикали, и какой способ вы бы выбрали сегодня?
Сделать родителя гридом с place-items: center или flex-контейнером с justify-content: center и align-items: center.
```
/* Both axes, any child size */.center-grid {  display: grid;  place-items: center;  min-height: 100dvh;}…
```
08
Чем псевдоклассы отличаются от псевдоэлементов, и что даёт :has()?
Псевдокласс (:hover, :focus-visible, :nth-child()) выбирает существующий элемент в определённом состоянии или позиции; псевдоэлемент (::before, ::after, ::placeholder) стилизует часть, которая не является DOM-элементом.
```
/* pseudo-element: a tooltip arrow that is not in the DOM */.tooltip::after {  content: "";  position: absolute;  top: 100%;  left: 16px;…
```
09
Что такое схлопывание margin (margin collapsing) и что такое блочный контекст форматирования (BFC)?
Вертикальные margin соседних блоков не складываются, а сливаются в один, равный большему из них, а верхний margin первого ребёнка может «вытечь» сквозь родителя.
```
.card {  background: white;}.card h2 {  margin-top: 24px; /* escapes: the card itself moves down 24px */}…
```
10
Что делают flex-grow, flex-shrink и flex-basis, и что на самом деле означает flex: 1?
flex-basis задаёт исходный размер элемента вдоль главной оси, flex-grow его долю оставшегося свободного места, а flex-shrink то, сколько он уступит, если элементы не помещаются.
```
.row {  display: flex;  gap: 8px;} /* equal columns whatever their content */…
```
11
Найдите баг: длинное имя файла во flex-строке не обрезается многоточием и выталкивает кнопки за край экрана.
```
/* <li class="file-row">     <div class="info"><p class="name">quarterly-report-final-v2.pdf</p><p>2.4 MB</p></div>     <button>Rename</button> <button>Delete</button>   </li> */.file-row {  display: flex;  gap: 8px;}.info {  flex: 1;}.name {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
```
.info является flex-элементом со значением по умолчанию min-width: auto, поэтому не может сжаться меньше своего содержимого, а при nowrap содержимое равно полному имени файла.
12
Как fr, minmax() и repeat() задают размеры треков в CSS Grid, и чем auto-fill отличается от auto-fit?
fr означает долю места, оставшегося после фиксированных треков, minmax(min, max) позволяет треку меняться между двумя размерами, а repeat() записывает список треков один раз.
```
.page {  display: grid;  grid-template-columns: 240px minmax(0, 1fr);  grid-template-areas:    "header header"    "nav    main";…
```
13
Что такое CSS custom properties (CSS-переменные), чем они отличаются от переменных Sass, и как сделать на них светлую и тёмную темы?
Custom properties (--accent: #2563eb, чтение через var(--accent)) являются настоящими значениями CSS в браузере: они наследуются вниз по DOM, переопределяются для элемента или медиазапроса и меняются во время работы.
```
:root {  --surface: #ffffff;  --text: #111827;  --accent: #2563eb;  color-scheme: light;}…
```
14
Как построить адаптивную раскладку на медиазапросах по принципу mobile-first, и когда лучше подходят container queries?
Mobile-first означает, что базовые стили написаны для самого узкого экрана, а блоки @media (min-width: 768px) добавляют колонки по мере роста ширины.
```
/* base: one column for phones */.layout {  display: grid;  gap: 16px;}…
```
15
Как srcset, sizes и <picture> отдают подходящую картинку, и как не дать картинкам сдвигать раскладку?
srcset перечисляет одно изображение в нескольких ширинах, а sizes сообщает, какой ширины оно будет на странице, и браузер выбирает самый маленький файл, который выглядит чётко на этом экране.
```
<picture>  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w" sizes="100vw" />  <img    src="/img/hero-1600.jpg"    srcset="/img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"    sizes="100vw"…
```
16
Чем CSS transition отличается от анимации на @keyframes, и какие свойства можно анимировать плавно?
transition анимирует свойство от старого значения к новому, когда оно меняется, например на :hover или при переключении класса.
```
.menu {  opacity: 0;  transform: translateY(-8px);  visibility: hidden;  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;}…
```
17
Как изолировать стили в React-приложении: BEM, CSS Modules, Tailwind или CSS-in-JS, и чем приходится платить за каждый подход?
Обычный CSS глобален, поэтому каждый подход по-своему избегает конфликтов: BEM через именование, CSS Modules через переименование классов каждого файла при сборке, Tailwind через утилитарные классы вместо имён, CSS-in-JS через генерацию стилей в компоненте.
```
import styles from './Button.module.css'; // .button, .primary and .bar inside interface ButtonProps {  primary?: boolean;  children: React.ReactNode;}…
```
18
Чем приходится платить за runtime CSS-in-JS вроде styled-components или Emotion, и почему Server Components подталкивают команды к стилям без рантайма?
Runtime CSS-in-JS превращает стили, написанные на JavaScript, в CSS во время рендера компонентов: библиотека едет в браузер, вставляет правила во время рендера и должна отправлять их вместе со стримящимся HTML.
```
// before: Title.tsx, styles built at runtime from a propconst Title = styled.h1<{ $accent: string }>`  font-size: 2rem;  color: ${(p) => p.$accent};`;…
```

HTML и CSS

Что такое семантическая вёрстка (semantic HTML) и зачем использовать `<nav>`, `<main>`, `<article>` или `<button>` вместо `<div>`?

Что такое блочная модель CSS (box model) и какой ширины будет `.card` на экране с `box-sizing: border-box` и без него?

Чем отличаются блочные, строчные и строчно-блочные элементы (block, inline и inline-block)?

Чем отличаются три способа скрыть элемент: `display: none`, `visibility: hidden` и `opacity: 0`?

Чем отличаются `static`, `relative`, `absolute`, `fixed` и `sticky`, и относительно чего позиционируется элемент с `absolute`?

Чем отличаются `px`, `em`, `rem`, `%`, `vh` и `dvh`, и что использовать для размера шрифта?

Как отцентрировать элемент по горизонтали и вертикали, и какой способ вы бы выбрали сегодня?

Чем псевдоклассы отличаются от псевдоэлементов, и что даёт `:has()`?

Что такое схлопывание margin (margin collapsing) и что такое блочный контекст форматирования (BFC)?

Что делают `flex-grow`, `flex-shrink` и `flex-basis`, и что на самом деле означает `flex: 1`?

Найдите баг: длинное имя файла во flex-строке не обрезается многоточием и выталкивает кнопки за край экрана.

Как `fr`, `minmax()` и `repeat()` задают размеры треков в CSS Grid, и чем `auto-fill` отличается от `auto-fit`?

Что такое CSS custom properties (CSS-переменные), чем они отличаются от переменных Sass, и как сделать на них светлую и тёмную темы?

Как построить адаптивную раскладку на медиазапросах по принципу mobile-first, и когда лучше подходят container queries?

Как `srcset`, `sizes` и `<picture>` отдают подходящую картинку, и как не дать картинкам сдвигать раскладку?

Чем CSS `transition` отличается от анимации на `@keyframes`, и какие свойства можно анимировать плавно?

Как изолировать стили в React-приложении: BEM, CSS Modules, Tailwind или CSS-in-JS, и чем приходится платить за каждый подход?

Чем приходится платить за runtime CSS-in-JS вроде styled-components или Emotion, и почему Server Components подталкивают команды к стилям без рантайма?

Что такое семантическая вёрстка (semantic HTML) и зачем использовать <nav>, <main>, <article> или <button> вместо <div>?

Что такое блочная модель CSS (box model) и какой ширины будет .card на экране с box-sizing: border-box и без него?

Чем отличаются блочные, строчные и строчно-блочные элементы (block, inline и inline-block)?

Чем отличаются три способа скрыть элемент: display: none, visibility: hidden и opacity: 0?

Чем отличаются static, relative, absolute, fixed и sticky, и относительно чего позиционируется элемент с absolute?

Чем отличаются px, em, rem, %, vh и dvh, и что использовать для размера шрифта?

Как отцентрировать элемент по горизонтали и вертикали, и какой способ вы бы выбрали сегодня?

Чем псевдоклассы отличаются от псевдоэлементов, и что даёт :has()?

Что такое схлопывание margin (margin collapsing) и что такое блочный контекст форматирования (BFC)?

Что делают flex-grow, flex-shrink и flex-basis, и что на самом деле означает flex: 1?

Найдите баг: длинное имя файла во flex-строке не обрезается многоточием и выталкивает кнопки за край экрана.

Как fr, minmax() и repeat() задают размеры треков в CSS Grid, и чем auto-fill отличается от auto-fit?

Что такое CSS custom properties (CSS-переменные), чем они отличаются от переменных Sass, и как сделать на них светлую и тёмную темы?

Как построить адаптивную раскладку на медиазапросах по принципу mobile-first, и когда лучше подходят container queries?

Как srcset, sizes и <picture> отдают подходящую картинку, и как не дать картинкам сдвигать раскладку?

Чем CSS transition отличается от анимации на @keyframes, и какие свойства можно анимировать плавно?

Как изолировать стили в React-приложении: BEM, CSS Modules, Tailwind или CSS-in-JS, и чем приходится платить за каждый подход?

Чем приходится платить за runtime CSS-in-JS вроде styled-components или Emotion, и почему Server Components подталкивают команды к стилям без рантайма?

Что такое семантическая вёрстка (semantic HTML) и зачем использовать `<nav>`, `<main>`, `<article>` или `<button>` вместо `<div>`?

Что такое блочная модель CSS (box model) и какой ширины будет `.card` на экране с `box-sizing: border-box` и без него?

Чем отличаются три способа скрыть элемент: `display: none`, `visibility: hidden` и `opacity: 0`?

Чем отличаются `static`, `relative`, `absolute`, `fixed` и `sticky`, и относительно чего позиционируется элемент с `absolute`?

Чем отличаются `px`, `em`, `rem`, `%`, `vh` и `dvh`, и что использовать для размера шрифта?

Чем псевдоклассы отличаются от псевдоэлементов, и что даёт `:has()`?

Что делают `flex-grow`, `flex-shrink` и `flex-basis`, и что на самом деле означает `flex: 1`?

Как `fr`, `minmax()` и `repeat()` задают размеры треков в CSS Grid, и чем `auto-fill` отличается от `auto-fit`?

Как `srcset`, `sizes` и `<picture>` отдают подходящую картинку, и как не дать картинкам сдвигать раскладку?

Чем CSS `transition` отличается от анимации на `@keyframes`, и какие свойства можно анимировать плавно?