Как переместить блок в html

Позиционирование

Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения position и как их использовать.

Необходимые знания:	Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)
Задача:	Изучить как работает CSS позиционирование.

Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию 0_basic-flow.html из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.

Введение в позиционирование

Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент — позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.

Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство position .

Статическое позиционирование

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

Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте class positioned ко второму <p> в HTML:

А теперь добавьте следующее правило в конец вашего CSS:

И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!

Примечание: вы можете посмотреть живой пример на данном этапе на 1_static-positioning.html (см. исходный код).

Относительное позиционирование

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

Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства top , bottom , left (en-US), и right которые мы объясним в следующем разделе.

Введение в top, bottom, left, и right

top , bottom , left (en-US), и right используются вместе с position чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу .positioned в вашем CSS:

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

Если вы сейчас сохраните и обновите, вы получите примерно такой результат:

Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px; , сила толкает блок, заставляя его перемещаться вниз на 30px.

Примечание: вы можете посмотреть пример на этом этапе на 2_relative-positioning.html (см. исходный код).

Абсолютное позиционирование

Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

Если вы сохраните и обновите, то вы должны увидеть нечто подобное:

В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее.

Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что top , bottom , left (en-US), и right ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха «содержащего элемента» и 30px от левого края (В этом случае «содержащий элемент» является исходным содержащим блоком. См. раздел ниже для дополнительной информации).

Примечание: вы можете использовать top , bottom , left (en-US), и right для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните.

Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

Примечание: вы можете посмотреть пример на этом этапе на 3_absolute-positioning.html (см. исходный код).

Контекст позиционирования

Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).

Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в исходным содержащем блоке. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент <html> . Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента <html> и будет расположен относительно исходного окна просмотра.

Позиционируемый элемент вложен в <body> в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body :

Это должно дать следующий результат:

Позиционируемый элемент теперь располагается относительно элемента <body> .

Примечание: вы можете посмотреть живой пример на этом этапе на 4_positioning-context.html (см. исходный код).

Введение в z-index

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

Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:

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

Можете ли вы изменить порядок наложения? Да, можете, используя свойство z-index . «z-index» это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).

У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения z-index влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto , что фактически равно 0.

Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:

Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:

Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.

Примечание: вы можете посмотреть живой пример на этом этапе на 5_z-index.html (см. исходный код).

Фиксированное позиционированиее

А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), фиксированное позиционирование обычно фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его свойству transform отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.

Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.

А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:

Теперь мы собираемся дать элементу <h1> (en-US) position: fixed; , а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:

top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.

Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:

Теперь вы должны видеть законченный пример:

Примечание: вы можете посмотреть живой пример на этом этапе на 6_fixed-positioning.html (см. исходный код).

position: sticky

Доступно другое значение позиции называемое position: sticky , которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.

Интересное и общее использование position: sticky заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:

CSS может выглядеть как показано ниже. В нормальном потоке элементы <dt> будут прокручиваться вместе с контентом. Когда мы добавляем position: sticky к элементу <dt> , вместе со значением top 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.

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

Примечание: вы можете посмотреть живой пример на этом этапе на 7_sticky-positioning.html (см. исходный код).

Проверь свои навыки!

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Проверьте свои навыки: Позиционирование.

Заключение

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

Коллекция практических советов и заметок по вёрстке

Это большая коллекция практических советов и заметок по вёрстке. Своеобразная памятка для тех, кто каждодневно использует CSS. Освещаются самые разные темы, от деталей поведения плавающих элементов до использования SVG и спрайтов. Проект постоянно обновляется, активное сообщество github также принимает в нем участие, там добавляются интересные замечания, о которых, возможно, вы и не слышали.

От переводчика

Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание

1. Позиционирование

CSS предоставляет нам до 5 различных значений свойства position. Но по существу, только 4 из них обычно используются.

Статическое (static, по умолчанию):

Единственная причина, по которой вы будете устанавливать это свойство элементу, задавая его статическим, это для того, чтобы специально очистить некоторое позиционирование, которое было применено к этому элементу за пределами вашего контроля. Такая ситуация довольно редкая, так как позиционирование не наследуется каскадом.

Относительное (relative):

Мы можем смещать внутренние элементы в разных направлениях, сдвигать от верхней, правой, нижней и левой границы относительно нашего родительского контейнера. Это свойство является отправной точкой для внутренних элементов данного блока, это очень важное свойство.
При установке в положение relative элементы занимают один и тот же объем пространства на странице, точно также, если бы мы установили их в положение static.
Теперь мы имеем возможность использовать Z-индексы, благодаря которым элементы на веб-странице могут накладываться друг на друга в определенном порядке, и действительно Z-индексы на самом деле не умеют работать со статическими элементами. Даже если вы не установите значение Z-индекса, этот элемент все равно будет отображаться поверх других статически-позиционированных элементов.
Это ограничивает сферу абсолютного позиционирования дочерних элементов. Любой элемент, который является дочерним относительно позиционируемого элемента, может быть абсолютно позиционирован внутри этого блока.

Абсолютное (absolute):

Когда вы применяете абсолютное позиционирование, элемент прорисовывается в новом потоке документа. Это означает, что он больше не занимает никакого пространства среди всех элементов, которые его окружали, когда он был в статическом или относительном состоянии. Просто мы указываем элементу, где ему быть и он прилипнет.
Для элемента с положением absolute, вы можете указать позиционирование сверху, слева, снизу и справа, чтобы установить местоположение, в конце концов. Помните, что эти значения будут относительно ближайшего родительского элемента с относительным (или абсолютным) позиционированием. Если нет такого родителя, он будет размещаться относительно самой страницы.
Компромисс, и наиболее важная вещь, которую нужно помнить про абсолютное позиционирование заключается в том, что эти элементы удаляются из основного потока элементов страницы. Элемент с этим типом позиционирования не зависит от других элементов и не влияют на другие элементы.

Фиксированное (fixed):

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

Наследованное (inherit):

Это свойство работает, исходя из своего названия. Элемент наследует значение родительского элемента. Как правило, элементу присваивается статическое значение, если у родителя нет никакого значения позиции.

В итоге:

