Голые кости: освоение основ позиционирования CSS

Голые кости: освоение основ позиционирования CSS

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

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

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

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

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

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

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

Плыть по течению

Вопрос: Как выглядела ваша страница в последний раз, когда вы забыли связать файлы HTML и CSS?

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

Что ж, то, что вы видели, называется «нормальным потоком». Это для веб-страницы то же самое, что гравитация для нашей жизни на Земле: слабая сила, которую очень легко преодолеть, сила настолько универсальная, что вы бы простительно забыли, что она даже там, но при отсутствии какого-либо вмешательства это часто бывает доминирующий фактор в объяснении, почему вещи движутся или почему они не двигаются.

Какой длины кусок… элемента?

Элемент является - в очень широком смысле - настолько большим, насколько он должен быть.

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

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

Блок против встроенного: новые дети в блоке

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

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

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

Это объясняет, почему вы в первый раз написали ‹h1› Hello World! ‹/h1› и захотели оживить его аквамариновый фон, этот аквамариновый фон растянулся по всему телу веб-страницы слева направо.

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

‹H1›, как и ‹p› и ‹div›, по умолчанию является блочным элементом, поэтому, несмотря на то, что он содержит два слова, он занимает всю ширину контейнера, и все последующие дочерние элементы, следовательно, будут вынуждены сидеть под ним. Однако не забывайте, что даже жадные блочные элементы переносятся по высоте своего содержимого, если не указано иное.

Другие элементы, такие как ‹span›, по умолчанию являются встроенными элементами, уменьшающимися до высоты и ширины своего содержимого. Фактически, встроенные элементы настолько «эластичны», что их размер невозможно даже изменить с помощью явных свойств высоты и ширины!

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

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

Однако, хотя ‹span› по умолчанию является встроенным, а ‹h1›, ‹p› и ‹div› заблокированы по умолчанию, для любого элемента может быть определено отображаемое значение, чтобы изменить его поведение.

Думайте внутри коробки

Я скажу один раз: Каждый элемент - это коробка.

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

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

content-box - это сердце элемента. Когда мы говорим об элементах, которые «обертывают» их контент, это основная область контента, о которой мы говорим. Если бы не отступы, эта область содержимого (обычно) была бы всей областью блока. Вы говорите, что это за набивка? Рад, что вы спросили.

Padding очень прост. Он отвечает на вопрос: «Насколько близко этот элемент должен соответствовать своему содержанию?». Элемент хочет занимать как можно меньше места и максимально приближать его к своему содержимому. Поэтому, когда заполнение равно 0, ничто не может помешать элементу обернуть его вплоть до его содержимого, и это именно то, что он будет делать.

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

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

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

Маржа: ничья-земля

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

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

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

Должность, должность, должность

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

Свойство position имеет пять возможных значений, одно из которых мы уже знаем: static.

Статический - это значение по умолчанию для свойства позиции. Это означает «просто следуйте нормальному потоку». Статически расположенные элементы - самые послушные из всех.

Следующее значение - относительное. Относительно расположенные элементы также очень послушны, но их можно убедить нарушить правила, используя свойства смещения, такие как top, right, bottom и left.

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

Первое из поистине вредных значений позиции - абсолютное.

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

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

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

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

Последний вариант свойства position - это молодой человек в группе. Прибыв на сцену только с CSS3, липкое позиционирование сочетает в себе поведение относительного и фиксированного позиционирования. Он будет оставаться в своем относительно позиционированном месте до тех пор, пока прокрутка пользователя не переместит его за пределы «разрешенного» смещения (например, top: 0px), в каких точках он «прилипнет» к области просмотра, чтобы подчиняться этому правилу смещения.

До сих пор наши варианты позиционирования были либо «в потоке» с полями и заполнением, либо «вне потока» с нестатическим позиционированием и смещениями.

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

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

Начнем с сетки.

Сетка и квадрат

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

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

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

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

Flexbox

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

Контейнеры Flexbox имеют главную ось и поперечную ось. Например, в горизонтальной панели навигации основная ось будет располагаться слева направо, а поперечная ось - сверху вниз.

Элементы Flex автоматически занимают все доступное для них пространство по перекрестной оси. Распределением пространства на главной оси можно довольно точно управлять с помощью таких свойств, как flex-base и flex-grow, которые указывают гибкому элементу, насколько они должны расширяться, чтобы заполнить пустое пространство. Или пространство можно оставить пустым и распределить по промежуткам между элементами, используя свойство justify-content. При использовании flexbox размер элемента менее важен, чем его размер по отношению к пространству, в котором он находится, и к другим элементам, с которыми он разделяет пространство.

Flexbox великолепен. В сочетании с медиа-запросами, адаптивными единицами измерения и свойством flex-wrap макет flexbox может дать панелям навигации и другим контейнерам возможность беспрепятственно адаптироваться, когда они растягиваются или сжимаются. Тем не менее, они действительно проявляют себя в контексте одномерного макета, между крупномасштабным структурированием, в котором преуспевают сетки, и «последними штрихами», которые обеспечивают заполнение и поля.

Заключение

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

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

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

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

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

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

Дальнейшее чтение

Это CSS-трюки с графическим объяснением правил flexbox заслуживает своего рода награды за графические объяснения правил flexbox. Это очень хорошо.

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

Эти бесплатные уроки Odin Project - отличный ресурс для получения более подробной информации о сетках, flexbox и float.

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

И, наконец, что не менее важно, некоторые независимые проектные работы над сертификатом адаптивного веб-дизайна freeCodeCamp - отличный способ заставить все это позиционирование работать.

Удачного позиционирования!