Поток документа | Flexbox | Float | inline-block в CSS / @VladimirShaitan

2 года назад

1,763 Просмотров

Привет, в этом уроке мы разберемся в том что такое нормальный поток документа, научимся его изменять с помощью CSS свойств, разберемся с тем как работать с inline-block, float и flexbox свойствами. Приятного просмотра, не забудь поставить лайк, оформить подписку и оставить комментарий.

Таймкоды:
00:00 Базовый поток документа
02:10 inline-block - управление потоком документа
08:06 float - управление потоком документа
19:35 flexbox - управление потоком документа

Мои соц. сети:
Telegram - https://t.me/VS_FRONTEND
LinkedIn - https://www.linkedin.com/in/vladimir-shaitan/
Twitter - https://twitter.com/VovaShaitan
Facebook - https://www.facebook.com/vladimir.shaitan
Instagram - https://www.instagram.com/vlad.sha/

#CSS #HTML #web #ShaitanVladimir #frontend #верстка

--------- Транскрипт урока ---------

Поток документа - определяет то каким способом элементы будут располагаться на странице.
Normal flow - базовый поток описывает то как элементы располагаются на странице, когда к ним не применили ни одного CSS свойства.
Для того чтобы чтобы управлять потоком нашего документа с помощью CSS нам в первую очередь нужно выстроить правильный базовый поток документа в нашем HTML.
inline и inline-block

Задача:
Необходимо выставить элементы .item друг возле друга по 2 в ряд.

Решение:
Для начала выставим ширину элемента 50% и добавим inline-block чтобы они могли выстраиваться друг возле друга.

Ширина наших элементов изменилась, но сами элементы не выстроились друг возле друга. Это происходит из-за того что браузер интерпретирует элементы .item как строчно-блочные, а значит учитывает пробельные символы которые мы ставим внутри
нашего HTML документа и также отображает их на странице.
Для того чтобы решить это проблему нам необходимо убрать эти пробельные символы которые находятся между нашими блоками .item . Для этого нам достаточно найти родителя блоков .item, а это блок .wrapper и выставить ему font-size: 0

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

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

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

float
Задача:
Необходимо выставить элементы .item друг возле друга по 4 в ряд.

Решение:
Для начала выставим ширину элемента 50% и добавим float: left чтобы элементы .item могли обтекать друг друга с левой стороны.

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

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

Теперь все отображается правильно, вся суть в том что мы создаем еще один, полностью пустой, элемент и отменяем для него float , с помощью свойства clear: both. После чего этот, пустой, элемент располагается в самом конце нашего блока .wrapper и тем самым растягивает его высоту, и делает ее правильной. Такое использование будет не слишком удобным, если у нам будет много элементов позиционированных через float, в таком случае на проще сделать отдельный класс который будет добавлять такие стили нужным для нас элементам. Обычно такой класс называется .clearfix.

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

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

Тэги: