0: Так я надеюсь, меня слышно?

1: Двигаемся дальше.

2: Дальше поговорим про переполнение. То есть есть такой эффект, как переполнение. То есть в случае, если у нас есть содержащий блок, меня же слышно, да?

3: Да, слышно. Угу. Если есть содержащий блок, вот зелёненький, зелёным у нас обозначен, да, то есть вот какая-то высота, ширина у него задана. Вот. И есть блок потомок, да, то есть, ну, или дочерний блок.

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

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

6: То есть переполнение все равно будет. То есть этим мы с вами не поможем никак. Вот. И здесь нам на помощь приходит такое свойство, как оверфлоу, это свойство, с помощью которого мы можем

7: Задавать поведение нашего.

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

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

10: Вот выпадения не будет. Ну а по умолчанию, естественно, у нас значение visible. То есть вот то, что мы с вами только что видели, то есть это у нас был как раз-таки слов визибл. Давайте рассмотрим на конкретном примере.

11: Вот как раз здесь у нас переполнение, сейчас я раскомментирую здесь.

12: Необходимый фрагмент. Вот в этом внутреннем блоке у меня есть заготовка. Так

13: Поехал.

14: Вот здесь.

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

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

17: К свойствам. Вот у нас здесь есть свойства. Ну, добавим здесь марджин ботом, чтобы у нас не наезжал на следующую, на следующую модель. Вот мы, собственно, видим переполнение на лицо. Видим, да, что

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

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

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

21: То, как видите, скролл у нас пропадает. Вот, ну, можно сделать скролл по умолчанию, да, то есть, чтобы у нас всегда был скролл, это мы в таком случае здесь просто запишем скролл, и вот он будет у нас в наличии всегда

22: Вот. Ну, я думаю, с переполнением все понятно, да, то есть как с ним бороться. Теперь вы знаете, идём дальше.

23: Также помимо, значит, просто ширины и высоты мы можем задать так называемую максимальную и минимальную ширину, то есть задаются они с помощью свойств, соответственно мин vs, e, maxx, ви. Да, соответственно, точно также и для высоты, то есть только вместо вид будет.

24: На faith, да, то есть высота

25: Что это означает? Ну, я думаю, понятно. Да, здесь по демонстрации видно, что

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

27: Наш дочерний блок уменьшаться не будет. То есть мы будем сжимать и как видите, вот допустим, если на картинке, видите, сжимается содержащий блок, то есть но синий блок дочерний сжимается только до каких-то пределов, то есть только до 300 пикселей. Дальше он уже

28: Не сжимается и, соответственно, при увеличении, да, то есть если задана максимальная ширина 380 пикселей, то есть до 380 пикселей, у нас ширина увеличивается, а дальше все. Вот и это удобно, потому что

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

30: Переполнением, да, то есть вот этими отступами, то есть вот от этих всех

31: Характеристик, да, у нас зависит расположение блока.

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

33: Так, так, значит следующее, что мы с вами рассмотрим, это как раз-таки позиционирование.

34: Так.

35: Так, у меня в примере что-то ещё оставалось, да, свойство display.

36: Ну, по сути дела, про него мы с вами говорили.

37: То есть мы с вами говорили про блочные строчные элементы, да и inline блочные элементы ну, собственно, здесь пример тоже приведён.

38: Мы с вами с помощью свойства display давайте обновлю, чтобы все сбросилось здесь с помощью свойства display. Можем управлять как раз-таки вот этим.

39: Вот этим вот дочерним блоком. До свидания дочерним блоком.

40: Как мы это можем сделать? Я его выделил.

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

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

43: Какой-то, хотя, наверное, логичнее было бы сначала онлайн блок, да?

44: Точнее инлайн элемент это просто строка, значит да, то есть и если мы начнём задавать ему какие-то характеристики, то есть, как видите, да, строчный элемент у нас воспринимает только горизонтальные марджины, да, как wd.

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

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

47: Тогда, то есть поведение уже меняется. То есть, смотрите, значит, у нас здесь появились уже как бы высота строк в тексте уже изменилась. Если мы задаём Маржин, то есть, то они задаются и сверху, и снизу, соответственно, и паддинги тоже, да, дальше, значит,

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

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

50: Вот так этот пример я закрою, и теперь мы с вами уже переходим конкретно к позиционированию.

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

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

53: Во многих интерфейсах они от этого позиционирования зависят, поэтому