Относительное позиционирование позволяет вам настроить положение дочернего элемента относительно себя.
Абсолютное позиционирование позволяет вам настроить положение вашего элемента относительно первого не статического родителя.
Как относительные, так и и абсолютно-позиционированные элементы не влияют на статические элементы, которые находятся рядом с ними в документе (абсолютно-позиционированные элементы удаляются из основного потока, относительно позиционированные элементы занимают исходное положение и остаются в прежнем потоке).

Подводные камни:

Вы не можете использовать свойство position и float одновременно. Если элемент имеет оба этих свойства (float и position:absolute или fixed), в этом случае, float не будет использован.
Внешние отступы (margin) не создают проблем абсолютно-позиционированным элементам. Допустим у вас есть обычный параграф (p элемент) с нижним отступом в 20px (пикселей). Ниже него изображение с верхним отступом в 30px. Пространство между параграфом и изображение не будет 50px (20px + 30px), а скорее 30px (30px > 20 пикселей). Это момент называется схлопывающиеся отступы. Два отступа комбинируют (или сворачиваются) для того, чтобы объединиться в один. Абсолютно-позиционированные элементы не отслеживают отступы других элементов, тем самым перед вами не возникает неочевидный казус.

К прочтению:

2. Отображение элементов в документе

Каждый элемент на веб-странице представляет собой прямоугольный блок. Свойства display определяет как должен вести себя этот прямоугольный блок, каким он должен быть.

По умолчанию, все элементы являются строчными (inline), кроме тех, кто заведомо браузером указан как блочный (block). В лучшем случае, при помощи своих пользовательский стилей, вы можете сбросить строчный элемент, задав ему значение «block».

Строчный (inline):

Строчные элементы, имеющие «inline» по умолчанию. Такие как span, b, em и тд.
CSS свойства верхнего и нижнего margin/padding отступов будет игнорироваться, но будут применимы левый и правые margin/padding отступы. То есть в этом случае, у нас есть движется по горизонтали, но не по вертикали.
Для таких элементов игнорируются свойства ширины и высоты.
Если элемент является обтекаемым (имеет float), в этом случае, он по умолчанию принимает значение «block» и становится блочным.

Блочно-строчный (inline-block):

Блочный элемент, который обтекается другими элементами подобно строчному.
Такому элементу можно задавать ширину и высоту, внешние и внутренние отступы (движение по вертикали и горизонтали).
Сначала такой элемент отрисовывается подобно элементу со значением «block» (словно вы встраиваете изображение, img), однако затем отображается браузером как строчный элемент.
Существует проблема, которая возникает с внешними отступами.

Блочный (block):

Например, существует ряд элементов, которые по умолчанию имеют значение «block». Такие как div, section, ul и тд.
Блочные элементы не идут друг за другом, как строчные, они переносятся на новую строку. Если, например, ширина не задана, блок будет расширен до ширины родителя и заполнит его.
Игнорируется vertical-align.

Контекстный (run-in):

Устанавливает элемент как блочный или встроенный в зависимости от контекста.
Не поддерживается в Firefox + спецификация не очень хорошо определена.
Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки.

Скрытый (none):

Полностью удаляет элемент со страницы.
В то время как элемент находится в DOM структуре документа, он удаляется визуально и, в любой другой момент, вы можете изменить это состояние.

Табличный (table):

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

Чтобы использовать, просто имитируйте нормальную структуру таблицы. Пример:

Адаптируемый (flex):

Направлена на предоставление более эффективного способа выравнивания и распределения места между элементами в контейнере (родительском блоке), даже если их размер неизвестен или динамический.
Основная идея flex-блоков, обладать способностью изменять свою ширина/высота (и другое), чтобы наилучшим образом заполнять свободное место (в основном, для поддержки адаптивности на всех видах устройств и размеров экрана).
В основном элементы будут распределяться либо вдоль главной оси, либо вдоль поперечной оси контейнера.
Flex-блоки лучше всего подходят для составных частей приложения и мелкомасштабных компонентов на странице, в то время как grid-блоки больше используется для компонентов на странице большого масштаба.
Также как существует inline-block, inline-table, существует и inline-flex.

Сеточный (grid):

Значение grid позволяет нам создавать макет сетки. Она направлена на решении проблем со старыми методами компоновки блоков, имеющих float и inline-block, которые в свою очередь имеют недостатки, и действительно не предназначались для макета страницы.
Основная идея grid-концепции, управлять содержимым, обеспечивая механизм распределения имеющегося пространство блоков в столбцы и строки, с помощью набора заранее установленных размеров.
Вместе с этим фактом мы можем устранить проблемы, которые появляются при разработке, опираясь на старую технику разработки сайтов, теперь вы тратите меньше усилий.
Не поддерживается. Только в IE10+.
Также как существует inline-block, inline-table, inline-flex, существует и inline-grid

К прочтению:

3. Плавающие элементы

Float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Плавающие (обтекающие) элементы сначала выстраиваются в нормальном потоке, затем образуется новый поток, и они сдвигаются либо вправо, либо влево (в зависимости от выбранного значения) в родительском контейнере. Иными словами, они идут по порядку друг за другом. Учитывая, что в родительском контейнере есть достаточно свободного места, эти плавающие элементы не подстраиваются и не выравниваются для распределения пространства между этими самыми элементами.
Как правило, плавающий элемент обязательно должен иметь фиксированную ширину. Это гарантирует, что float ведет себя так как и ожидалось, избегая проблем в некоторых браузерах.
Используя свойство clear, вы можете указать пять значений: left, right, both, inherit, и none. Это свойство определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Например, если вы укажите «left», элемент задействует отмену обтекания с левого края плавающего элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
Правило, которое я обнаружил для себя, прекрасно работает для моих float-макетов.В своем HTML коде, я почти всегда сначала создаю плавающие элементы во время разметки, прежде чем добавлять простые элементы, которые могут взаимодействовать с ними. Вы экономите большую часть времени, и это дает желаемый результат.
Но и тут бывают проблемы, когда вы помещаете в родительский блок плавающие элементы, родительский контейнер не может определить динамически высоту своих дочерних элементов, поэтому родительский контейнер будет иметь высоту равную нулю. Это может поломать вашу верстку. Существует метод, который позволяет родительскому элементу, определить свое пространство с учетом каких-либо плавающих элементов внутри. Можно использовать CSS свойство overflow (переполнение) со значением hidden (скрыть). Обратите внимание, что значение свойства overflow не предназначено для такого рода использования, и может вызывать некоторые проблемы, такие как скрытие нужного контента в данный момент или появление нежелательных полос прокрутки.

