Please enable JavaScript.
Coggle requires JavaScript to display documents.
Блочная модель 5 - Coggle Diagram
Блочная модель 5
Свойство outline для выделения маленькой обводочки, что бы лучше ориентироваться в блоках или ставишь БГ
По умолчанию у блока высота контента 0, если не задали контент, блок схлопывается, для любого элемента где стоит текст, высота не задается, высота должна быть по контенту (для оформительного да) но не для блока с текстом
На строчных элементах не работает высота и вертикальные падинги/маржины, а на блочных вертикальные
-
Между 2 блоками выберется тот маржин который больше, 2 маржина нет смысла задавать
-
-
В линк сначала подключаем шрифты, потом нормализация (если юзать нормалайз, можно не задавать в бокс-сайзинг бордер бокс), потом цсс файл
Не важно задавать верхний или нижний маржин лишь бы было что то одно, обнулять маржини нужно только в тех элементах которые мне нужны
Свойства
Нужно устанавливать глобальный box-sizing: border-box, что бы учитывать все финальные размеры блока (падинги, бордеры) и не задавать каждому по отдельности, в нормалайзе уже установлен глобальный бокс сайзинг
-
-
-
Для вертикального выравнивания vertical-align работает на строчные и строчно-блочные элементы (на блоки не работает).
Блочные элементы по умолчанию (дисплей блок), их высота определяется содержимым, им можно задавать любые свойства геометрии
Строчные элементы
Им можно задавать только горизонтальную геометрию: левые и правые поля, отступы и рамки. То есть они игнорируют значения верхних и нижних margin, padding и border.
Псевдоклассы
Псевдоклассы :first-child и :last-child
Позволяют выбрать первый или последний элемент в коллекции соседей. Например, если каждому элементу списка задать нижний отступ, то он будет и у последнего. Крайнюю геометрию необходимо обязательно чистить, потому что такие оступы могут неочевидно выпадать или расширять родителя.
-
Нужно знать first/last-child, nth-child, nth-last-child
-
Практически вся высота должна быть по контенту(не для блоков с текстом), кроме декоративных элементов (только им можно задавать высоту)
-
BGC не заезжает на маржин, только бордер, падинг, контент
В контейнер обарачивается все что должно быть центрировано, див используется для стилей (не семантично)
margin создание пустого пространства между соседними элементами, если отступ между соседями - маржин, если отспум дочернего эл. используем падинг для родителя (в сексциях падинги)
-
-