Как понять float CSS с помощью двух простых рецептов макетов суши

1656531370 kak ponyat float css s pomoshhyu dvuh prostyh reczeptov maketov

Анабелла Спинелли

1*OyZdQ37Bw7O86Br_2gZgXA
Фото Кэти Смит на Unsplash

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

Я тоже подумал: Я не могу быть единственным, кто сражается с этими свойствами в N-й (или первый) раз. Документирование моего путешествия к наиболее неосязаемым свойствам CSS могло бы создать большую кучу статей, которые другие могли бы использовать.

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

The float свойства в виде кулинарных рецептов.

Индекс рецептов

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

Сушие ряды?

Мы используем плавающие и процентные значения для равномерного распределения элементов по всей (контейнерной) ширине. Как строчки суши в тарелке.

Ингредиенты:

  • 1 контейнер или доска
  • Некоторые кусочки суши нужно распределить бок о бок.
  • The % знак
  • 1 float: left;

Инструкции:

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

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

Поместите их внутрь a блокировать контейнер как доска. В простейшей форме это должно быть div (но вы можете использовать любые другие семантические элементы HTML5, такие как заголовок, нижний колонтитул, раздел, статья, основной). Разместите для них описательный класс. Я буду использовать nigiri.

Теперь, на уроке nigiri мы применим некоторые стили, в частности наш float: left;. Найдите минутку и прочтите их:

Что float: left;делает – это предписывать каждому элементу держаться с одной стороны – в данном случае слева – и стоять друг у друга в ряду слева направо.

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

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

Нам следует распределить их равномерно.

1*PTeK-2AbKxznolPfgWC6JQ

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

Теперь это сложная часть: %, который необходимо установить, будет зависеть от 3 вещей

  • сколько у вас есть предметов
  • как они структурированы внутри (заполнение)
  • и сколько вы хотите пространства между ними.

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

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

1*vEajpTwwxymHQr89D8ez1Q
Каждый нигири составляет 33,33 % от полной ширины доски: 2 % для поля с каждой стороны, 2 % для заполнения с каждой стороны и затем 29,33 % их фактической ширины.

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

Возможно, вы заметили здесь закономерность: мы предполагаем, что элементы имеют 1% от прокладка. Они должны компенсировать это, вычитая 2% (1% для каждой стороны) из процентной ширины элемента. То же касается нашего 1% моржа дыхатель. Теперь имеет больше смысл не использовать 33,33% ширины для 3 элементов подряд. Вместо этого установите 29,33%, оставив 2% отступа и 2% для маржа на каждом.

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

Если вы хотите поиграть с этой настройкой, вот специально созданный для этого CodePen.

А если вам нравятся CSS-суши, не упустите очень вдохновляющую доску CSS Sushi Board от Sasha Tran.

Очистка бульона?

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

Ингредиенты:

  • Один контейнер или доска с плавающими суши
  • Суп или бульон после него.
  • один clear: broth;

Инструкции:

Когда у вас будет готов ряд плавающих кусочков суши, разместите контейнер для супа под ними в HTML.

Наши суши призваны изящно плавать над потоком документов и не влиять на другие элементы. Если мы не будем аккуратны, они могут просто плавать в супе, а суши-рамен – это не то, к чему мир готов.

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

Чтобы предотвратить это зверство, мы должны добавить свои clear: broth;…Я имею в виду both;!

Здесь у нас есть два варианта:

Мы можем просто положить суп в миску или контейнер и придать миске стиль clear: both;. Это как бы завершит работу, но это приведет к подобным вещам margin-top вообще не работает на чаше.

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

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

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

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

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

Ваш адрес email не будет опубликован.