Хак: для очистки плавающих элементов лучше применять ‘overflow:auto’ к родительскому элементу.

Обратите внимание, что данный трюк не очищает плавающие элементы — он просто растягивает родительский контейнер. Вы можете принудительно очистить float, если вы добавите очищающий элемент после последнего плавающего элемента, или вы можете добавить в любом нужном вам месте, создав тем самым новый поток. Родительский элемент не умеет очищать дочерние плавающие элементы.

9 правил:

1. Плавающие элементы прижимаются к границам своих контейнеров, но не дальше.

2. Любой плавающий элемент будет находится либо рядом, либо ниже предыдущего элемента. Если элементы прижаты влево, второй элемент появится точно справа от первого. Если они прижаты вправо, второй элемент появится слева от первого (reverse).

3. Элемент с левым обтеканием, не может быть правее, чем элемент с правым обтеканием.

4. Плавающие элементы не могут подняться выше верхнего края родительского контейнера (однако становится еще сложнее, когда задействованы отступы).

5. Плавающий элемент не может быть выше своего соседа плавающего элемента.

6. Плавающий элемент не может быть выше своего соседа строчного элемента.

7. Плавающий элемент совместно со своим таким же соседом элементом, не могут выходить за края родительского контейнера.

8. Плавающий элемент должен быть помещен как можно выше.

9. Элемент с левым обтеканием должен быть помещен как можно дальше влево, как это возможно, элемент с правым обтеканием должен быть помещен как можно дальше вправо, как это возможно.

Подводные камни:

Внешние отступы, которые мы добавляем к абзацу применяется вдали справа от изображения. Это происходит потому, что изображение — блок! Вот почему он не увеличивает пространство между изображением и абзацем.

К прочтению:

4. CSS селекторы

Разница между выборкой X Y и X > Y в том, что в последнем будут выбрать только прямые потомки.

Этот селектор похож на Х + Y, но он менее строгий. В то время как смежный селектор (ul + p) выберет только первый элемент, который непосредственно предшествовало после p, в нашем же случае, это более обобщенная выборка. В нашем случае он отберет все элементы p, следующие за элементом ul.

Звезда означает, что указанное значение должно появиться где-то в значение атрибута.

Если мы хотим выбрать все ссылки, которые имеют атрибута href, начинающийся с http, то мы можем использовать данный селектор, показанный выше.

И снова, мы используем регулярные выражение символ — $, который ищет с конца строки. В этом случае мы ищем все ссылки на изображения, заканчивающиеся на формат JPG.

), символ позволяющий искать атрибут, в котором имеется значения разделенные пробелом.

Выбирает все элементы div, за исключением одного, элемент, который имеет идентификатор контейнера.

Мы можем использовать псевдо-элементы (обозначение ::) в стиле фрагментов элемента, например, выбрать первую строку или первую букву элемента. Это работает только для блочных элементов.

nth-child псевдо-классы ориентирован на конкретные элементы в стеке (набор одинаковых по типу элементов). Она принимает целое число в качестве параметра, тем не менее, отсчет начинается не с нуля. Если вы хотите вытащить второй элемент списка, используйте li:nth-child(2). Мы даже можете использовать вытаскивать чередующиеся элементы в стеке, чтобы выбрать переменный набор нам необходимо в качестве параметра передать переменную (инкремент). Например, мы можем вытащить каждый четвертый элемент списка таким образом li:nth-child(4n).

Что если у вас огромный список элементов в UL, и нам нужен только предпоследний элемент? Пусть у нас список из 10 элементов, мы могли сделать так li:nth-child(9), но а если мы не знаем количество элементов, в этом случае, лучше использовать вариант, показанный выше.

Это особенно полезно при задании рамок и отступов для списков и таблиц.

К прочтению:

5. Эффективные селекторы

Ниже приведен список селекторов в порядке эффективности (c учетом скорости поиска элемента и производительности). Идентификаторы являются наиболее эффективными, а псевдо-классы и псевдо-элементы являются наименее эффективными.

К прочтению:

6. Переотрисовка и перерасчет

Переотрисовка (repaint):

Также известное, как redraw — это событие, которое происходит всякий раз, когда что-то делается видимым на странице, если ранее оно было скрыто (visibility:hidden, overflow:hidden, display:none, и др), или наоборот (visibility:visible, overflow:auto, display:static, и др), когда происходят какие-то изменения в макете. Примером может быть что угодно: добавление к элементу рамки, изменение цвета фона, изменение видимости стилей — все это приводит к переотрисовке страницы. Тем самым данное событие может дорого вам обойтись в плане производительности, так как нагружает браузерный движок поиском, проходами по всем элементам, чтобы определить, что является видимым уже, а что должно отобразиться.

Перерасчет (reflow):

Перерасчет (или перекомпоновка) носит более значительный характер. Это событие будет происходить всякий раз, когда происходят манипуляции с DOM-деревом HTML документа, или когда стиль, который влияет на расположение, изменяется у элемента, это событие будет происходит всякий раз, когда атрибут class у элемента изменяется, или всякий раз, когда изменяется размер окна браузера. Цель перерасчета в том, чтобы определить, где различные части сайты теперь должны отображаться. Если вы измените родительские свойства, тогда его потомки также будут пересчитаны. Элементы, которые появляются после того, как DOM было сформировано, будут сформированы заново. Если изменяется дочерний элемент, тогда будет пересчитан и родительский элемент, чтобы учесть изменения своих потомков. Затем, происходит переотрисовка.

Перерасчет также очень дорого обходится в плане производительности, и является одной из главных причин медленной работы скриптов, особенно на устройствах с низкой вычислительной мощности, таких как телефоны.

