0: Итак, уважаемые студенты, добрый день.

1: Здравствуйте. Здравствуйте. Так, меня слышно? Да, да, замечательно. Угу. Что-то сегодня совсем мало.

2: Так.

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

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

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

6: Так, давайте начнём.

7: Угу.

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

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

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

11: Правильно будет. Так, а у меня тут вообще наследование началось. Ну да, пару слов про наследование. То есть мы с вами

12: Хотя, наверное, правильнее будет сказать сначала про

13: Блочную, блочные элементы и строчные, вот собственно блочные элементы, да, что они собой представляют? Блочные элементы, это элементы, которые, ну, во первых, располагаются по вертикали.

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

15: Элемент вот. Затем, значит, что касается высоты, то она вычисляется автоматически, исходя из содержимого, либо её можно задать.

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

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

18: Ну и в противовес собственно блочным элементам, да, существуют ещё и строчные элементы, они, в отличие от блочных элементов, имеют минимальную ширину. Вот элементы, идущие друг за

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

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

21: Свойствам уиз и heights не подчиняются. Кроме того ну тут, как я уже сказал, да, свойствам высота, ширина, они не подчиняются, они также не реагируют на вертикальные отступы. Да, марджин то есть

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

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

24: Блочные строчные элементы. Ну ещё есть, скажем так, так называемые инлайн блочные элементы, да, это элементы, которые имеют свойства и блоков, и строк одновременно. То есть они, соответственно, задают им можно задать и ширину, и высоту.

25: Можно задать вертикальные марджины, вот. И по сути дела, внутри этот элемент ведёт себя как блок снаружи. То есть это, грубо говоря,

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

27: Вот наследование, значит, да, наследование это, собственно, механизм, который позволяет задать какому-то 1, допустим, родительскому блоку, да, пусть это будет какой-то diff, например, дифф, обычный блок, да, прямоугольник.

28: По сути дела, вот если вы в нём задаёте какие-то свойства, например,

29: Ну что это может быть? Фон, да, фон сайз, например, расположение текста, цвет. Вот, и, например, border, да, с бэкграундом, то, соответственно, во внутреннем, то есть внутри этого Тега.

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

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

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

33: Отдельный урок, да, то есть, соответственно, вы можете посмотреть там прямо на конкретных примерах. Это все рассмотрим. Если вы сходу этого не восприняли. Вот дальше, значит, каскадность, да, то есть, по сути дела, это приоритеты применения стилей.

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

35: И если вы задаёте несколько раз, то применяется то, что было указано в последний раз. Да, то есть последний по очереди, естественно, если вы используете один и тот же селектор. А вот если вы используете разные селекторы про селекторы вы уже, думаю, знаете, да, то есть про это уже не boo'd.

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

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

38: Единицы. Если же вы используете класс, то есть селектор по классу, то, соответственно, у такого

39: Селектора. Специфичность равна 10. Если вы используете id, то у такого селектора специфичность равна 100, ну и если вы используете инлайн стили, то есть стили, которые непосредственно в

40: Атрибут Тега атрибут style да, какого-то Тега записывается такой селектор имеет наивысшую специфичность и имеет

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

42: Модель. Что же она собой представляет? Блочная модель? По сути дела, это блок. Вот каждый блок имеет область содержимого.

43: Имеет рамку, имеет внутренний отступ, то есть, который располагается от содержимого до рамки, да, вот эта самая часть и, соответственно, внешний отступ margin. То есть это тот отступ, который у нас располагается.

44: За пределами, то есть за рамкой уже, да, вот.

45: Каждый блок имеет соответ данные свойства. Вот соответственно,

46: Положение блока зависит от того, собственно, какой у него размер. Да.

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

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

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

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

51: Концепции, да, отдельные правила, по которым, то есть мы задаём расположение блоков, то есть и освоив

52: Эти правила, да, вы сможете уже без проблем располагать нужные вам блоки на

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

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

55: Вёрстки интерфейсов приложений.

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

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

58: Содержащий блок, допустим, вот мы рассматриваем какой-то конкретный блок отдельный, да, вот, который здесь показан на картинке, видим его характеристики, то есть у нас, допустим, вот размер 830 на 100 пикселей, да, по высоте дальше, значит, имеются

59: Внутренний отступ 10 отсутствует рамка, поскольку здесь ничего не указано и margin равен 20, да, вот, собственно, содержащий блок у нас будет, соответственно, подстраиваться. Если мы для содержащего блока ничего отдельно не задаём, то он будет подстраиваться как раз-таки вот под эти размеры.

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

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

62: Вот, собственно, а вот сисс, да, для данных блоков.

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

64: Мы тоже рассмотрим, но, тем не менее, вот мы можем задавать, либо просто задать margin, да, какой-то, вот как здесь у нас в примере показано, 50 пикселей, и тогда отступы со всех сторон, по сути дела, да, то есть слева, сверху, снизу, ну, слева, справа.

65: Сверху, да, у нас будет 50 пикселей. Также мы можем задавать эти отступы отдельно, да, то есть для каждой стороны, то есть есть так называемые постфиксы, да, после свойства margin, и, соответственно, можно задать для каждой стороны отдельный размер. То есть задавать мы их можем

66: Как?

67: В пикселях, так и в процентах. Вот, ну и обратите внимание на контейнер. То есть мы контейнер здесь ширину ему задали с помощью процентов, да, то есть 70% от его содержащего блока и то есть высота 50% от содержащего блока. Если наш

