Изучите модель коробки CSS, основы компоновки, схемы позиционирования и свойство float для управления расположением и интервалами элементов.
Поймите модель коробки CSS и как элементы отображаются в виде коробок. Эта глава вводит концепцию модели коробки как основы CSS-верстки.
Узнайте о области содержимого и о том, как размер содержимого влияет на макет. Эта глава объясняет основную область содержимого внутри модели коробки.
Изучите свойства отступов и их влияние на размер элемента. Поймите, как отступы создают пространство внутри границы вокруг содержимого.
Поймите свойства границ и то, как границы влияют на размеры блока. Узнайте, как границы визуально отделяют содержимое и отступы от внешних элементов.
Узнайте о свойствах отступов, схлопывании отступов и интервалах между элементами. Поймите, как отступы создают пространство за пределами границы.
Поймите разницу между content-box и border-box и как box-sizing влияет на размеры элементов. Научитесь управлять расчетом размеров коробки для точности макета.
Исследуйте типы отображения block, inline и inline-block и их случаи использования. Поймите, как отображение влияет на расположение и поток элементов.
Узнайте о статическом позиционировании, схеме позиционирования по умолчанию. Поймите, как элементы естественным образом располагаются в потоке документа.
Поймите относительное позиционирование и то, как оно перемещает элементы относительно их нормального положения, не влияя на другие элементы.
Изучите абсолютное позиционирование и то, как элементы позиционируются относительно ближайшего позиционированного предка или области просмотра.
Узнайте о фиксированном позиционировании и о том, как элементы остаются фиксированными относительно области просмотра даже при прокрутке.
Поймите липкое позиционирование и как элементы переключаются между относительным и фиксированным в зависимости от положения прокрутки.
Исследуйте, как различные схемы позиционирования влияют на поток элементов в документе и их взаимодействие.
Узнайте, как использовать свойства смещения для точного перемещения позиционированных элементов внутри их содержащего блока.
Поймите контекст наложения и как z-index управляет слоями и видимостью перекрывающихся элементов.
Узнайте о распространенных проблемах и подводных камнях при использовании позиционирования CSS и о том, как их избежать.
Изучите, как работает свойство float и как использовать его для компоновки, включая очистку float.