Свойство Position: статическое, относительное, абсолютное и фиксированное.
Статический - это позиция по умолчанию для каждого элемента. Это означает, что элемент будет придерживаться обычного потока страниц. Пока элемент статичен, дополнительные свойства направления / позиционирования - влево / вправо / вверху / внизу / z-index - не действуют.
Относительный сохраняет исходное положение элементов в потоке документа, как и статический. Установка свойств top, right, bottom, left и z-index относительно позиционированного элемента смещает его от его нормального положения к выбранному положению. Остальное содержимое не будет изменено, чтобы поместиться в любой зазор, оставленный элементом.
Абсолютный удаляет элемент из потока документа и позиционирует его относительно его родителя, если его родительский элемент имеет позицию. Если абсолютно позиционированный элемент не имеет позиционированных предков, он использует тело документа - и все равно перемещается вместе с прокруткой страницы. Другие элементы будут вести себя так, как будто их там нет. Все дополнительные свойства направления / положения будут работать с ним.
Фиксированный удаляет элемент из потока документа, как и при абсолютном позиционировании. Фиксированные элементы всегда относятся к документу / области просмотра, а не к конкретному родительскому элементу, и на них не влияет прокрутка. Это означает, что элемент всегда остается на одном месте, даже если страница прокручивается. Все дополнительные свойства направления / положения будут работать с ним.
Прикрепленный (экспериментальный) обрабатывает элемент как значение relative, пока положение прокрутки области просмотра не достигнет заданного порогового значения, после чего элемент занимает позицию fixed, в которой ему сказано приклеить.
Псевдоэлементы
Псевдоэлементы - это видимые элементы на веб-странице, которые не находятся в DOM или созданы из HTML, а вместо этого вставляются напрямую через CSS. Эти ключевые слова позволяют стилизовать определенные части элемента - другими словами, они открывают множество возможностей дизайна. Например, ::first-line можно использовать для изменения шрифта первой строки абзаца. В CSS3 двойное двоеточие используется для отличия псевдоэлементов от псевдоклассов. (Псевдокласс используется для определения особого состояния элемента, например :hover.
Адаптивный или мобильный сайт в первую очередь
Адаптивный веб-дизайн - это настройка, при которой сервер всегда отправляет один и тот же HTML-код на все устройства, а CSS используется для изменения отображения страницы в зависимости от устройства или размера экрана. Адаптивный дизайн может быть ориентирован в первую очередь на мобильные устройства или настольные компьютеры.
Подход в первую очередь мобильные - это именно то, что кажется: проектирование для самого маленького экрана и постепенное продвижение вверх. Это одна из лучших стратегий для создания адаптивного или адаптивного дизайна. Подход, ориентированный на мобильные устройства, - это принцип прогрессивного совершенствования. Это идеология, согласно которой мобильный дизайн, как самое сложное, должен выполняться в первую очередь. Как только на вопросы о мобильном дизайне будут даны ответы, проектирование для других устройств станет проще. Все сводится к тому, что самый маленький из дизайнов будет иметь только основные функции, поэтому вы сразу же спроектируете сердце своего UX. Противоположный подход - постепенная деградация. Он включает в себя все сложности с самого начала, а затем устраняет их для небольших устройств. Проблема постепенной деградации заключается в том, что, когда вы создаете комплексный дизайн с самого начала, основные и дополнительные элементы сливаются, и их становится труднее различать и разделять. Вся философия рискует рассматривать мобильный дизайн как нечто второстепенное, поскольку вы сокращаете опыт.
И наоборот, мобильные сайты работают одинаково независимо от устройства. Другими словами, дизайн для мобильных устройств не меняется в зависимости от используемого устройства. В функциональности ничего не меняется, кроме масштаба сайта. Многие замечательные функции веб-сайта, такие как раскрывающиеся меню навигации, ограничены, так как их сложно использовать на мобильных устройствах.
Медиа-запросы: @media properties
- Все: подходит для всех типов мультимедиа.
- Печать: предназначен для постраничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра.
- Экран: предназначен в первую очередь для экранов компьютеров, планшетов, смартфонов и т. д.
- Речь: используется для программ чтения с экрана (синтезаторов речи), которые «читают» страницу вслух.
Flexbox и сетка
Для простых дизайнов может потребоваться только один или другой, но для самых сложных проектов выгодно использовать как сетку, так и flexbox, которые очень совместимы. Оба они помогают решить некоторые из самых основных проблем, которые преследовали дизайнеров и программистов в течение многих лет, поэтому важно понимать, как работает каждая система и как вы можете использовать их вместе. Кроме того, стоит отметить, что эффективное использование flexbox и сеток может значительно сократить использование медиа-запросов.
Flexbox - это мощная, но в основном одномерная система макетов CSS. Некоторые преимущества:
- Вертикальное центрирование блока содержимого внутри его родительского элемента.
- Заставить все дочерние элементы контейнера занимать равное количество доступной ширины / высоты, независимо от того, сколько ширины / высоты доступно.
- Придание всем столбцам в макете с несколькими столбцами одинаковой высоты, даже если они содержат разное количество контента.
- Отлично подходит для навигационных панелей и ситуаций, когда сетка чрезмерна.
Сетка - это мощная двухмерная система макета CSS. Некоторые преимущества:
- Обработка столбцов и строк, а также перечисленные выше преимущества flexbox.
- Быстрое создание сложных двухмерных дизайнов.
- Создание организованного и связного кросс-страничного дизайна.
Некоторые «подводные камни», когда дело доходит до написания эффективного CSS
Большинство ошибок относится к селекторам CSS.
- Браузеры сопоставляют селекторы от крайнего правого (ключевой селектор) до левого. Браузеры отфильтровывают элементы в DOM в соответствии с ключевым селектором и просматривают его родительские элементы, чтобы определить совпадения. Чем короче длина цепочки селектора, тем быстрее браузер может определить, соответствует ли этот элемент селектору. Следовательно, избегайте ключевых селекторов, которые являются тегами и универсальными селекторами. Они соответствуют большому количеству элементов, и браузерам придется приложить больше усилий, чтобы определить, совпадают ли родительские элементы.
- Методология BEM (Block Element Modifier) рекомендует, чтобы у всего был один класс, и, если вам нужна иерархия, которая также включается в имя класса, это, естественно, делает селектор эффективным и легко переопределяемым.
- Знайте, какие свойства CSS запускают перекомпоновку, перерисовку и композицию. По возможности избегайте написания стилей, изменяющих макет (триггер перекомпоновки).
Другими словами:
- Избегайте ключевых селекторов для большого количества элементов
- Селекторы классов и идентификаторов предпочтительнее селекторов тегов
- Избегайте избыточных селекторов