68: Container находится где-то в боде, то соответственно, для него содержащим блоком, да, либо родительским блоком будет являться как раз-таки тот самый тег body. Ну тег body, элемент, body, да, то есть, по сути дела, тоже контейнер. Вот, но тег body это

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

70: От родительского блока. Ну и, соответственно, высота тоже самое.

71: Если же мы будем задавать, ну, это у меня как раз там ниже пример есть по поводу, да, вот, собственно, для маржинов и паддингов, да, существует краткая запись. Вот, то есть, ну, то, что мы v

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

73: То 1 будет относиться к вертикали, 2 будет относиться к левому и правому отступу, a3 к нижнему. Ну и, соответственно, если мы задаём 4, то это у нас как раз-таки по порядку. То есть верхний правый, нижний и левый отступ. То есть так,

74: Тоже можно делать, то есть, чтобы не писать эти постфиксы, да, и писать их, сделать запись покороче.

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

76: Если нам нужно, скажем так, получить какой-то отзывчивый дизайн, то есть при изменении размеров окна у нас должна меняться ширина и высота тогда мы можем прибежать то есть как раз-таки использовать проценты вот, и

77: Как же у нас происходит вычисление, да, то есть вычисление этих значений.

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

79: 50% от ширины родителей. Все понятно.

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

81: Процентов.

82: Эти 15% вычисляются от ширины родительского блока. То есть если наш блок, допустим, имеет, то есть тут ширину, допустим, 1000 пикселей, то здесь у нас будет 150 пикселей, да, причём и вертикальный, и

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

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

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

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

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

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

89: Да, задать для нашего родительского компонента. Так, это ладно. Ну и давайте сейчас посмотрим на конкретный пример. То есть у меня есть заготовка

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

91: Так.

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

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

94: То есть на это свойство, да, мы видим, как оно у нас выделилось цветом, да, то есть вот таким оранжевым контуром дальше, значит, если мы зададим внутренний отступ, то мы тоже его сразу видим, то ест

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

96: И эти отступы применяются как по вертикали, вот эти, да, так и по горизонтали.

97: Дальше, что касается пендингов, то есть внутренних отступов тоже самое, да, то есть тоже 5% от ширины окна браузера. Значит, ширина. То есть мы с вами задаём ширину в процентах. Вот, значит, от этого родительского блока жёлтенького, да, то есть

98: Числяется 80% и, соответственно, это и будет шириной для нашего внутреннего блока. Тоже самое касается и высоты. То есть обратите внимание, то есть вот у нас есть родительский блок, да, то есть у него задана высота. Если же мы родительскому блоку высоту не зададим,

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

100: Как бы, и мы не можем задать в процентах высоту, правильно? Да, то есть, потому что у нас высота неизвестна. Вот. Но если же мы задаём 300 пикселей, допустим, то для внутреннего это будет 80% от 300 пикселей соответствен.

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

102: Margin, то есть по вертикали мы задаём какое-то конкретное значение, а по горизонтали мы задаём значение авто, и тогда наш элемент выстраивается по центру. То есть, грубо говоря, то есть большая проблема Новичков при вёрстке, да, то есть это

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

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

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

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

107: Ну, собственно, здесь тоже есть офисы, то есть можно задавать для конкретных сторон, да, рамки, причём можно задавать их разные. Можно задавать толщину, рамки, тип рамки, да, вот как раз то, что мы с вами так нет, то, что мы с вами рассмотрели, это style.

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

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

110: Идём дальше.

111: Каким образом вычисляются размеры вложенных блоков?

112: Ну, размер вложенных блоков.

113: Так, здесь, наверное, у нас больше не вложенный блок, а внешний блок, да, то есть вот у нас, собственно, есть какой-то вложенный блок с контекстом, да, то есть вот здесь написано блок пото,

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

115: Внутренний блок, это понятно. Вот если, значит, ну, здесь другой вариант, то есть тоже тот же самый, по сути дела, аштмл, да, то есть, но здесь мы задали ширину, а высоту 30% от родительского элемента, да, а здесь у нас получается 40% от

116: Контейнера, соответственно, да, уже. Вот. И мы видим с вами, как у нас меняется

117: Положение блока. Дальше как вычисляются отступы, да, то есть в случае, если у нас

118: Задано.

119: Для родительского элемента, допустим, высота, ширина

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

121: Какой-то маржи, да, слева например тогда ширина вот этого внутреннего блока будет равна как раз-таки разнице между четырехстами, да, и - 150. То есть ширина станет 250. Вот, и аналогично так, на следующем слайде, то есть если мы с вами зададим

122: Дочернему блоку, да, внутреннему блоку какую-то ширину, то у нас с вами появится так называемый отступ, да, то есть такой неявно заданный, то есть и он будет равен у нас как раз-таки 400, да, - 150. То есть вот этот самы

123: Отступ автоматически появится.

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

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

126: Ну и если мы хотим разместить по центру, да, то мы можем задать вот таким вот образом, то есть margin, left и margin, right, значение авто. То есть у нас, грубо говоря, вот этот самый остаток, да, он разделится пополам, то есть между 2 этими сторонами получится по 100 пикселей.

127: Вот так сейчас у нас будет.

128: Закончится наш зум, да.