Минимальный перерасчет (minimal reflow):

Долгий перерасчет может повлиять на весь документ, всю веб-страницу. Чем больше документ, тем дольше перерасчет. Меньше HTML-кода лучше производительность. Элементы с абсолютным позиционирование или фиксированным, не влияют на структуру главного документа, так как они находятся в отдельном потоке, если в них произошли изменения, только они будут подвержены перерасчету. Конечно, документ, в котором произойдут изменения, все равно будут полностью переотрисованы, но эта проблема имеет слабый характер, чем перерасчет всего DOM-дерева.

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

Что вызывает перерасчет:

— Изменение размера окна
— Изменение шрифта
— Добавлении или удалении стилей
— Динамическое изменение, пользователь вводит текст в поле ввода
— Активация CSS псевдо-классов, к примеру, событие :hover
— Манипулирования с атрибутом class
— Сценарии манипулирования с DOM-деревом
— Расчет значений offsetWidth и offsetHeight
— Задание свойств в атрибут style

Полный список, составленный Полом Айришом (Paul Irish), того, что приводит к перерасчету DOM можно ознакомится тут.

Как свести к минимуму влияние перерасчета на производительность:

— Изменение атрибутов класса у элементов, делайте как можно реже (минимум манипуляций в DOM-дереве).
— Избегайте установки нескольких встроенных стилей.
— Применяйте анимацию к элементам, которые имеют фиксированное или абсолютное позиционирование.
— Избегайте табличной разметки.
Даже незначительные изменения в ячейке таблицы вызовут перерасчет на всех остальных узлах таблицы.
— Не используйте «CSS expressions» (также известное, как «IE expressions»)

Примечание:

Потеть над селекторами, используемых в современных браузерах, бесполезно. Большинство методов выборки сейчас настолько быстрые и эффективные, что на это действительно не стоит тратить много времени. Кроме того, есть различия в различных браузерах, и у каждого есть свои медленные селекторы.

Чрезмерные неиспользуемые стили, скорее всего, они будут бить по производительность, чем любые селекторы, которые вы добавили в свой документ. Следует прибираться в своих css-стилях. 3000 строк неиспользуемых или избыточных на странице стилей, в наше время, это не редкость. Если разные стили используются на разных страницах вашего сайта, разбейте ваш один и единственный styles.css на несколько дополнительных, это будет лучшим вариантом.

К прочтению:

7. CSS3 свойства

border-radius:

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

Помните, поскольку не во всех браузерах реализованы формальные CSS3 правила, вам может понадобиться использовать специальные браузерные префиксы (-webkit-, -moz-, -ms-, -o-) при инициализации css-правил, либо вы можете использовать css-препроцессоры для облегчения написания css-кода.

box-shadow:

Свойство позволяет нам легко реализовывать множественные тени (наружный или внутренний) у блочного элемента, определяя значения для цвета, размера, размытия и смещения.

Так как все остальные браузеры давно поддерживают css3 свойства, мы с вами далее будем упоминать только IE.
Поддержка: IE9+

box-shadow принимает четыре параметра: x-смещение, y-смещение, размытие, цвет тени.

Первое значение задает горизонтальное смещение тени, с положительным значением смещения тени справа от элемента, и отрицательное значение слева.

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

Если мы указываем третье значение, мы определяет расстояние размытия тени. Допустимы только положительные значения, и чем больше значение, тем больше будут размыты края.

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

Необязательный ключевое слово ‘insert’ можно поставить, после значений размера и цвета тени. Если оно присутствует, тогда тень будет нарисована внутри элемента.

text-shadow:

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

Параметры тени для текста такие же, как для box-shadow за исключением того, что отсутствует вставка текста при помощи ключевого слова.

Как с box-shadow, можно иметь несколько текстовых теней просто разделяя их запятыми. Вот пример, создающий эффект пылающего текста:

Градиенты:

Можно объявить фон элемента сплошным цветом, либо вы можете также задать его градиентом. Используя градиенты, объявленные в CSS, лучше использовать файловые изображения, так лучше для контроля и производительности.

Градиент — это, как правило, один цвет, которые плавно переходит в другой, но в CSS вы можете контролировать каждый аспект того, как это все будет происходить, от направления до цветового насыщения.

Линейные градиенты:

Пожалуй, самый распространенный и полезный вид градиента. По оси реализация градиента может идти слева-направо, сверху-вниз, или под любым углом, который вы выберите. Если вы не объявляете угол, тогда по умолчанию будет задана ось сверху-вниз. Чтобы задать ось слева-направо, вы должны указать дополнительный параметр в начале линейного градиента, функцию, начинающуюся со слова «to right», указывающий направление, «направо». Слово «to» лишь синтаксическая вставка для определения также углов. Вы не ограничиваете себя только двумя цветами. На самом деле вы можете использовать цветовую палитру. Вы можете также объявить, где вы хотите отобразить тот или иной цвет. Все это называется «color-stops».

Подводные камни:

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

Существуют три различных синтаксиса, которые браузеры поддерживают:
— Старый: оригинальный движок WebKit и его единственный способ, используем from() и color-stop()
— Редко используемый: старая система углов, например, ключевое слово «to left»
— Современный: новая система углов, например, ключевое слово «to right»

Кстати старая система градусов работает и сейчас, хотя новый синтаксис немного отличается. По старому способу мы определяем 0deg и слева направо и идет вращение против часовой стрелки, в новой системе (обычно без префикса) способ определяет 0deg как снизу вверх и по часовой стрелке.

Формула: OLD (or TWEENER) = (450 — new) % 360
Или даже проще: NEW = 90 — OLD, OLD = 90 — NEW
Старый синтаксис: linear-gradient(135deg, red, blue)
Новый синтаксис: linear-gradient(315deg, red, blue)

Радиальные градиенты:

Радиальный градиент отличаются от линейных тем, что он начинает работать в одной точке и исходит наружу. Градиенты часто используются для имитации освещения, которое, как мы знаем, не всегда прямая, так что они могут быть полезными, чтобы сделать градиентом более естественные вещи.

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