54: Важно, важно понимать, что это такое.

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

56: Это все понятно и

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

58: Равно статик, да, то есть, грубо говоря, это по сути дела, все в нормальном потоке. Значит, 2 значение это relative, по сути дела, тоже все остаётся в нормальном потоке. Грубо говоря, элементы не смещаются. А вот когда мы говорим про значение абсолют и фикст, тогда

59: У нас уже, собственно, понятие нормального, то есть, грубо говоря, нормальный поток.

60: Прерывается, да, то есть точнее.

61: Элемент, которому присвоены эти значения, да, у нас исключается из нормального потока. Вот. И, соответственно, его поведение всего всей вёрстки у нас меняется. Давайте мы рассмотрим, как это у нас происходит. Так. Ну да, собственно, и

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

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

64: Отступ 50 и слева у нас задан отступ 40. Но в случае со статик у нас эти смещения не применяются. То есть, когда у нас значение стоит по умолчанию, то смещения не работают. А вот во всех остальных случаях, то есть, когда, допустим, у нас задано релатив у нас с вами

65: Как раз-таки эти отступы начинают работать. И вот здесь пример приведён, то есть пример со значением релатив. То есть когда мы с вами задаём

66: Для внутреннего блока есть position ли и какие-то отступы то нормальный поток не нарушается, то есть все выводится в соответствии с нормальным потоком, то есть текст как располагался, так и остаётся на своих местах да, а вот сам блок у нас смещается относительно его изначальной.

67: Расположение, то есть на 30 пикселей.

68: Вниз, да и на 70 пикселей вправо от левого края.

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

70: Также задаются вот но я значит если вы сделали какой-то блок абсолютным, то есть задали position absolute значение тогда у вас ваш элемент во первых, извлекается из нормального

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

72: Поверх всего этого и его смещение начинают, да, то есть начинают отсчитываться от

73: Размеров окна браузера, то есть от от окна браузера. То есть, если мы задали, допустим, там топ 50 и лет 40, да, то, соответственно, у нас будет от верхней части окна браузера 50 пикселей, и от левой части окна браузера 70 пикселей.

74: Если же у родительского элемента, то есть это в общем случае, да, у нас. Так, если же у родительского элемента задано значение absolute relative или фикст, тогда вот эти смещения у элемента со значением absolute.

75: Начинает вычисляться относительно родительского блока если же у родительского блока position не задано, то есть если там находится значение static, тогда уже относительно окна браузера вот такое вот отличие, согласитесь, ну все это уже довольно, в совокупности довольно.

76: Сложное поведение, то есть и во всем этом нужно хорошо разбираться, то есть нужно помнить, запомнить и использовать на практике.

77: Следующее значение это значение свойства позишн фикст, и работает оно следующим образом, если

78: Ну да, значит, аналогично тому, что было у нас со значением absolute, да, элемент тоже извлекается, то есть окружающие элементы его начинают игнорировать, да, и

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

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

81: Ну и вот, собственно, как раз-таки с помощью этого свойства положение этого блока и задаётся.

82: Следующая составляющая это плавающий элемент, то есть который создаётся с помощью флот с помощью свойства float.

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

84: Собственно, если мы зададим какому-то элементу или блоку значение,

85: Left, да? Ну хотя давайте, ладно. Значит, left, соответственно, у нас будет располагаться слева, то есть и все содержимое, да, все остальные элементы будут обтекать его по правой стороне. И, соответственно, если мы зададим значение для флота,

86: Тогда у нас все элементы будут обтекать с левой стороны. Вот.

87: Значит, обтекают у нас наши плавающие элементы.

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

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

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

91: Ну вот такое вот поведение. То есть у нас плавающие блоки тоже будут встречаться в лабораторных работах. 1 из заданий как раз-таки нужно будет выполнить с помощью плавающих элементов. Ну давайте мы с вами

92: Посмотрим конкретные примеры и сразу станет намного понятнее. Я думаю, чем теоретически так.

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

94: Так пусть она будет полная, да, и вот.

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

96: На браузер. То есть видите, вот сверху у нас здесь сколько? 60 пикселей и справа, да?

97: Ой, сверху 30 и слева 70. То есть мы можем менять, естественно, эти значения.

98: Смещать, куда нам нужно. Видите, все работает. Если же мы зададим этому блоку, точнее, да, этому блоку. А, да, прошу прощения, перейдём к родительскому блоку и зададим этому

