Ярослав Анциферов | Frontend-разработчик

Каждый элемент на веб-странице занимает место в нормальном потоке документа — как книги на полке библиотеки: каждая стоит там, где ей положено по порядку. Свойство position позволяет вырвать элемент из потока (или не вырывать — зависит от значения) и управлять его положением относительно чего-то: родителя, окна, скролла. Это не «переместить пиксель влево» — это изменение контекста позиционирования. Значение по умолчанию. Элемент остаётся в нормальном потоке. Свойства top, right, bottom, left, z-index игнорируются...

В 1996 году W3C в спецификации CSS предложил модель, в которой ширина элемента — это ширина его content-области. Пограничные случаи этой модели начали сыпаться уже к 2002-му: — дизайнер просит блок шириной 300px с 10px padding и 1px border; — вы пишете width: 300px; padding: 10px; border: 1px solid; — браузер выдаёт блок шириной 322px и ломает макет. Это не баг — это content-box в действии. А border-box — это патч, который выправляет поведение. Давайте разберёмся детально. Что происходит внутри? —...

Весь HTML — это коробки. Не «контейнеры», не «блочные элементы», а именно коробки. CSS описывает, как эти коробки устроены физически на странице — в трёхмерном смысле: высота, ширина, толщина стенок, внутреннее пространство. Эту договорённость называют блочной моделью (CSS box model). Она стандартизирована в спецификации CSS и действует одинаково во всех современных браузерах. 📌 Представьте посылку. — Внутри — ваш товар (content). — Вокруг — воздушно-пузырьковая плёнка (padding). — Поверх — картонная коробка (border)...

Вы не просто бросаете всё в кучу. Вы кладёте носки в один ящик, рубашки — в другой, обувь — на полку. Почему? Чтобы найти нужное быстро, без копания в хаосе. Веб-страница — это тоже шкаф. А data-* атрибуты — этикетки на ящиках, которые видите только вы (и JavaScript). Браузер их игнорирует. Пользователь — не замечает. Но они делают ваш код чище, логичнее и управляемее. Это пользовательские атрибуты в HTML, которые начинаются с data-, за которым следует любое имя без заглавных букв и без двойных дефисов...

Когда вы открываете страницу в браузере, HTML-код превращается в DOM-дерево — структуру в памяти, с которой работает JavaScript и которую рисует браузер. Но не вся разметка сразу становится частью этого дерева. Иногда нам нужно заготовить фрагменты разметки, но не рендерить их прямо сейчас. Для этого и существует <template>. Тег <template> — это контейнер для «холодного» HTML. Всё, что внутри него: Этот фрагмент можно клонировать и вставлять в DOM по мере необходимости — например, при клике, при получении данных от сервера, или при создании списка элементов...