Возможными значениями являются: ближайший-угловой, ближайшая сторона, самый дальний уголок, самый дальняя-боковая сторона. Вы можете размышлять так: «я хочу, чтобы этот радиальный градиент запускался из центральной точки до такой то точки, и пускай везде заполняется цветом». Все просто, вы можете указать определенные точки с помощью «at ______» первого параметра.

Подводные камни:

Есть опять три различных синтаксиса, которые поддерживают браузеры:
— Старый: оригинальный движок WebKit и его единственный способ, используем from() и color-stop()
— Редко используемый: ваши значения, которые вы указываете из центра, они могут сломаться в браузерах, которые поддерживают как раз новый синтаксис (с префиксами) и новую систему углов, поэтому нужно отслеживать этот момент.
— Современный: используйте связку, «circle closest-corner at top right»

Рекомендуется использовать autoprefixer как в postcss для обработки префиксов, чтобы не мучится с различными браузерами.

Повторяющиеся градиенты:

Размер градиента определяет окончательный цвет и размер. Если вы указали 20 пикселей, размер градиента (который затем повторяется) будет является 20 от 20px площади.

Они могут быть использованы вместе с линейным и радиальным вариациями.

К прочтению:

8. CSS3 медиа-запросы

Media-запросы, позволяют определять, в какой момент какие стили должны применяться. Вы можете написать CSS для мобильных устройств, или настроить макет для печати.

Существует три способа вызова медиа-запросов (зависимые стили):
— Во-первых, таблицы стилей в HTML или XHTML:

— И наконец, в css-стилях, с помощью правила import:

— Или с помощью правила media:

В настоящее время, существует 13 мультимедийных возможностей контролировать стили, исходя из событий браузера: вы можете отслеживать ширину, высота устройства, ориентацию устройства, изменение размера окна браузера, цвет, цветовой индекс, монохромность, разрешение экрана, развертку и сетки. Все, кроме ориентации, сканирования, и сетки может принимать min — и max — префиксы.

9. Адаптивный web-дизайн

Настройка области просмотра (viewport):

Область просмотра дает браузеру инструкции о том, как контролировать размеры страницы и масштабирование.

Ширина = часть ширины устройства — ширина контента (width=device-width), так мы устанавливает ширину страницы, чтобы использовать всю ширину экрана устройства (которое будет меняться в зависимости от устройства).

Изначальный масштаб равен 1.0, это набор начального уровня масштабирования, когда страница загружается браузером.

Подводные камни:

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

Не позволяйте контенту зависеть от конкретного вида экрана, задавайте фиксированную ширину, ибо размеры экрана и ширина в css пикселях может варьироваться между устройствами, контент не должен полагаться на конкретный экран какого-либо устройства, фиксированная ширина хорошо, остальное нет.

Используйте media-запросы, чтобы применять различные стили для малых и больших экранов. Установка большой ширины для элементов страницы, заставит окно просмотра уменьшить масштаб. Вместо этого, рассмотрите возможность использования относительной ширины значений, например, «width: 100%». Также, будьте осторожны с использованием больших абсолютных значений относительных смещений позиционирования. Ваш элемент может уйти за пределы окна просмотра устройства.

Сетка сайта:

В теории, отзывчивая сетка имеет 12 столбцов, и общую ширину 100%, она будет сжиматься и расширяться при изменении размеров окна браузера.

Сначала убедитесь, что все HTML-элементы имеют box-sizing свойство установленное в border-box. Это гарантирует, что padding и border входят в общую ширину и высоту элементов.

Добавьте следующий код в ваш CSS:

Адаптивные изображения:

Изображения будут отзывчивыми и масштабируемыми, если свойство width равняется — 100%. Однако, лучшим вариантом будет набор max-свойств ширины (width) в 100%, поскольку изображение будет масштабироваться (увеличиваться), нам необходимо делать размер больше, а не изменять его масштаб.

Фоновые изображения могут также реагировать на изменение размеров и масштабирования устройства.

Если background-size имеет значение «contain», фоновое изображение будет масштабироваться, и пробовать вписаться в область содержимого. Однако изображение сохранит свои пропорции.

Если значение background-size задано со значением «100% 100%», фоновое изображение будет растягиваться, чтобы покрыть всю область содержимого.

Если background-size имеет значение «cover», фоновое изображение будет масштабироваться, чтобы покрыть всю область содержимого. Значение «cover» сохраняет соотношение сторон, и определяет какую часть фона изображения ему обрезать.

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

Вы можете использовать медиа-запрос min-device-width, вместо min-width, который проверяет ширину устройства, а не ширину окна браузера. Тогда изображение не будет меняться при изменении размера окна браузера:

В HTML5 введен новый элемент, который позволяет определять более чем одно изображение
(нет поддержки в IE, только Edge 13+).

Элемент работает аналогично, как простой элемент img. Вы настраиваете различные источники, первый источник, является значением по умолчанию, потом в случае, изменении экрана браузера, изменяется и источник отображения:

Атрибут srcset является обязательным и определяет источник изображения. Атрибут media является необязательным и принимает медиа-запросы, в качестве условия. Вы должны также определить img-элемент для браузеров, не поддерживающих picture (хороший запасной вариант).

Адаптивное видео:

Если свойство width равно 100%, видеоплеер будет реагировать и масштабироваться. Однако, он может быть развернут в полноэкранный режим. Лучшим решением во многих случаях будет использование параметра max-width свойства, вместо простого width.

К прочтению:

10. CSS3 переходы

CSS переходы позволяют делать плавное изменение любого свойства элемента в течение установленного времени.

— transition-property: свойство, которое будет изменяемым (в примере, изменяем фоновое свойство)
— transition-duration: сколько времени должен длится переход (0.3 секунды)
— transition-timing-function: как быстро ведет себя переход с течением времени (ease, один из типов)

transition-timing-function — позволяет нам изменять скорость перехода, определяя ее значение один из шести возможных: ease, linear, ease-in, ease-out, ease-in-out, и cubic-bezier (которые позволяют определить свою собственную кривую времени).

Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active. Вместо того, чтобы добавлять переходы для каждого из состояний элемента, вам достаточно объявить инструкцию перехода всего один раз, когда он находится в нормальном состоянии.

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

