Step 6 (S-44733)

Step on Stepik: https://stepik.org/lesson/14821/step/6

[00:00 - 00:15] следующая важная проблема с которой сталкиваются начинающие мастера а это необходимость подогнать элемента к друг другу очень часто элемент чуть чуть выбивается с необходимого положения

[00:15 - 00:30] а за этим скорее всего стоит неправильное использование отступов либо знания про бокс мод давайте посмотрим какие отступы есть элемента

[00:30 - 00:45] и что такое box model а на данном слайде представлен представлена схема элементов внутри находится содержимое а потом идет этот так называемый

[00:45 - 01:01] внутренний отступ то есть отступ внутрь элемента потом идет а собственно границы элемента а у большинства элементов она нулевая то есть это полоска нулевой ширины а потом идет marathon majors это о снаружи

[01:01 - 01:20] а собственно все а все 3 этих величины поедем к бордера major нужно сдавать а сходным образом а синтаксис указанных здесь права которых можно создавать

[01:20 - 01:36] а эту величину сразу во все стороны например managing 10 пикселей это означает что и вверх вверх и вправо и вниз и влево везде осту будет по 10 пикселей

[01:36 - 01:52] это 1 способ задания а 2 способ задания когда с 22 числа 10 и 5 в этом случае 1 число это верх верхней и нижней 2 число это правый

[01:52 - 02:10] и левой это когда указывается 2 числа либо может указываться 4 числа то есть мы сдаем важен и 4 некоторых числа а в этом случае начиная с верхнего верхняя

[02:10 - 02:26] правый нижний левый отступы можно сдавать независимо кроме того помимо а стиле margin есть отдельные стили margin left margin right ну и так далее мы желток воду

[02:26 - 02:42] а тоже самое все друзья все а таки способом таким способом задание используется и для рамки для бордера и для а

[02:42 - 02:57] обычно обычному элементов по умолчанию сдается какой то мажор то есть чтобы блоки на странице не скреплялись друг с другом для них сдаться например mention потом то есть после каждого заголовка идет margin bottom и текст под ним

[02:57 - 03:16] теперь самое интересное о что считается шириной и высотой элемент а по умолчанию под высотой шириной а понимается высота и ширина содержимого то есть вот

[03:16 - 03:34] от этой белой полоске это очень удобно потому что а часто нужно а за создать какой то элемент задать отступы от внутреннего отступа они бывают важно чтобы текст не прилипал

[03:34 - 03:53] краю элемента ну то есть для нормального текст должен отступать от края элемент остаются в отступы а и по макету то есть по внешнему виду страница ширина элемента должна быть 200 пить а и приходится из 3 допустим 200 пикселей вычитать

[03:53 - 04:10] размер поединка чтобы посчитать настоящую ширину содержимого потому что авто сс под шириной понимается именно с ширина содержимого а очень часто бывает удобно под шириной понимать а содержимое + поедем к + бортом

[04:10 - 04:26] для этого используется специальный стиль а box sizing а стиль букв sizing позволяет поменять а то как считается ширина по умолчанию book сайдинг

[04:26 - 04:42] имеет значения content box и соответствует ширине содержимого а можно задать box sizing к равный border box и тогда под шириной то есть в постели постель мыть будет подниматься ширина содержимого

[04:42 - 04:57] вместе с правительством и границ а такой подход намного более удобен а при составлении интерфейс а поэтому если вам не флуд у вас не получается а подогнать

[04:57 - 05:13] размер гдето элемент выходят на 1 2 пикселя за необходимы размеры посмотрите возможно удобнее будет изменить border box и а рассчитывать ширину элемента исходя из а

[05:13 - 05:32] внешние границы они содержимого а вот собсна говоря вот эта структура все вместе с содержимым + полезен при сборке мы женаты называется box model а в браузерах обычно есть если у вас троица

[05:32 - 05:48] порту с либо firefox это скрывается кнопка 12 а на каждого элемента можно навести на него мышкой и посмотреть как выглядит его box model то есть а какой то данного элемента

[05:48 - 05:57] а ширина какие у него это очень помогает при разработке сайта