Вступление
00:00:00Поведение основных отображаемых значений Встроенные элементы располагаются в одной строке, а их размер зависит от их содержимого. Блочные элементы соответствуют заданным ширине и высоте, но при этом занимают всю доступную ширину, заставляя следующие блоки размещаться на новых строках. Элементы встроенных блоков выстраиваются в ряд, но при этом имеют явные размеры. Flex и grid - это более широкие системы компоновки, которые обеспечивают высокую гибкость и оперативность компоновки.
Анимация с помощью @ключевых кадров Определите ключевые кадры, чтобы обозначить начальную и конечную стадии анимации или этапы, основанные на процентах. Например, используйте два ключевых кадра для поворота квадрата вдоль оси X. Прикрепите к последовательности свойство анимации и название ключевого кадра. Затем элемент воспроизводит заданное движение в этих ключевых кадрах.
Позиционирование: Статическое, Относительное, Абсолютное Значение Static используется по умолчанию и игнорирует свойства смещения, такие как top или left. Относительное смещение смещает элемент от его исходного положения, сохраняя при этом его место в обычном потоке. Абсолютное удаляет элемент из потока, чтобы другие элементы занимали его место. Абсолютное позиционирование выполняется относительно ближайшего позиционируемого предка, а если такового не существует, то относительно страницы; вложение целевого объекта в позиционируемый родительский объект изменяет эту ссылку.
Фиксированный и липкий на практике Фиксированное позиционирование позволяет отделить элемент от потока документов и прикрепить его к экрану просмотра, чтобы он прокручивался вместе со страницей. Фиксированное позиционирование позволяет элементу "прилипать" к краю (например, к верхней части), но только в пределах его прокручиваемого контейнера. Как только элемент достигает своего порогового значения, он ведет себя как фиксированный до тех пор, пока не закончится граница контейнера. Это создает привязанные заголовки, которые остаются ограниченными своим разделом.
Выравнивание, направление и обертывание Flexbox Превратите контейнер в гибкую рамку для центрирования содержимого, установив значения "Выравнивать содержимое" и "выравнивать элементы" по центру. Управляйте главной осью с помощью функции "гибкое направление", переключаясь между строками и столбцами. Используйте "Выравнивать содержимое" вдоль главной оси и "выравнивать элементы" вдоль поперечной оси, чтобы расположить элементы по мере необходимости. Включите функцию гибкого переноса, чтобы переместить переполненные элементы на новые строки.
Размер коробки: граница коробки стала четкой При использовании модели content-box по умолчанию заполнение увеличивает общий визуализируемый размер элемента. Блок размером 100 на 100 с заполнением по 20 пикселей с каждой стороны становится размером 140 на 140. Установка значения box-sizing в значение border-box приводит к тому, что заявленные ширина и высота включают отступы (и границы), поэтому элемент сохраняет свои предполагаемые размеры. Это предотвращает увеличение макета при добавлении внутренних интервалов.
От HTML к пикселям и как загружаются скрипты Браузер создает DOM из HTML, загружает стили и объединяет их в дерево рендеринга. Он вычисляет геометрию каждого элемента, выполняет компоновку и отображает результат на экране. По умолчанию теги скрипта блокируют рендеринг до тех пор, пока они не будут загружены и выполнены. Использование async запускает загрузку немедленно и не блокирует синтаксический анализ HTML, в то время как defer сохраняет порядок выполнения скрипта и запускается только после обработки HTML.
Специфичность, селекторы и псевдосостояния Встроенные стили, заданные с помощью атрибута style, переопределяют другие правила; за ними следуют идентификаторы, затем классы, затем теги. Флаг !important повышает приоритет правила, когда это необходимо. Селекторы атрибутов определяют элементы по атрибутам (например, input[type=password] или [disabled]), а смежный комбинатор (input + span) определяет стиль элемента, который следует непосредственно за ним; универсальный селектор (*) определяет все элементы. Псевдоклассы фиксируют динамические состояния, такие как :наведение курсора, :фокусировка и :проверено, в то время как псевдоэлементы, такие как ::части элемента в стиле первой буквы.
Границы, контуры и видимость Граница является частью рамки элемента и влияет на его размеры. Контур является чисто визуальным, накладывается на содержимое и не изменяет модель рамки и не влияет на радиус границы. Чтобы скрыть элемент, сохранив при этом его свободное пространство, используйте значение непрозрачности: 0 или видимости: скрытый; значение отображения: нет, которое полностью удаляет его из макета. Эти различия не позволяют визуальным настройкам нарушать структуру.
Адаптивные макеты, блоки просмотра и BEM Адаптивные страницы создаются благодаря гибким макетам, современным системам, таким как flex и grid, и медиа-запросам, адаптированным к размерам устройств. Блоки просмотра vh и vw всегда ссылаются на окно браузера, независимо от родительских размеров. Медиа-запросы, такие как максимальная ширина: 400 пикселей, меняют стили по мере сужения экрана. Методология BEM структурирует интерфейсы как независимые блоки, обеспечивая быструю разработку и безопасное повторное использование без копирования и вставки.
Многослойность с z-индексом z-индекс определяет порядок расположения перекрывающихся элементов, но влияет только на их расположение. Когда два блока с одинаковым расположением перекрываются, тот, у которого z-индекс выше, оказывается сверху. При изменении значений z-индекса, какой элемент визуально перекрывает другие, изменяется.
Формы и пользовательские элементы управления без подключаемых модулей Создайте пользовательский флажок, связав метку с входными данными с помощью for и id, скрыв входные данные и стилизовав вместо них метку. Измените внешний вид метки, если она установлена, с помощью состояния :проверено и выбора родственных элементов. Примените ту же идею к загрузке файлов: скройте ввод, оформите метку как видимый элемент управления. Селекторы атрибутов, такие как [type=password] или [disabled], и смежный шаблон (input + span), позволяют точно настроить таргетинг на определенные элементы формы.
Практические утилиты для улучшения пользовательского интерфейса Используйте overflow: hidden, чтобы обрезать лишнее содержимое, и управляйте фоновыми изображениями с помощью параметра background-size: закрывать или содержать рядом с фоном-repeat: без повтора. Удалите маркеры списка по умолчанию с помощью list-style: none, измените указатель с помощью свойства cursor и открывайте ссылки в новых вкладках с помощью target=_blank. Преобразуйте текстовый заголовок с помощью text-transform (например, в верхний регистр), чтобы он соответствовал оформлению. Плавно увеличивайте элементы при наведении курсора, используя transform: scale with transition, чтобы соседние элементы не смещались. Атрибуты данных (data-*) хранят значения, которые CSS может считывать для всплывающих подсказок с помощью ::after { content: attr(...) }.