Другое основное использование изменяющихся состояний, является изменение фона поля ввода во время его фокуса.

В этом случае, мы указываем переход во время события, поэтому мы не добавления дополнительных ненужных классов в CSS. Мы применяем перехода, когда поле ввода получает фокус.

К прочтению:

11. CSS3 анимации

Если мы говорим о CSS переходах, мы все знаем об изменяемых свойствах, так как они переходят из одного состояния в другое, в то время как, CSS анимации зависят от ключевых кадров и свойств этой анимации.

— keyframes: используется для определения стилей элемента в моменты времени.
— animation properties: используется для назначения набора ключевых кадров конкретному элементу и назначению того, как будет изменяться (анимироваться) этот элемент.

Ключевые кадры (keyframes):

Ключевые кадры — это основа анимации. Они определяют то, как будет выглядеть анимация на каждом этапе временной шкалы. Каждый набор ключевых кадров ( @keyframes) состоит из:

— название анимации: имя, которое описывает анимацию, например, bounceIn
— этапы анимации: каждый этап анимации представлен в процентах, где 0% представляет начальное состояние анимации, 100% — конечное. Вы можете создавать свои промежуточные состояния.
— css свойства: определенные для каждой стадии анимации временной шкалы

Давайте посмотрим на простую реализацию @keyframes, которую назовем “bounceIn”. Этот @keyframes состоит из трех этапов. На первом этапе (0%), этот элемент имеет непрозрачность (opacity), установленную в ноль, и плавный переход масштаба, установленный в 10% от первоначального базового масштаба. На втором этапе (60%), наш элемент появляется (непрозрачность устанавливаем в значение единица) и увеличивается до 120% от своего размера по умолчанию. На заключительном этапе (100%), он возвращается к своему исходному размеру.

@keyframes добавляется в ваш основной CSS-файл.

Свойства анимации (animation properties):

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

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

Мы добавляем свойства анимации нашему CSS-селектору (или элементу), который хотим анимировать, необходимо добавить следующие два свойства для того, чтобы анимация вступила в силу:
— animation-name: имя анимации, определенное в @keyframes
— animation-duration: продолжительность анимации в секундах (например, 0.5s) или миллисекундах (например, 200ms).

Продолжая наш разговор о bounceIn, мы добавляем animation-name и animation-duration, например, к нашим div-элементам, которые хотим анимировать.

Оперирую с @keyframes (набор ключевых кадров) и animation properties (свойствами анимации), мы имеем простую анимацию.

В дополнение к обязательным свойствам animation-duration и animation-name, можно дополнительно настраивать и создавать сложную анимацию, используя следующие свойства:
— animation-timing-function: задает скорость кривой анимации
— animation-delay: определяет задержку для запуска анимации
— animation-iteration-count: указывает, сколько раз анимация должна запускаться заново
— animation-direction: указывает, должна ли анимации идти в обратном направлении или чередоваться циклом
— animation-fill-mode: задает стиль элементу, если анимация не воспроизводится. Например, когда она закончилась или когда имеет задержку
— animation-play-state: определяет, будет ли анимация работать или будет приостановлена

Сокращенный синтаксис:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Чтобы добавить несколько анимации элементу, вы можете просто разделить значения запятыми. Вот пример:

К прочтению:

12. Масштабируемая векторная графика (SVG)

SVG — масштабируемая векторная графика. Этот формат основан на XML, который поддерживает анимацию и интерактивность. Иными словами, SVG — это технология, которая позволяет нам создавать графику с помощью написания кода. Кроме того, она является масштабируемой. А не векторной графикой таких форматов, как PNG и JPEG, которые имеют фиксированные размеры и не могут быть масштабированы без потери качества, SVG может быть, теоретически, масштабирована до любого размера.

Мы можем использовать ".svg" файл в нашем коде, установив его в качестве источника изображения, как это делается с обычными html-изображениями, в этом случае, мы пишем "<img src=’say_hello.svg’>". Но это не так интересно. Одна из величайших особенностей формата SVG является то, что это на самом деле текстовый файл в формате XML. Так что мы можем открыть, прочитать и взаимодействовать с ним — изменять свойства элементов, такие как позиция, цвет фона или шрифты, и все это делать с помощью JavaScript и CSS. Кроме того, каждый элемент SVG может быть анимирован. И это действительно классно.

Так что, в принципе, мы всегда должны использовать SVG вместо PNG или JPEG, когда мы говорим о базовых геометрических фигурах, логотипах и векторной графики, в целом.

Вот простой красный круг в формате SVG:

Основные параметры:

Обычные координаты точек (х, у = 0). В SVG начальная точка находится в верхнем левом углу.
Каждое SVG-элемент имеет несколько основных параметров:
— Х: координата x верхнего левого угла элемента
— Y: координата y верхнего левого угла элемента
— fill: цвет фона элемента
— fill-opacity: прозрачность фона элемента
— stroke: цвет рамки
— stroke-width: ширина рамки

Плюсы:

— Зависит от разрешения: масштабируем без изменения качества изображения. Он широко используется для устройств с экранами Retina и теми, кто им близок.
— Маленький размер. Элементы в формате SVG, SVG-изображения занимают гораздо меньше места, чем их близнецы, созданные в растровом формате.
— Гибкость. С помощью CSS, вы можете быстро изменить и настроить графику на сайте, цвет фона, положение логотипа на странице. Чтобы сделать это, достаточно отредактировать файл в любом текстовом редакторе.
— Можно просмотреть содержимое SVG-файл в любом браузере (IE, Chrome, Opera, FireFox, Safari).
— Никаких лишних http-запросов, кроме использования тега img
— SEO-ориентированный: специальные текстовые метки, описания к изображению, могут быть анализированы поисковыми системами.
— Мы имеем полное управления через JavaScript для настройки интерактивности и анимации.

Минусы:

— Размер файла растет очень быстро, если объект состоит из большого количества мелких элементов.
— Невозможно прочитать часть графического объекта (svg-элемента), это замедляет чтение кода, а значит и время вашей работы.

К прочтению:

Видео:

13. CSS спрайты