99: Блоку. Давайте прям так вручную позишн.

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

101: Дальше.

102: Следующее значение, которое мы с вами рассмотрим, это значение.

103: Relative, давайте мы создадим здесь релатив.

104: Вот и теперь.

105: Теперь, как видите, вот относительно изначальной позиции, да, у нас осуществлён сдвиг на 70 от левой стороны и на 30 от верхней части. Но текст вокруг помнит, да, про то, что в этом месте у нас располагается элемент, то есть и ничего не

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

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

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

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

110: Вот у нас есть, собственно, элемент внутри контейнера, да, вот лефт.

111: Ага, да, 2 тоже у нас внутри контейнера элемент райт. И как они себя ведут? Мы с вами говорили, да, что если мы задаём значение left, вот можно убедиться, вот у нас left, значит, вот свойства и значение.

112: У нас равно лефт. Если мы отключаем, то это просто block. Если мы задаём значение left to, грубо говоря, он у нас прижимается к левому краю, и все, все остальные элементы начинают втекать его с правой стороны тоже самое можем.

113: Увидеть и для

114: Правого, правого плавающего блока, то есть убираем он у нас вообще скрывается, да, открываем. Он у нас появляется для того, чтобы было видно, что он находится все-таки в 1 блоке внутри 1 блока можно ширину немножечко добавить. Давайте мы с вами для

115: Изменим ширину, пусть это будет.

116: 40%.

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

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

119: Следующая. Следующий пример. Да. И обратите внимание, что вот этот нижний блок, да, сам вот этот нижний контейнер.

120: Блок, он эти самые, этот самый элемент игнорирует.

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

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

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

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

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

126: Но этим, кстати, можно тоже управлять. То есть мы с вами чуть ниже посмотрим, как это делается. Так, да, давайте изменим размер. Ага, сейчас я ещё увеличу размер вот этого блока, пусть это будет 100%.

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

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

129: Управлять, да, расположением данных блоков, как видите, то есть при увеличении, да, то есть у нас, как только, грубо говоря, блок начинает входить, он у нас перестраивается в другую строку. Вот, и тем самым мы видим такое вот, скажем, такое уже гибкое гибкое поведение.

130: Вот, ну, а при, то есть, когда у нас размеров родительского блока недостаточно, то, соответственно, они смещаются вниз. Вот, ну здесь у нас, скажем так, поведение не совсем предсказуемое. То есть почему? Потому что если мы начнём задавать

131: Размеры конкретным вот этим элементам, да, например, я чуть чуть изменю высоту здесь сделаю её 99, да, поменьше.

132: Чат не среагировала.

133: Давайте здесь тоже уменьшим.

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

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

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

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

138: По высоте под содержимое, да, то есть, как только мы включаем, он перестаёт на них реагировать, то есть даже несмотря на то, что он является для них содержащим

139: Ну и свойство clear. То есть с помощью этого свойства мы с вами можем управлять тем, как себя будут вести обычные блоки относительно плавающих, да, то есть, как я уже говорил, то есть можно управлять их отношениями друг с другом, да?

140: Вот, допустим, здесь я, да, вот для 2

141: Для 2 вот этого контейнера мы с вами можем задавать разные свойства. Допустим, если мы зададим с вами клер лефт

142: Лет, то у нас, грубо говоря, вот этот самый container начнёт реагировать на плавающие блоки, которые располагаются слева. Если мы зададим с вами значение right, то соответственно у нас с вами будет

143: Относительно.

144: Правых плавающих блоков.

145: Такая вот особенность. Так что у нас ещё осталось так, позиционирование. Угу. Значит, дальше. Ну и ещё 1 крайне важная составляющая. То есть тоже, которую часто говоришь, но почему-то не восприни.

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

147: Колонка, да, какой-то там заголовочная часть. Вот. И очень легко это можно сделать с помощью как раз-таки плавающих блоков. Давайте рассмотрим, как это делается.

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

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

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

151: Вытащить отсюда.

152: Так я хочу его вытащить наружу, под него.

153: Пусть будет так.

154: Так, контейнер 5. Ага, не там, не, там, я все-таки это сделал ещё раз. Я хочу вытащить, извлечь отсюда.

155: Так и ставить ниже.

156: Вот так.