CSS спрайт — это техника оптимизации производительности, которая сочетает в себе несколько изображений в одном изображении, называемом спрайт-лист (sprite sheet) или набор плиток (tile set). Спрайты уменьшают нагрузку на сеть за счет сокращения количества загрузок с сервера, необходимых для отображения веб-страницы.

Комбинируя несколько изображений в одном, все изображения загружаются одним http-запросом. Браузеры ограничивают количество одновременных запросов на сайте может, так как http-запрос должен убедиться в подтверждении связи. Таким образом, спрайты важны по тем же причинам, по которым мы делаем также конкатенацию, минимизацию, минификацию CSS и JavaScript файлов.

Использование спрайтов в CSS:

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

Преимущества:

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

— Пользователи получают быструю загрузку страниц, так как изображения появляются одновременно, как только спрайт был загружен.
— Мы имеем большую пропускную способность и снижаем потребление ресурсов на сервере, уменьшая количества перегрузок сети.

К прочтению:

14. Вертикальное выравнивание

Вертикальное выравнивание — это одна из главных причин, по которой некоторые люди думают, что css это чепуха. Вы удивляетесь, наверное, почему так сложно выровнять содержимое по вертикали с помощью CSS? Почему нельзя создать свойство, которое делает это автоматически? Почему вертикальное выравнивание не работает у меня?!

Отвечая на вопрос о вертикальном выравнивании (vertical-align): это свойство применимо только для строчных элементов (inline) и табличных ячеек (table-cell), надеюсь это убьет ваши сомнения.

Это конечно, очень жестоко, но даже приняв эту истину, остаются некоторые затруднения, и сейчас вы должны ответить сами себе перед тем как что-то выравнивать по вертикали:
— ваш элемент является блочным или строчным?
— ваш текст однострочный или многострочный?
— всегда ли вы знаете высоту содержимого?
— можете ли использовать CSS3?

Метод межстрочного интервала (line-height):

Этот метод можно использовать, когда вы пытаетесь вертикально выровнять однострочный текст, строчный элемент или изображение.

Допустим, у вас есть следующий HTML:

Вам необходимо выровнять элемент .child по вертикали:

Но если содержание элемента .child находится непосредственно внутри родительского элемента .parent:

В этом случае, вы можете установить межстрочный интервал таким образом:

Если вместо span-элемента у вас img-элемент:

Тогда вам нужно изменить таким образом:

Метод css таблиц (css table):

Этот метод заключается в имитировании таблицы с помощью CSS. Допустим, у вас есть соответствующий HTML-код:

Мы выравниваем .child таким образом:

В этом случае, нам неважно какая высота у родителя, дочерний элемент всегда будет выровнен по вертикали. К сожалению, этот метод не работает в старых версиях IE.

Метод абсолютного позиционирования (absolute position):

Этот метод имеет два способа реализации:

1 — Если вы знаете высоту элемента, который хотите выровнять по вертикали
2 — Если вы не знаете этой высоты (работает только, если вы можете использовать технологии CSS3)

Допустим, у вас есть следующий HTML:

В первом случае, мы можем выровнять .child таким образом:

Во втором случае:

На самом деле, это только основные способы, при помощи который вы можете выполнить вертикальное выравнивание, однако это можно также сделать с помощью flexbox, padding, stretching и др.

К прочтению:

15. Известные проблемы

Дополнительные внешние отступы в строчно-блочных элементах:

Давайте предположим, что вам нужно создать список, элементы которого должны идти друг за другом горизонтально, без интервала между ними.

Код может быть такой, что-то вроде этого:

Затем, вы смотрите в браузере. Да, вам кажется, что все работает правильно, за исключением дополнительных отступов между элементами. Вы, не спрашивая никого, обнуляете отступы (margin: 0) в коде, однако, проблема по-прежнему остается.

Проблема возникает потому, что когда вы используете для своих элементов строчно-блочное отображение, пробелы, которые присутствую в HTML, начинают занимать визуальное пространство в браузере.

Итак, давайте попробуем решить эту проблему.

Без пробелов в HTML:

Так что, если пробелы и есть наша проблема, давайте удалим их.

Комментарии в HTML:

Это работает точно так же, как и предыдущий метод, просто пробелы вы заменяете комментариями.

Нулевой размер шрифта в родительском контейнере:

Вы просто добавляете обнуляете размер шрифта (font-size: 0), в родительском селекторе, тем самым, размер пробелов сводится к нулю, но тогда вам придется указывать нужный размер шрифта у дочерних элементах.

Отрицательный внешний отступ у строчно-блочного элемента:

Довольно очевидно, оказывается внешний отступ (margin) у строчно-блочных (inline-block) элементов имеет 4px, поэтому, давайте отрицательный отступ в 4px и все это будет нормально работать.

Как работает CSS Position — объяснение с примерами кода

Сегодня мы узнаем все, что вам нужно знать о свойстве CSS Position. Объясняем всё на наглядных примерах с кодом.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое свойство Position в CSS

Если вы хотите создавать сайты, которые выглядят красиво и уникально, вам обязательно нужно научиться использовать свойство CSS Position. Давайте посмотрим, как это работает.

Используя Flexbox или Grid, вы можете сделать симметричный сайт, к примеру, как этот:

Используя свойство Position, вы можете сделать асимметричный сайт, как этот:

Дело в том, что с помощью Flexbox и Grid вы не можете разместить содержимое сайта в любом месте. Вы ограничены осями X и Y.

Посмотрите на этот рисунок, чтобы понять, что имеется в виду:

Ваши блоки будут соответствовать этим точным размерам и располагаться по сетке.

Но, используя свойство Position, вы cможете разместить блоки сайта в любом месте, отделив каждый элемент от других.

Используя Position, вы можете размещать свои блоки где угодно.

Вот еще один пример сайта, который вы можете сделать, используя свойство Position:

Используя свойство position, вы можете свободно передвигать эти маленькие точки, узоры волн и изображения пончиков по всей странице сайта в любое угодное вам место.

Настройка проекта

Для этого проекта вы можете использовать любой редактор кода, в котором установлен плагин emmet. Я собираюсь использовать CodePen.io.

Внутри тега body напишите этот код:

Очистите настройки браузера по умолчанию и добавьте этот CSS:

Стилизацию класса box-1 сделаем такой:

Свойство position, которое мы будем изучать, имеет 5 значений:

relative;
absolute;
static;
fixed;
sticky.

Чтобы переместить наш блок, мы будем использовать 4 параметра:

Top, Bottom;
Left, Right.

Что такое Static Position в CSS

Static не имеет никакого применения. Static — это значение по умолчанию для каждого блока.

Что такое Relative и Absolute Positions в CSS

И Relative, и Absolute работают одинаково, разница между ними заключается только в использовании классов.

Relative используется только для родительских классов.

Absolute используется только для дочерних классов.

Давайте рассмотрим два примера, чтобы понять разницу.

Сперва поэкспериментируем с Relative. Напишите этот код:

Вот результат, который вы получите:

Мы можем повторить тот же результат, используя значение Absolute следующим образом:

В чём же тогда основное различие?

Запишите этот код внутри вашего HTML:

Стилизуйте поля с помощью этого CSS-кода:

Результат должен выглядеть следующим образом:

Теперь выделим наши классы:

А в CSS напишем этот код:

Обратите внимание, что теперь .box-2 переместился на 100px относительно .box-1 .

Это потому, что .box-1 является родительским блоком, а .box-2 — дочерним.

Давайте поэкспериментируем ещё немного. Запишите этот код в свой CSS, убрав свойство position из .box-1 и добавив его в body :

Обратите внимание, что .box-2 переместился на 100px от элемента body .

Это произошло потому, что теперь body является родительским элементом, а .box-2 — дочерним.

Что такое Fixed Position в CSS

Это значение зафиксирует положение вашего элемента на экране даже при прокрутке в браузере. Рассмотрим несколько примеров, чтобы увидеть, как это работает.

Запишите этот код в HTML. Как только вы напишете lorem200, не забудьте нажать клавишу Tab на клавиатуре:

Затем добавьте этот CSS в нижней части:

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

Что такое Sticky Position в CSS

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

Не меняйте ничего в ваших текущих HTML и CSS, кроме этого единственного значения:

Вот, что должно получиться:

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

Заключение

Теперь вы можете уверенно создавать красивые сайты и решать простые проблемы верстки с помощью свойства position.

Позиционирование css: какое оно бывает и где применяется?

От автора: приветствую вас. Позиционирование css элементов является очень важной темой в сайтостроении. В этой статье я предлагаю рассмотреть его подробнее, все способы перемещения блоков по веб-странице.

Какие бывают виды

Если говорить о позиционировании блочных элементов, то оно задается с помощью свойства position. У него есть четыре значения и каждое заслуживает отдельного рассмотрения.

Абсолютное позиционирование

Это первый из известных видов. Задается так: position: absolute. После этого блок теряет свои привычные свойства и полностью выпадает из нормального потока. Что представляет собой этот поток? Попробуйте поставить в разметке несколько блочных элементов подряд. Как они станут? Друг за другом, и ни как иначе.

Это нормальное поведение блоков по умолчанию. А что же происходит с блоком, которому определено абсолютное позиционирование? Он полностью выпадает из нормального потока, другие блоки просто перестают замечать его, словно его никогда не было, но при этом элемент остается на странице. Абсолютное позиционирование в css часто применяется для точной расстановки декоративных элементов, иконок и прочего оформительского добра.

Теперь его можно перемещать с помощью свойств left, right, top и bottom. По умолчанию перемещение происходит относительно краев окна браузера, но если у родительского элемента задано position: relative, то смещение происходит относительно родительского блока.

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Элемент будет сдвинут в нижний правый угол. Я замечаю, что часто так делают кнопку наверх – просто размещают ее абсолютно в самый угол. А вот другой пример, в котором я покажу сначала возможную разметку:

А теперь css-стили для этого фрагмента:

В этом примере мы сначала родительскому контейнеру записали относительное позиционирование (relative – о нем дальше в статье), а потом для того же элемента .block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper.

Относительное позиционирование css-элементов

Это следующий вид и он записывается так – position: relative. Координаты задаются такими же свойствами, как и при абсолютном положении. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остается нетронутым. Такое же происходит и при относительном размещении – блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части.

Еще важно знать, что смещение происходит не от краев окна веб-обозревателя, а от того места, где изначально стоял блок. То есть:

Блок подвинется на 50 пикселей вправо и на 10 влево.

Фиксация

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

Во всем остальном фиксированное смещение полностью схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приема можно очень легко сделать верхние, нижние, боковые панели на своем сайте с различными кнопками и меню в них, которые не будут исчезать при прокрутке и всегда находиться на глазах.

Position:static или обычное статическое положение

Последний вид – статический, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию, но все-таки знать о четвертом значении нужно. Иногда с position: static записывают, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице.

Как сделать позиционирование блоков в css правильно?

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

Относительное позиционирование поможет, когда нужно немного сместить блок относительно его положения и при этом сохранить ему место в потоке. Также его задают блокам-родителям, чтобы использовать абсолютное перемещение для дочерних элементов.

Другие приемы: центровка, плавающие блоки

Свойство position не решает всех проблем с расстановкой блочных элементов. Как бы вы, например, создали сетку сайта с его помощью? У меня нет хороших идей. Тут на помощь приходят другие свойства.

С помощью float в css часто делают сетки. Свойство позволяет прижать блок к левому или правому краю родителя (float: left, float: right), давая возможность нескольким блочным элементам стать в одну линию, что встречается сплошь и рядом на любых сайтах.

Центровка делается так: блоку нужно записать определенную ширину, после чего задать свойство margin: 0 auto. Именно значение auto выровняет его по горизонтали точно по центру. Естественно, для этого он должен быть единственным в своей строке, иначе ничего не получится.

Все перечисленные в этой статьи виды позиционирования могут пригодиться веб-разработчику. Где-то иконку нужно вставить (position: absolute), где-то, чуть-чуть подправить положение блока, оставив за ним место (position: relative), а где и виджет зафиксировать (position: fixed). В общем, знание этого свойства точно лишним не будет.

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

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