157: Угу. Ну ладно. Итак, значит, смотрите, типичное поведение, то есть то, что вот эти блоки, они у нас не реагируют на наши плавающие блоки, но с помощью свойства overflow мы можем заставить, вот, допустим,

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

159: Да, для того, чтобы было лучше видно, я сейчас изменю здесь значение на значение отступ, да, добавлю отступы.

160: Маджин, допустим, райт, да, маджин райт.

161: И дам ему значение, например.

162: Ну, 15 пикселей.

163: Хорошо, просто margin.

164: Вот как видите, то есть теперь у нас будет очевидно, что данный блок избегает наш плавающий блок. Тоже самое могу сделать для правого блока. Значит, я сюда, Маржин.

165: Margin, то есть, ну и тоже пусть будет 15 пикселей. Ну и вот, то есть, по сути дела, готовый трехколоночный макет теперь при изменении размеров браузера, да, то есть окна браузера, то есть у нас все перестраивается так, как нам нужно. То есть, как бы мы не делали, то есть все

166: Работает довольно чётко.

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

168: Блоков, да, то есть внутри отдельного контекста какого-то плавающие, это внутри другого, по сути дела, плавающие блоки современные вёрстки практически не используют, но знать об этом нужно, потому что, допустим, если вы в дальнейшем планируете трудоустро,

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

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

171: Да, собственно, что такое блочный контекст форматирования? То есть мы с вами уже поговорили про то, что значит, ну, понятно, что обычный блок, да, который располагается на всю ширину страницы, они, как правило, он имеет блочный контекст форматирования, то ест

172: Внутри него все происходит как в обычном блоке, то есть ничего не меняется.

173: Блочный контекст форматирования, то есть он у нас встречается, то есть в обычном блоке, в инлайн блоке, то есть внутри, внутри инлайн блока, у нас тоже поведение как в обычном блоке. И собственно, флоуд элемент, который мы с вами только что рассмотрели внутри этого флоуд элемента у нас тож

174: Поведение как в обычном блоке. Поэтому вот именно контекст форматирования, блочный контекст форматирования то есть он у нас в таких 3 случаях встречается

175: Ну и ещё 1 свойство, про которое хотелось бы сказать ну просто скажем да, то есть не будем уже конкретных примеров приводить это свойство box sizing значит, смотрите, это свойство влияет на то, как мы будем.

176: Задавать ширину и высоту. Если мы используем это значение по умолчанию, да, то есть контент бокс, тогда ширина и высота задаётся именно для содержимого, то есть, грубо говоря,

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

178: Ширину элемента, то есть в 1 случае мы задаём только для содержимого. А во 2 случае мы ширину задаём, получается, в которую такую ширину, в которую входят и паддинги, и бордеры. Марджины не входят, да, соответственно, поняли разницу, да, то есть получается, что когда мы

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

180: Блока входят уже и паддинг борды. Ну, думаю, разница понятна, да.

181: Вот, ну что ж, на этом все. То есть так вот, возможно, где-то сумбурно, то есть мы с вами разобрали, что такое блочные элементы, да, то есть

182: Блочная модель, как с ней работать и прочее.

183: Вопросы какие-то вопросы есть на этом, получается, на сегодня все, да, в принципе, да, на сегодня все на этом. Угу.

184: Понял, спасибо. Вот. Ну, я, возможно, сделаю ещё отдельную запись. Выжимку, да, чтобы такую быструю, более быструю. Ну, если хватит время, как бы, не уверен, что хватит. Вот, и чтоб было возможно проще воспринимать.

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

186: Если что, запись будет, да. Запись, конечно. Да. Запись. Угу. Спасибо. Вот, да. То есть можно будет при необходимости посмотреть ещё какие вопросы.

187: Да нет, значит, то, что в курсе, выкладывается. Смотрим обязательно, да, то, что там тоже очень много важных моментов я сейчас выложил. То есть как раз-таки блочные строчные элементы, там, особенности, да, там, грубо говоря.

188: Каскадность, наследование и прочее. То есть там это все точно тоже разобрано с примерами, то есть записано достаточно коротко, поэтому смотреть это можно, ну, быстро. То есть там смонтированы все задержки исключены, поэтому, думаю, вполне смотри.

189: Да, вот, ну и выполняем задания. Вопросов по заданиям нет.

190: Нет, пока все делается. Угу. Хорошо. У остальных тоже, да?