background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Скачать "Урок № 13. Поля, отступы, границы"

input logo icon
Обложка аудиозаписи
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
console placeholder icon
Предыдущее видео: Этот кот был ИГНОРИРОВАН своим хозяином 😢💔Следующее видео: 1❤️ #thankyou #shorts
Топ скачиваемых видео
|

Топ скачиваемых видео

Теги видео
|

Теги видео

Жылдыз Академи
Jyldyz Academy
Веб разработка
разработка
программалоо
Айти
Келечек
акысыз айти
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:06
начинать
00:00:21
сегодня
00:00:22
мы поговорим про бокса вую модель в cs
00:00:26
оси что на что это такое
00:00:31
для чего она
00:01:09
что такое букс его я модель
00:01:12
получается wish them или когда браузер
00:01:16
отрисовывает какие-то элементы то есть
00:01:18
то что мы пишем да вот эти теги тэги это
00:01:21
элементы получается вот эти элементы они
00:01:23
представлены в виде блоков какие-то
00:01:26
блоки они
00:01:28
ну их называют блочными которые я еще
00:01:32
ранее говорил да который занимается
00:01:33
строчку
00:01:34
всю ширину и никого рядом не пускаем
00:01:38
есть еще
00:01:39
строчные элементы которые
00:01:42
ну как бы
00:01:45
получается
00:01:46
и блоки которые поменьше они поменьше
00:01:50
они ну по названию можно догадаться что
00:01:53
из строчная то что они становятся на
00:01:56
строчку то есть если элемент занимает
00:01:58
меньше вместо то он остановит встает а
00:02:02
потом если рядом еще появляется другая
00:02:05
другой строчный элемент то этот строчный
00:02:07
элемент становится рядом но вот это бокс
00:02:11
avaya модель получается как как выглядит
00:02:14
вот этот кирпич дает этот блок элемента
00:02:17
какие размеры как ок он вообще будет
00:02:20
выглядеть определяется от боксовый
00:02:22
модель на боксу луи модель элементов
00:02:26
вляет различные свойства
00:02:28
это границы это вот чтобы это внешние
00:02:34
отступы и так далее и в конечном счете
00:02:39
мы можем управлять именно размерами
00:02:41
элементов и потом дальше уже строит из
00:02:44
них допустим мы можем менять поведение
00:02:48
или отображения вот этих элементов
00:02:51
например блочный элемент сделать с
00:02:54
прочными на город строчные элементом можем
00:02:58
сделать блочными
00:03:00
еще есть срочно блочные элементы про них
00:03:05
мы сейчас и поговорим и первый компонент
00:03:08
первое свойство которое влияет на вот
00:03:10
бокса вую модель элементов это границы
00:03:14
границы и чтобы посмотреть границы
00:03:19
мы сейчас создадим абзац и этом абзаце
00:03:24
you зададим
00:03:26
класс например
00:03:30
byr почему border лом получается
00:03:36
свойства мы можем описывать несколькими
00:03:38
методами как бы несколькими свойствами
00:03:42
но сейчас я покажу покажу более длинный
00:03:45
вариант когда мы можем каждый компонент
00:03:48
границы
00:03:50
указывать от отдельно вот у нас есть
00:03:54
абзац с классом барду давайте ему
00:03:58
пропишем стиле границу
00:04:07
сперва
00:04:08
м
00:04:10
вот получается абзаца
00:04:15
или т.п. да он по умолчанию является
00:04:18
блочным он занимать всю ширину браузера
00:04:23
и рядом никого не пускать если здесь в
00:04:27
абзаце будет меньше текста который
00:04:30
меньше строчки да где это будет
00:04:33
то все равно следующий абзац появится
00:04:36
внизу будет идти по потоку до сверху
00:04:40
вниз и сейчас вот напишем границы для
00:04:45
этого для этого абзаца
00:04:47
первое что нужно указать когда мы пишем
00:04:50
границы вы должны сказать
00:04:53
ширину или указать ширину границы каким
00:04:57
должен all she толщину получается
00:05:00
границы какая должна быть толщина у
00:05:03
этого элемента границы толщина задается
00:05:08
свойствам border with и дальше мы здесь
00:05:13
указываем либо в пикселях либо в ямах но
00:05:18
обычно указывают в пикселях
00:05:21
ну хотим например ширину 5 пикселей
00:05:24
границы
00:05:25
сохраняемся здесь ничего пока не
00:05:30
изменяется
00:05:31
почему потому что мы пока еще не то
00:05:34
писали другие компоненты границы больше
00:05:37
границ из чего состоят они состоят из
00:05:40
толщины или ширины до границы какая
00:05:44
будет толщина у границы допустим какой
00:05:49
тип границы
00:05:51
это может быть сплошная линия это может
00:05:53
быть пунктирная это может быть точечная
00:05:56
границы и цвет вот мы сейчас получается
00:06:00
только указали толщину или ширину этой
00:06:03
границы нам далее нужно указать указать
00:06:07
тип границы
00:06:12
границы указывается свойствам border
00:06:14
ставим бордер style
00:06:17
и здесь вот
00:06:19
куча вот таких разных вариантов есть
00:06:23
дышит
00:06:25
он устанавливает границу вот пунктирную
00:06:33
есть доктор
00:06:37
это
00:06:39
к границе и самый популярный это sonic
00:06:46
sonic получается у нас сплошная просто
00:06:51
такая граница
00:06:52
вот мы указали мы еще цвет не указывали
00:06:56
но по умолчанию браузер сюда вставляют
00:06:59
такую черную границы этого нам
00:07:02
достаточно чтобы указать границы
00:07:04
ну границы иногда некоторыми элементом
00:07:09
границы
00:07:10
нужно добавлять разные например слева
00:07:13
пускай будет там 5 пикселей сверху там
00:07:16
10 пикселей справа там 20 а снизу
00:07:20
например 40 пикселей да вот в таких
00:07:26
случаях когда отдельно нужно указывать
00:07:28
каждую сторону границы мы можем взять
00:07:31
свойства border with
00:07:34
которые ранее нак solido
00:07:38
и вот здесь мы можем указать 44 свойства
00:07:43
4 значения то есть вот смотрите я сейчас
00:07:50
только указал одно свойство дан border
00:07:53
with 5 пикселей и в этом случае
00:07:56
границы становится для всех сторон 5
00:08:00
пикселей
00:08:01
когда мы добавляем например второй
00:08:03
компонент 10 пикселей да да давайте
00:08:07
побольше чтобы мы видели разницу в 20
00:08:10
пикселей добавляем что делай получается
00:08:14
мы сейчас вот этими двумя значениями
00:08:17
сказали сверху и снизу граница будет 5
00:08:21
пикселей а слева и справа 20 пикселей и
00:08:25
вот таким образом мы можем
00:08:28
указать
00:08:29
как бы два варианта сверху снизу справа
00:08:33
слева мы можем указать
00:08:35
третий компонент например здесь пускай
00:08:39
будет 40 пикселей
00:08:41
что тогда были а тогда будет вот
00:08:44
смотрите 5 пикселей получается мы
00:08:48
устанавливаем сверху до 20 пикселей по
00:08:51
бокам а вот третий компонент получается
00:08:54
у нас
00:08:55
нижние границы 40 пиксель и дальше мы
00:08:58
можем уже еще дальше пойти и указать 4
00:09:02
четвертое значение это четвертый
00:09:04
компонент границы который будет 50
00:09:08
петель если мы так сделаем что мы тогда
00:09:12
получается в указываем границы всех
00:09:15
четырех сторон
00:09:16
5 пикселей это сверху 20 пикселей вот по
00:09:20
часовой стрелке и юндо начиная сверху 5
00:09:22
пикселей 20 пикселей справа снизу 40
00:09:27
пикселей и слева 50 пикселей
00:09:31
вот таким образом мы можем указывать
00:09:34
разные границы для разных сторон и точно
00:09:39
так же мы можем указывать различные типы
00:09:42
для разных сторон
00:09:44
давайте я здесь поставлю сейчас 5
00:09:48
пикселей то есть border ставил мы можем
00:09:52
указывать четыре типа то же самое вот
00:09:56
когда написали соль solid сплошная
00:09:58
граница применяется ко всему элементу то
00:10:01
есть ко всем сторонам и сверху и справа
00:10:03
снизу мы можем добавить тебя уже 2
00:10:09
там какая будет например дышит
00:10:13
и тогда
00:10:14
яйца у нас пунктирная граница точно так
00:10:17
же как и мы писали для border with solid
00:10:20
сверху снизу по бокам у нас будет дышит
00:10:23
ну допустим здесь один пиксель вот здесь
00:10:28
появляется слева справа пунктирная
00:10:31
граница сверху снизу
00:10:36
роль и мы можем еще указать например
00:10:40
dota и тогда
00:10:43
яйца сверху соли по бокам дышит
00:10:47
а снизу да .
00:10:52
четвертый компонент например заново
00:10:55
сделаем например соли то тогда точно так
00:11:00
же сверху
00:11:02
потом справа
00:11:04
часовой стрелке до сплошная пунктирная
00:11:10
ночная и обратно салик слева вот идем по
00:11:13
часовой
00:11:14
по часовой стрелке начиная сверху и
00:11:20
теперь смотрите мы получается сейчас
00:11:23
указали границы но она по умолчанию
00:11:26
черные изменять цвет границы мы можем
00:11:32
значением свойствам border color
00:11:39
border
00:11:41
и можем сказать например делу и тогда
00:11:45
наша граница будет того цвета который мы
00:11:49
указываем в border кадр точно также мы
00:11:52
для различных сторон можем указывать 4
00:11:56
цвета сразу
00:11:57
пускай будет yellow и тогда у нас
00:12:02
получается ела сверху снизу
00:12:05
blue справа слева
00:12:09
указываем третий цвет например red
00:12:14
в по паре
00:12:15
чается сверху по бокам снизу указываем 4
00:12:19
цвет например грэин
00:12:23
получается точно также начиная сверху по
00:12:26
часовой желтый синий красный зеленый вот
00:12:34
так мы можем прописывать получается
00:12:36
границу
00:12:37
это был первый способ когда мы указываем
00:12:44
границу вот сразу с тремя
00:12:46
как бы свойствами это более такой
00:12:49
длинный вариант есть короткий вариант
00:12:53
давайте для короткого варианта сделаем
00:12:56
еще один абзац и здесь сделаем классно
00:13:00
пример
00:13:02
barber shop
00:13:08
где полно же
00:13:13
а как указывается сокращенный вариант
00:13:26
или такая краткая запись границы
00:13:29
мы просто берем свойство border и по
00:13:34
порядку перечисляем какие нам нужны
00:13:36
границы допустим мы хотим для для
00:13:41
второго абзаца чтобы граница была 3
00:13:43
пикселя
00:13:44
шириной указываем дальше тип
00:13:48
или стиле до границы хотим чтобы она
00:13:51
была сплошная например совы и там
00:14:01
третьим
00:14:04
займут цвет это короткая запись границы
00:14:11
это что касается вот границы вот здесь
00:14:15
цвета мы можем указывать в любом формате
00:14:18
сейчас я указывал ключевыми словами
00:14:20
можно указывать здесь
00:14:24
хайк с кодом до
00:14:32
можем написать как
00:14:34
цвет это цвет применить можем написать с
00:14:38
помощью rgb или и другими и
00:14:42
или мы вариантами
00:14:53
дальше по
00:14:54
он теперь
00:14:58
мы можем некоторым элементам скруглять
00:15:02
вот эти углы
00:15:10
как это сделается давайте сделаем другой
00:15:13
абзац и сюда пропишем например класс
00:15:19
гордо радиус
00:15:24
и для id
00:15:26
в абзаце пропишем вот такие стили
00:15:29
гордо радиус набор до радиус получается
00:15:33
это свойство просто закругляет углы
00:15:39
мы можем закруглять углы свойствам барда
00:15:43
радиус
00:15:46
и здесь уже
00:15:48
вот радиус закругления этого угла ну
00:15:53
допустим
00:15:56
10 пикселей
00:15:59
мы сейчас это не увидим потому что у
00:16:02
последнего абзаца сейчас нет у границы
00:16:05
но чтобы увидеть границы
00:16:08
border-radius закругление углов мы
00:16:11
должны добавить
00:16:12
border там пускай будет один пиксель
00:16:16
solid благ
00:16:22
и вот смотри
00:16:25
сам мы прописали свойство border-radius
00:16:30
10 пикселей и вот эти углы на 10
00:16:33
пикселей здесь как бы рисуется
00:16:36
прямую не прямоугольника круг и
00:16:39
на 10 пикселей радиусом вот эти углы
00:16:43
скругляю ца если мы здесь увеличим
00:16:46
радиус 20 пикселей то соответственно
00:16:50
углы еще больше закруглены мы можем
00:16:55
некоторые элементы например совсем
00:16:57
сделать круглыми для этого давайте
00:17:00
попробуем сделать еще один
00:17:04
мы просто сделаем давайте div просто
00:17:08
с классом раунд здесь ничего не будет но
00:17:12
для этого раунд мы сейчас укажем что она
00:17:20
будет 50 пикселей в ширину
00:17:23
высоту 50 пикселей
00:17:26
если мы хотим чтобы элемент был
00:17:29
полностью круглый обязательно вот эти
00:17:32
ширина и высота должны как бы совпадать
00:17:36
то есть бывали элемент должен быть
00:17:38
полностью квадратами иначе у нас не
00:17:41
получится вот мы div сделали ноги в
00:17:46
пустой мы здесь на странице его не видим
00:17:48
и я сейчас добавлю границу для этого
00:17:53
дива
00:17:58
и вот наш
00:18:04
div который 4050
00:18:08
давайте побольше сделаем
00:18:11
сто и высотой что вот добавили границы и
00:18:22
если мы сейчас ему пропишем
00:18:24
border-radius
00:18:25
50 процентов
00:18:30
элементы наш элемент станет полностью
00:18:33
круглым таким образом мы можем получать
00:18:36
такие круги вы наверняка такие видели на
00:18:41
сайтах например аватарки до появляется в
00:18:46
кружочках внутри фотография и получается
00:18:49
вот так мы можем делать элементы
00:18:53
абсолютно круглыми
00:18:57
теперь прага вы поговорим про второе
00:19:01
свойство которое тоже влияет на бок свою
00:19:04
модель это у нас от чтобы и
00:19:10
отступ и причем внутренние вот чтобы
00:19:25
создал
00:19:27
с побольше с текстом задали класс
00:19:33
padding и внутренний отступ и задаются
00:19:38
свойствам padding но первый путь первый
00:19:45
способ
00:19:49
от внутреннего отступа будет чуть
00:19:51
длиннее как в варианте когда мы
00:19:54
указывали границы до когда мы указываем
00:19:58
внутренний отступ
00:19:59
мы можем указывать его с различных
00:20:02
сторон то есть вот чтоб может быть слева
00:20:04
вот чтоб может быть сверху справа снизу
00:20:07
да вот четыре компонента мы можем
00:20:10
указывать отдельно ну мы сейчас
00:20:12
если я добавлю по din мы его не увидим и
00:20:16
поэтому добавим тоже границы
00:20:29
вот добавлю
00:20:31
и вот у нас
00:20:33
вот наш абзац и вот его границ
00:20:36
внутренний отступ получается это отступ
00:20:39
от границы до контента который находится
00:20:43
внутри элемент от границы прямо до до
00:20:47
начала словно
00:20:50
вот здесь сейчас видите что здесь нет
00:20:54
никаких отступов и контент слова до
00:20:58
строчки они прям прижата к краям к их
00:21:02
границы да и мы можем это исправить и
00:21:07
добавлять отскока можем добавить отступ
00:21:11
например слева
00:21:15
это
00:21:17
и со свойством один квест и здесь точно
00:21:19
также либо в ямах либо в пикселях
00:21:22
указываем какой должен быть вот обычно
00:21:25
пишет пикселя хотим например 20 пикселей
00:21:28
чтобы был отступ слева написали
00:21:31
мы получаем вот 20 пикселей вот здесь
00:21:34
слева вот видите внутренний отступ это
00:21:38
когда вот эта отступ который начинается
00:21:41
от границы до самого элемента хотим
00:21:45
например чтобы отступ был сверху
00:21:49
мы можем написать нам по 1 кто и здесь
00:21:53
указать например 35 или
00:21:55
и здесь соответственно мы получаем
00:21:59
верхние вот чтобы верхний внутренний
00:22:01
отступ
00:22:02
размером 30 пикселей и точно также есть
00:22:06
свойство для правого отступа
00:22:09
50 пикселей например и padding для ниже
00:22:14
нижней нижнюю отступа
00:22:16
например 60 пикселей вот мы получаем вот
00:22:23
чтобы которые нам нужно и это был такой
00:22:26
длинный вариант когда мы каждую сторону
00:22:29
указываем отдельно есть сокращенный
00:22:33
вариант я вот этот код сейчас просто
00:22:35
закомментирую сейчас вот уступов у нас
00:22:39
не сокращенный вариант просто
00:22:41
указывается свойствам padding и мы
00:22:45
перечисляем 4 1 либо 2 либо 3 либо 4
00:22:51
компонента
00:22:52
первый раз когда например мы указываем
00:22:54
10 пикселей просто одно значение то от
00:22:58
чтоб у нас появляются со всех сторон
00:23:01
указанного размера 10 пикселей сейчас
00:23:03
сверху снизу справа слева когда
00:23:07
указываем уже второй вариант например 20
00:23:10
например 30 пикселей то у нас от что
00:23:14
появляется слева справа 30 пикселей а
00:23:17
сверху снизу
00:23:19
10 пикселей когда мы пишем например 3
00:23:23
отступ когда мы указываем три компонента
00:23:27
да то у нас соответственно получается
00:23:30
смотрите здесь
00:23:34
что мы написали 10 пикселей сверху потом
00:23:40
у нас 30 пикселей это справа еще
00:23:45
вся от пикселей снизу слева справа и 60
00:23:48
пикселей снизу
00:23:49
аналогично для как как для граница если
00:23:53
мы пишем 4 варианта получается мы
00:23:55
указываем для каждой стороны свой вот
00:24:00
мы прописали 4
00:24:03
оппонента и сейчас то что мы прописали
00:24:06
для каждого
00:24:07
для каждой их для каждой из сторон мы
00:24:10
прописали отдельно своего
00:24:16
когда вы будете указывать сокращенный
00:24:21
вариант
00:24:22
отступов то запомните что вот эти четыре
00:24:27
значения и
00:24:28
идут всегда сверху и по часовой стрелке
00:24:31
то есть сверху справа снизу и слева
00:24:37
так это был были отступ
00:24:40
теперь поговорим про внешние usb мы
00:24:46
сейчас сделали
00:24:47
внутреннюю ступ
00:24:51
давайте сделаем другой абзац
00:24:56
и здесь зададим класс например марджи
00:25:05
внешний отступ получается это отступ от
00:25:09
границы и до другого элемента
00:25:18
у нас абзац чтобы его выделить давайте
00:25:23
для него тоже добавим границы
00:25:36
вот чтоб
00:25:37
право это получается от границы до
00:25:41
следующего
00:25:42
или рядом стоящего элемента или сверху
00:25:45
слева справа и точно также отступ и
00:25:49
внешнего мы можем указывать вот так
00:25:52
длинным вариантом да когда мы указываем
00:25:55
для каждой
00:25:56
для каждой стороны марджи например топ
00:26:01
60 мы сейчас
00:26:06
навели 60 пикселей margin то есть
00:26:09
внешнюю сверху
00:26:12
не вот на 60 пикселей получается
00:26:15
следующий абзац сместился вниз мы можем
00:26:18
сказать
00:26:19
например морджим слева 60 пикселей
00:26:26
и вот наша абзац смещается вправо то
00:26:30
есть мы добавляем отступ
00:26:32
внешний отступ слева 60 пикселей он
00:26:35
смещается в правую часть мы можем
00:26:40
написать
00:26:41
margin справа например 60 пикселей
00:26:45
и тогда наш элемент справа тоже
00:26:50
смещается на 60 пикселей добавляем
00:26:53
просто пустое пространство на внешнюю и
00:26:58
аналогично нижнюю
00:27:02
65 или
00:27:05
вот здесь появляется внешне вот мы
00:27:09
одновременно элементом можем указывать и
00:27:12
внешние отступы внутреннюю и точно также
00:27:16
для внешних отступов есть сокращенный
00:27:19
вариант когда мы просто пишем margin и
00:27:21
указываем либо одно значение
00:27:25
60 пикселей код ни одна комментирую
00:27:33
когда мы пишем
00:27:35
сетчатый одно значение то отступ
00:27:37
добавляется со всех сторон и точно так
00:27:40
же мы для из каждых сторон можем
00:27:42
прописать либо 2 либо 3 либо 4
00:27:45
компонента
00:27:47
30 пикселей
00:27:50
20 пикселей
00:27:52
и там 50 тысяч
00:27:56
и точно так
00:27:59
идет сверху по часовой стрелке справа
00:28:01
снизу слева
00:28:05
еще добавим давайте по денги для одного
00:28:09
и того же элемента
00:28:10
там кафкой были 20 пикселей
00:28:18
то есть элемент 1
00:28:20
иметь и границы и внутренние отступы
00:28:23
не внешние отступы
00:28:28
так вот теперь мы поговорим про
00:28:36
свойство которое меняет
00:28:40
видения вот этих элементов я уже говорил
00:28:42
что некоторые элементы они по умолчанию
00:28:44
блочные а некоторые элементы они по
00:28:48
умолчанию строчные это какие элементы в
00:28:51
основном это большие блоки заголовки
00:28:54
там хэдер section артикул
00:28:57
тег div т ю л о н мешки
00:29:03
они все являются по умолчанию блочными
00:29:07
элементами они всегда становятся на один
00:29:09
ряд то есть занимает одну строчку никого
00:29:12
рядом не пускают
00:29:15
и абзацы тоже получается у нас блочные
00:29:18
как видите они занимают одну строчку и
00:29:21
кого рядом не пускает а
00:29:25
например примером для строчных элементов
00:29:30
может служить например span.txt
00:29:37
он срочно
00:29:39
по умолчанию вот у нас появляется один
00:29:42
так аренда текст текстом если я сюда еще
00:29:47
добавлю
00:29:50
несколько станов
00:29:53
и будут идти друг за другом вот то что я
00:29:56
и говорю
00:29:57
строчные элементы они занимать столько
00:29:59
места сколько у них содержание
00:30:02
контент другие строчные элементы которые
00:30:06
стоят рядом они просто становятся
00:30:09
рядом с ним
00:30:11
и получается как вообще можно менять
00:30:16
свойства
00:30:18
которое меняет поведение
00:30:22
вот этих блоков для этого отвечает
00:30:25
свойство дисплей
00:30:26
но перед этим давайте посмотрим на
00:30:29
пример тыл
00:30:38
вот смотрите
00:30:40
так юны лишь некоторые лежат внутри ли
00:30:44
они получаются блочные и не идут друг за
00:30:48
другом
00:30:50
span и они прочные идут друг за другом
00:30:55
но уже как бы в одной строке и как их
00:30:58
теперь поменять ну например нам
00:31:00
понадобилось чтобы какой-то какую-то
00:31:03
строчный какой-то строчный элемент
00:31:05
сделать например блочными мы можем это
00:31:09
поменять свойствам
00:31:11
дисплей вот у нас есть спа на мы
00:31:14
выбираем их и хотим сделать из строчных
00:31:17
элементов блочных мы для этого пишем
00:31:20
свойство дисплей и пишем блог
00:31:28
не тогда вот эти спам и они становятся
00:31:31
блочными и занимают начинает занимать
00:31:37
одну строку каждый элемент одну строку и
00:31:39
рядом не будет пускать никого вот
00:31:44
например у нас есть списки до которые по
00:31:47
умолчанию блочный как сделать так чтобы
00:31:49
они наоборот стали блочным строчными
00:31:53
чтобы вот эти ой там мы шли друг за
00:31:56
другом ну в одной строке мы можем это
00:31:59
сделать вот у нас например
00:32:02
так цель я уже говорил что он блочный мы
00:32:06
можем поменять ему поведение дисплей
00:32:09
напишем онлайн
00:32:12
свойства inline наоборот из блочного
00:32:14
элемента делает строчный элемент но мы
00:32:18
сейчас ничего не увидим потому что
00:32:22
айтемы как они стояли по вертикали друг
00:32:25
за другом они так и стоят но сейчас у
00:32:28
нас родительский у эль он стал как бы
00:32:34
строчным если мы здесь добавим еще один
00:32:38
ю.н.
00:32:48
винкс
00:32:50
они все до сих пор идут друг за другом
00:32:53
как это поменять получается у нас внутри
00:32:57
newell лежат ли которые тоже в свое
00:33:01
время свое время являются блочными
00:33:04
элементами то есть получается мы должны
00:33:06
наоборот поменять свойства для leshik
00:33:10
которые будет менять их
00:33:14
ражение мы выбираем лишь ки и говорим
00:33:17
именно пример дисплей онлайн
00:33:20
мы здесь делаем их как бы блочными и вот
00:33:24
теперь смотрите что произошло у нас все
00:33:27
личке которые лежат внутри первого ю.н.
00:33:30
они становятся строчными
00:33:32
и они выстраиваются по горизонтали а
00:33:36
второй список тоже становится по
00:33:39
горизонтали и становится рядом уже с
00:33:43
другим списком если вот здесь в уберу
00:33:46
вот этот юэль или закомментирую
00:33:50
то
00:33:51
смотрите
00:33:53
юэль треки которые оборачивают наш
00:33:56
излишки они остаются блочными
00:33:58
но внутри ли элементы они становятся
00:34:01
строчными и они выстраиваются в ряд
00:34:05
а если вот здесь добавляю то вот эти
00:34:08
родительские ю л т к они становятся тоже
00:34:12
строчными
00:34:13
и как бы они тоже начинают вставать друг
00:34:16
за другом и когда мы например указываем
00:34:23
отступ и
00:34:24
и внешние и внутренние отступы то
00:34:28
получается для элементов у которых
00:34:31
поведение или поведение которые блочные
00:34:35
они нормально воспринимают и внешние
00:34:38
отступы и внутренние отступы давайте я
00:34:42
пока вот это юлю беру и посмотрим о чем
00:34:46
идет речь вот у нас есть спа на пока
00:34:50
давай через не будем их менять вот этот
00:34:53
код закомментируем
00:34:54
получается на самом деле для строчных
00:34:57
элементов мы можем указывать только
00:35:01
отступы по горизонтали
00:35:04
давайте я сперва для span of добавлю
00:35:07
границы чтобы мы увидели вот эти вот
00:35:09
ступа
00:35:17
у нас есть спа на анны они получаются
00:35:20
друг для друга милю если я сейчас
00:35:23
пропишу например внутренний отступ
00:35:27
поединка сокращен запись где я хочу
00:35:30
указать со всех сторон например 20
00:35:32
пикселей отступа
00:35:37
они воспринимаются
00:35:44
марка
00:35:48
могу про
00:35:49
сайт
00:35:53
со всех сторон они становятся не
00:35:59
воспринимаю как вы видите здесь я говорю
00:36:03
марджи ну отталкиваясь от сверху или
00:36:07
можем даже явно указать что margin с
00:36:10
понты
00:36:11
отступи верхнем отступом от до тебя
00:36:16
стоящего элемент вот у нас есть п
00:36:18
мы ему ему спаму хотим сказать у тебя
00:36:24
будет внешней верхний отступ например 50
00:36:27
пикселей
00:36:30
он не воспринимает по денги еще кое как
00:36:34
они воспринимают но вот margin с
00:36:37
машинами у нас будут проблемы
00:36:41
можем даже здесь еще 100 пикселей
00:36:44
написать
00:36:47
ничего нет почему потому что строчные
00:36:51
элементы они нормально не воспринимают
00:36:53
вот эти горизонтальные еще более как
00:36:56
воспринимать ну вертикальные отступ и
00:36:58
они адекватно не воспринимают и чтобы
00:37:02
это исправить можно поменять их
00:37:06
как бы отображение дисплей
00:37:11
блог
00:37:16
и как вы видите вот эти ло
00:37:19
спа надо они становятся с прочными
00:37:22
не у них сверху добавляется марджан топ
00:37:26
и они начинают воспринимать это но
00:37:31
сейчас смотрите у нас появилась другая
00:37:33
проблема потому что спам и вот эти лором
00:37:37
и господа
00:37:38
они начали растягивается на всю строку
00:37:41
мы выходили бывает случай когда например
00:37:44
наоборот хотим чтобы строчный элемент и
00:37:48
адекватно воспринимал внешние отступы по
00:37:51
вертикали но также у них было поведение как бы они
00:37:56
до этого шли до в одной строке друг для
00:37:59
друга мы это можем еще поменять если мы
00:38:03
значение свойства дисплей пропишешь
00:38:06
пропишем еще свойства онлайн бог это
00:38:08
третий вариант как бы
00:38:11
изменение поведения или отображения
00:38:14
элементов дисплейный блок
00:38:15
то есть это говорит о том что онлайн это
00:38:18
строчный блок как бы блочный срочно
00:38:21
блочным элемент становится срочно
00:38:23
блочным и тогда вот эти строчные блочные
00:38:27
элементы они начинают нормально
00:38:30
воспринимать вот эти отступ и
00:38:32
по вертикали
00:38:36
не смотрите что теперь стало морем и они
00:38:40
выстроились у них добавился верхний
00:38:43
отступ и мы можем добавить например не сверху
00:38:47
а со всех сторон просто например вот
00:38:51
чтоб 30 пикселей
00:38:54
и все как бы становится нормально все
00:38:58
они выстраиваются идут друг за другом
00:39:04
это вот что касается свойства дисплей у
00:39:08
свойства дисплей есть еще другие
00:39:10
варианты мы сегодня просто рассмотрели
00:39:12
дисплее блок когда меняем строчный и
00:39:15
наоборот на блочный или строчные меняем
00:39:19
на блочный онлайн дисплей онлайн и третий вариант
00:39:23
inline inline есть еще другие варианты
00:39:26
онлайн
00:39:27
дисплей pebble дисплея flex дисплей grid
00:39:30
но про них мы еще поговорим в других
00:39:33
уроках
00:39:34
ну пока вот эти свойства нам фото дальше
00:39:40
что теперь давайте поговорим про размеры
00:39:48
как мы можем указать
00:39:50
размеры элементов
00:40:10
размер можно за
00:40:12
свой что он ведь мы ранее уже чуть
00:40:14
посмотрели но сейчас более подробно
00:40:16
поговорим
00:40:17
размер можно указывать и в пикселях в
00:40:20
процентах мемах любое как бы любое
00:40:26
значение ну посмотрим какое более явное
00:40:30
когда мы указываем размеры в пикселях
00:40:34
например вот для этого абзаца у которого
00:40:38
есть класс из мы задаем и мишель ширину
00:40:41
получается 200 пикселей
00:40:45
не смотрите вот у нас абзац
00:40:49
давайте зададим ему еще границу
00:41:03
этот абзац сейчас стал занимать 200
00:41:07
пикселей
00:41:08
мы ограничили его ширину если мы не
00:41:12
указываем здесь никакую ширину то
00:41:15
элемент просто по умолчанию
00:41:16
растягивается на всю доступную ширину
00:41:19
браузера ширину окна и мы вот можем как
00:41:25
бы ограничивать или указывать явную
00:41:28
ширину мы говорим ты будешь 200 пикселей
00:41:30
и элемент становится 200 пикселей на
00:41:34
самом деле 2 6 петель и она говорит о
00:41:37
том что внутренний контент будет 200
00:41:40
пикселей то есть содержание будет 200
00:41:42
пикселей по про расчет вот этих ширины и
00:41:46
высоты
00:41:47
еще дальше поговорим это что касается
00:41:51
ширины когда мы явно пишем что это
00:41:56
какой-то размер просто указав выть
00:41:59
давайте создадим например еще один абзац
00:42:09
где мы будем ограничивать уже ширину
00:42:14
другим способом
00:42:22
у нас есть значение макс
00:42:27
свойства макс это говорит о том что
00:42:30
элемент может максимально быть какого-то
00:42:35
размера манон от допустил скажем 500
00:42:39
пикселей и этим я говорю что вот этот
00:42:43
элемент у которого есть макс быть у него
00:42:46
размер может быть меньше но максимум 500
00:42:50
пикселей 500 пикселей выше 500 он не
00:42:53
может быть и смотрите
00:42:59
давай добавим границы чтобы еще были
00:43:02
явно видеть border например один пиксель
00:43:05
solid yellow
00:43:10
вот у нас 3 следующий абзац
00:43:14
которому мы ограничили ширину 500 ме
00:43:17
пикселями это говорит о том что если у
00:43:22
этого абзаца будет достаточно контента
00:43:25
он будет расширяться и расширяться до
00:43:28
до 500 пикселей а если там будет
00:43:31
контента меньше
00:43:34
допустим вот так чуть-чуть да то тогда
00:43:40
[музыка]
00:43:41
ничего не поменяется но есть другой
00:43:45
вариант когда еще более мы можем
00:43:49
управлять так как бы если нужно какие-то
00:43:54
минимальная ширина
00:43:56
то у нас есть еще свойство которое
00:43:58
говорит о том что будет милый
00:44:03
возьмем этот класс
00:44:23
давайте
00:44:25
здесь добавим текста
00:44:30
вот у нас следующий lime мы сейчас ему
00:44:32
никаким образом не задаем чары ширину
00:44:35
этот блок растягивается
00:44:37
но что будет если мы укажем
00:44:42
минимальную ширину
00:44:48
минует и там
00:44:50
зум
00:44:52
сто пикселей
00:44:56
то
00:44:58
случае мы так
00:45:01
и увидим что этот элемент
00:45:03
полностью растягивается ну если там
00:45:06
контента будет меньше
00:45:20
как
00:45:46
бак
00:46:19
он
00:46:27
с
00:46:47
здесь нет ошибок
00:47:07
так
00:47:10
мое поведение какое-то у нас сейчас
00:47:13
получается вот минует свойствам минует
00:47:16
она отвечает за минимальную то есть если
00:47:19
для каких-то элементов нам нужно
00:47:21
минимальное но чтобы она мог могла
00:47:24
растягиваться то мы указываем от
00:47:26
свойствам минут почему мы сейчас это не
00:47:30
работает надо разбираться странно
00:47:52
с
00:48:06
ну
00:48:09
что-то изменилось
00:48:12
цена
00:48:14
в общем смотрите минимальная ширина это
00:48:18
когда мы просто ограничиваем мы пишем
00:48:21
там элемента будет какая-то минимальная
00:48:23
ширина
00:48:24
но она может растягиваться
00:48:27
странно почему это перестало работать на
00:48:38
[музыка]
00:48:43
конвертер border guards at the border
00:48:49
del carmen минимум горстка тут
00:48:51
обертонами тросом нашел тот что
00:48:58
[музыка]
00:49:02
бургер дал ванда дали что или book
00:49:10
или он руб
00:49:12
само название класса или жду
00:49:32
какой табака в общем потом 1
00:49:36
все очень просто
00:49:37
если нужно указать какую-то минимальную
00:49:39
ширину то вот мы ограничиваем
00:49:42
минимальной ширины давайте попробуем на
00:49:46
просто бог создадим просто блок и
00:49:53
попробуем его ограничьте
00:50:23
попробуем задать высоту
00:50:41
вчера только
00:50:42
но
00:51:04
в общем смотрите сейчас по
00:51:07
звук 160
00:51:12
он получается
00:51:13
резиновой весе получается сейчас
00:51:14
растягивается но уже не становится вот
00:51:19
для такого формата получается он сейчас
00:51:22
наш элемент
00:51:23
которому мы задали минует 300 пикселей
00:51:27
у него минимально 300 пикселя есть ну
00:51:30
может растягиваться дальше
00:51:33
ну из за того что у него минимум есть он
00:51:35
дальше не растягивается видите вот
00:51:37
остальные блоки стоят вот этот блок
00:51:40
который которому был мы пропишешь
00:51:43
прописывали минимальное 300 пикселей вон
00:51:45
уже не становится он как бы стоит как
00:51:49
300 пикселей и стоит 305 вот такой вот
00:51:55
такое вот поведение и получается вот
00:51:59
когда мы пишем
00:52:00
[музыка]
00:52:02
ширину это вроде бы понятно но есть еще
00:52:07
указания высоты
00:52:11
так вот ну пока вы берем
00:52:34
вот у нас
00:52:35
есть хайд где мы пишем на при
00:52:41
satu жестко
00:52:44
просто явно пишем там 100 пикселей
00:52:52
вот наш элемент сейчас там can
00:52:55
это хватает получается и он как бы
00:52:58
адекватно видим но если мы сейчас
00:53:00
добавим 1 пиксель solid
00:53:06
green
00:53:10
вот наш элемент мы его мы ему сейчас
00:53:13
ограничили
00:53:14
высоту получается 100 пикселей если мы
00:53:18
скажем что у этого элемента будет 50
00:53:21
пикселей
00:53:24
смотрите
00:53:25
произойдет поскольку внутри этого абзаца
00:53:30
готова абзаце я контента много
00:53:32
которому 150 пикселей высоты не хватает
00:53:36
и все что как бы не помещается внутри
00:53:40
она просто вываливается а вот специально
00:53:43
поставил зеленую рамку и последняя
00:53:46
строчка абзаца она не помещается
00:53:48
и просто вываливаются за рамку
00:53:52
поэтому с высотой надо быть очень
00:53:55
осторожным и никогда не вот вот так
00:54:00
просто
00:54:03
жестко не
00:54:04
чарующий высоту если там есть какой-то
00:54:09
контент и
00:54:10
обычно если там если там будет например
00:54:13
текст текстовый контент то так вот
00:54:16
жестко ограничивать высоту никогда не
00:54:19
стоит лучше всего
00:54:22
ограничить там например минимальной
00:54:26
высотой которую говорит
00:54:28
у элемента минимально будет 50 пикселей
00:54:32
но если там будет контента больше 100
00:54:35
елями
00:54:37
у просто будет расти и как вы видите
00:54:39
сейчас уже последняя строчка
00:54:42
она находится внутри а если в абзаце
00:54:46
будет меньше контента
00:54:52
элемент минимум будет
00:54:55
вся пикселей как мы здесь написали то
00:54:58
есть если даже будет здесь совсем мало
00:55:00
контента
00:55:04
то элемент все равно занимает 50
00:55:07
пикселей то есть это что то что нам
00:55:10
минимум нужно также мы можем
00:55:13
ограничивать и максимально max hit
00:55:18
например скажем
00:55:22
сто пикселей и что в этом
00:55:24
произойдет элемент сейчас просто уже
00:55:27
мается сколько места сколько контента
00:55:32
здесь есть она столько там есть но мы
00:55:34
сейчас ограничили макс хоть там сто
00:55:37
пятьдесят сто пикселей
00:55:38
если здесь добавится еще контента
00:55:42
элемент начнет расти
00:55:45
если добавим ещё контента
00:55:51
дальше растет
00:55:52
element
00:55:58
вроде бы растет ну когда к
00:56:02
будет совсем много
00:56:12
все что не память
00:56:14
c 100 пикселей они просто будут
00:56:16
вываливаться поэтому
00:56:22
height и max height это зло если нужно
00:56:26
хотя бы минимальная какая-то высота то
00:56:29
пользуемся мин haydn
00:56:31
и тогда мы даем себе гарантию что
00:56:34
контент который находится внутри она
00:56:38
него не будет вываливаться
00:56:41
и вот когда мы указываем размеры ширина
00:56:46
высота то на самом деле когда мы пишем
00:56:50
высота 200 пикселей или там ширина 100
00:56:54
пикселей
00:56:55
обычно это очень часто для указания
00:56:58
ширины
00:57:01
вот смотрите я создаю какой-то блок
00:57:09
skype
00:57:10
будет просто пустой блок пока уберем ее
00:57:19
муза
00:57:20
ну например 200 пикселей
00:57:23
чтобы увидеть этот блок мы сейчас
00:57:26
давайте посмотрим
00:57:29
с границами
00:57:42
вот у нас есть блок поскольку то
00:57:45
сейчас нету контента она просто в 0
00:57:49
высоты добавим сюда чуть-чуть текста
00:57:56
вот мы и мы ограничили ширину сказав что
00:58:01
ты будешь 200 пикселей
00:58:02
ну 200 пикселей вот в обычным в обычные
00:58:08
формулировки da capo обычной форме в
00:58:10
формуле которая считает браузер размеры
00:58:13
то вот эти 200 пикселей оно означает то
00:58:16
что содержание или контент который
00:58:18
находится внутри она будет не выше 200
00:58:22
пикселей
00:58:23
мы ограничиваем только контент но по
00:58:27
умолчанию когда мы браузер вот таким
00:58:29
образом указываем размер и то в этот
00:58:33
размер получается будет добавляться вот
00:58:36
этот 200 пикселей и границы тоже если мы
00:58:42
сейчас через инспектор посмотрим на
00:58:45
размер этого блока
00:58:50
вот у нас есть последний диск
00:59:00
вот и видим что у элемента есть 200
00:59:05
пикселей не граница
00:59:08
и по факту сейчас вот этот элемент он
00:59:13
200 плюс два пикселя 202 пикселя
00:59:17
если мы внутри добавляем еще padding
00:59:21
внутреннего
00:59:25
padding на при
00:59:26
по 10 пикселей по наш элемент будет
00:59:31
становиться еще больше
00:59:34
вот я навожу внизу появляется див . блок
00:59:40
222 пиксельная ширина несмотря на то что
00:59:44
я ему говорю 200 пикселей браузер его
00:59:47
делает двести двадцать два пикселя это
00:59:51
потому что то что мы прописали 200
00:59:54
пикселей это получается ширина контента
00:59:56
содержание к нему добавляется по 10
00:59:59
пикселей
01:00:00
внутреннего отступа с обеих сторон
01:00:06
но
01:00:09
и дальше еще 2 2 пикселя границе с обоих
01:00:15
сторон и таким
01:00:20
учатся мы должны считать когда указываем
01:00:25
или ограничиваем размер какого-то блока
01:00:27
сколько там граница ширина границы
01:00:30
сколько там по din гав будет и
01:00:33
окончательно получать нужную нам цифру
01:00:36
добавляем например и фидо 5 пикселей то
01:00:39
наш блог становится еще больше
01:00:43
230 сейчас стал потому что мы еще
01:00:46
увеличь увеличили бургер по 5 пикселей
01:00:49
это невыгодно например до обновления
01:00:55
css а это было невыгодно и вечная такая
01:00:59
головоломка сколько прям надо посчитать
01:01:01
чтобы элемент был
01:01:04
определенного размера всегда надо было
01:01:06
учитывать и границы
01:01:08
сам содержание сама содержания и доступа
01:01:13
и потом уже вычислим но обновление css
01:01:19
появилась свойство которое меня зовут
01:01:22
формулу расчета ширины и как она теперь
01:01:27
выглядеть мы вот этому блоку можем
01:01:30
задать свойства бог сайзинг
01:01:33
не сказать border бокс по умолчанию
01:01:37
здесь стоит контент бокс который при
01:01:40
расчете учитывает вот эти и границы
01:01:43
ширину и подступ но свойства border бокс
01:01:48
значение border бокс она совсем меняет
01:01:53
вот это
01:01:54
насчет и когда мы уже указываем вид
01:01:57
200 пикселей то 200 пикселей это будет
01:02:01
окончательный размер нашего элемента вот
01:02:03
мы хотим чтобы какой-то будет блок был
01:02:05
200 пикселей
01:02:06
мы указали бокса и зимбардо бог две
01:02:09
кости пикселя и этот блок будет 200
01:02:12
пикселей
01:02:13
вот смотрим сейчас здесь появляется div
01:02:18
блок размером 200 на 200 46
01:02:22
ширина 200 то что мы хотели получать
01:02:25
и в этот значение 200 пикселей уже
01:02:29
вкладывается
01:02:30
и по денги и бордель то есть со всеми
01:02:35
взятками получается окончательный
01:02:37
результат у нас 200 пикселей а к в
01:02:40
предыдущем как бы варианте мы наоборот
01:02:44
получали больше цифры до блок просто
01:02:47
становился больше это очень выгодно
01:02:53
немногие стали использовать бог сайзинг
01:02:56
border бокс для всего элемента пусть они
01:03:00
разработчики что сейчас они делают перед
01:03:04
на самом самом верху чтобы вот эти
01:03:07
калькуляции
01:03:09
расчеты велись без всяких заморочек
01:03:13
они берут и вот здесь пишут просто
01:03:15
выбирает ставят универсальный selector и
01:03:19
говорят бог сайзинг
01:03:24
warder бокс и получать
01:03:27
ценную для всех элементов для для всех
01:03:30
для всех говорим у вас будет бог сайзинг
01:03:32
ордер box
01:03:33
то есть когда мы пишем размер 200
01:03:35
пикселей или там 500 пикселей то у нас
01:03:38
всегда будет 500 пикселей окончательное
01:03:40
значение
01:03:41
но на самом деле звездочка не говорит о
01:03:45
том что будут выбраны абсолютно целями у
01:03:48
элементов есть еще псевдо-элемент то
01:03:52
есть это before и after
01:03:53
и их тоже надо учитывать и поэтому мы
01:03:56
можем вот здесь перечислить их тоже мы
01:03:59
берем все элементы и у любого элемента
01:04:01
может быть например все вдали миф бифур
01:04:04
него тоже выбираем у абсолютно любого
01:04:08
элемента может быть псевдо-элемент автор
01:04:11
и вот таким образом мы можем сказать то
01:04:14
есть мы сейчас просто выбираем группу
01:04:16
различных селекторов выбираем выбираем
01:04:19
все элементы выбираем себе фары
01:04:22
псевдо-элемент у всех элементов и точно
01:04:25
также офисе
01:04:26
автор элементу всех элементов и тогда мы
01:04:29
себе гарантируем что где бы мы не
01:04:32
прописывали размер то у нас будет
01:04:34
адекватный расчет размеров вот
01:04:38
получается таким образом мы меняем
01:04:42
поведение расчета и упрощаем себе жизнь
01:04:46
если например какому-то блоку внутри где
01:04:50
то наоборот нужно другое поведение ну
01:04:52
допустим для всех мы как-то задавали
01:04:56
ширину у нас появился какой-то особый
01:04:59
блог где мы наоборот должны менять
01:05:02
свойства да не получается вот для этого
01:05:06
блока например нам наоборот нам
01:05:08
получается выгодно чтобы вот эти границы
01:05:10
тоже добавлялись
01:05:13
и в конце мы получали другую другое
01:05:15
значение вот тогда мы можем вот здесь
01:05:17
именно для этого элемента boxing
01:05:21
наоборот поменять и сказать что у тебя
01:05:23
будет контент бокс то есть наоборот мы
01:05:27
прописываем и
01:05:31
сейчас произведу произойди
01:05:33
берем последний геев и как вы видите мы
01:05:37
получаем те же двести тридцать пикселей
01:05:39
которые идут в расчете то того что у нас
01:05:44
220 пикселей это padding 220 и по 5
01:05:49
пикселей с обеих сторон 10 и в конечном
01:05:52
итоге мы получаем 235 или
01:05:56
вот так мы можем менять расчеты так
01:06:01
дальше что у нас
01:06:07
буксовые модели получается это все
01:06:10
всегда учитываем размеры и правильно
01:06:13
устанавливаем получается размеры
01:06:15
либо их ограничиваем максимально либо
01:06:19
минимально если нам нужно либо просто
01:06:22
жестко фиксируем
01:06:24
когда указываем просто у из или просто
01:06:27
хай но еще раз говорю с высотой очень
01:06:33
надо быть осторожным высоту фиксировать
01:06:38
лучше всего подходит когда нам нужно
01:06:40
сверстать например какой то маленький
01:06:42
блог где там меконг а или что-то да но
01:06:46
не контент если там ожидается что там
01:06:48
появляется больше текста больше контента
01:06:51
то вот такие элементы
01:06:53
мы никоим образом не как не должны
01:06:56
ограничивать высоту высота на опасное
01:07:02
так
01:07:05
вот теперь посмотрим на пример
01:07:08
оформления вот этих блоков когда мы
01:07:11
указываем
01:07:13
фоновый цвет
01:07:16
вот возьмем
01:07:18
мир наш блог
01:07:20
и хотим ему задать например фоновый ци
01:07:23
фоновый цвет просто задается свойствам
01:07:26
background color background color здесь
01:07:29
указываем либо hex код rgba либо
01:07:31
ключевое слово и так далее то просто
01:07:34
напиши например
01:07:38
наш блог
01:07:40
но это красном
01:07:42
либо любим любим как бы
01:07:45
цветом можно записать цвета
01:07:54
коротко все
01:07:59
теперь давайте
01:08:00
вам к вашим вопросам
01:08:21
дисплей онлайн блок органов
01:08:31
минута странного полная
01:08:33
либо обновление ул он мой либо что
01:08:38
по идее блочные элементы мы можем смело
01:08:41
задавать размер
01:08:55
так
01:09:27
суровым
01:09:37
view хоть view вести свой стол are worth
01:09:41
w вечером 24
01:09:45
экран дан размер это экрана на размер
01:09:48
мисс именно
01:09:50
получается видимая область
01:10:06
границы можно до создавать
01:10:09
различные фигуры посмотрите
01:10:53
in each можно только в css лук
01:10:55
а теперь с указанием стимул
01:10:58
так у нас есть урок по вставке
01:11:01
изображению пересмотрите этот роб
01:11:09
этот настройка глаз настройка на его в
01:11:13
скотт то настройка смочив word врата к
01:11:16
настройкам ваша река на google как у
01:11:18
руля
01:11:22
and image
01:11:24
до этого еще не пошли потерпите
01:11:34
вск
01:11:36
ведь не могу найти и могу найти причину
01:11:39
удалите с полным жестким очищением в из
01:11:43
кода в google она без диабете я поиск
01:11:47
полное очищение в скот и там будут папки
01:11:51
которые прям жестко надо вручную
01:11:53
почистить удалить и после этого заново
01:11:57
установить в склад
01:12:08
два дисплея flexo еще не дошли
01:12:11
это
01:12:17
а затем вам
01:12:20
у для всех классов одинаковые
01:12:23
на сайте
01:12:25
разные элементы у каждого элемента будет
01:12:27
свои вот чтобы
01:12:28
и каждому элементу надо будет
01:12:30
прописывать каким-то родителям мы будем
01:12:33
что-то прописывать некоторым мы будем
01:12:36
отдельно прописывать
01:12:54
ради выкупа
01:12:55
м
01:13:05
что вы имели ввиду сам
01:13:07
как можно
01:13:08
делить код и переместить
01:13:12
в другой файл другой файл можно вырезать
01:13:16
выделить вырезать вставить
01:13:41
если у вас css не работает
01:13:44
css папку или файл не попал в архив вам
01:13:49
нужно нужно архивировать весь корневой
01:13:51
файл
01:13:57
так
01:13:59
и для чтобы какой-то участок просто
01:14:03
выделить быстро комментариями нажимаете
01:14:06
kontrol из лыж
01:14:08
это где рядом с буквой u да стоит
01:14:12
на клавиатуре
01:14:38
давайте дадим слово кто поднимает руку
01:14:50
перизат
01:15:02
так даже уже есть
01:15:05
мадина мчс и просто там была дома у меня
01:15:17
демонстрация
01:15:50
скажите но не
01:15:53
организатор отключил друга твой
01:15:58
организаторы тщательно страхи открытую
01:16:00
часть
01:16:15
а имбово
01:16:26
уже дагестан
01:16:28
эспандером грм ford иначе
01:16:36
то есть надежда нормалам с визуальными
01:16:44
стандарта вредный monster
01:16:48
высадка надо
01:16:53
тала was once i can экран долго чудо
01:16:57
[музыка]
01:17:02
с pandas панда лягушек sens
01:17:07
виден
01:17:13
комментировать ландау л.д.
01:17:21
0 комментировать труб для раза 10 мл .
01:17:28
инга
01:17:29
так спонтанно элементы
01:17:32
margin 1 алмаз пикси
01:17:37
он
01:17:38
а
01:17:41
абляция
01:17:44
old мышь пиксель длинный день
01:17:46
закрывающий рекомендует
01:17:48
продал 3 а потом на
01:17:55
так
01:17:58
[музыка]
01:18:03
ну да наш любого
01:18:07
та пуля цанги мир правах алторана
01:18:12
не тысячи изучайте црк синий слой видкон
01:18:18
для html даты hercules
01:18:21
и что мало домбай
01:18:30
спа спа нам на спам
01:18:34
чего хлам пробил вы уж клипе
01:18:38
лег на браузер данный спектр элемент
01:18:42
тачки другой выбор саммерс понга лайзл
01:18:44
свой стол и применяться перес панда на 7
01:18:46
троен элемент как осинами свой стол их
01:18:49
принимать zepter посмотреть код до реки
01:18:57
люблю шариками чем гошко
01:19:02
зайчик ворота на коврах мат
01:19:09
belay
01:19:19
сиддик из пандарен
01:19:22
начинали тропах суть-то нашего момент
01:19:24
большого взрыва
01:19:25
[музыка]
01:19:28
и прими охватывает весь в ссср
01:19:51
с
01:20:08
так еще какие есть вопросы
01:20:18
wife сервера если не работает
01:20:21
взяться саун рдт blackberry ничего
01:20:24
шариков у тебя зовут вам файл умираешь
01:20:25
тема файл в html файл домашка alive
01:20:29
сервере что ведь оторвал бы соболь к
01:20:33
маше календарь в высоту удаление хайра
01:20:36
установка луку роу людей birinci
01:20:38
приложения расширение на новинки
01:20:41
удаления рукой курган
01:20:47
вечность
01:20:49
тамаго и не суметь этот
01:21:51
айзада с
01:21:53
дай повод класс старым намного плод
01:21:58
кластере получается демона берли а то
01:22:02
еще молдовы спектру have a нам бордовым
01:22:05
выбираете пишу фильм какой-то
01:22:06
определенные белели
01:22:08
передать то наволочки следует мурашек
01:22:10
элементы год вперед а fargo уж эрик от
01:22:13
target танола лице сыска мир свой ствол
01:22:17
орудия задан метод того джонс или класс
01:22:21
торчу мед стороны шелка starbound
01:22:23
consoles под корабль серёжку труб от
01:22:25
лапушка
01:22:38
так осталось чуть-чуть друзья еще и
01:22:42
только важных свойств которые можно
01:22:45
просмотреть как теория а потом мы же
01:22:48
можем приступать к реальные вышки
01:22:52
ну остальные свойства в по мере каждого
01:22:55
урока будете просто доучиваться из книги
01:22:58
я вам просто буду показывать на реальном
01:23:02
примере как мы как им например uber стою
01:23:07
що теперь мое время истекает друзья я
01:23:11
передаю слово от про такой записью по
01:23:14
футболу

Описание:

Инстаграм: https://www.facebook.com/unsupportedbrowser YouTube канал: https://www.youtube.com/channel/UCkqBf3GCgrfO0innMSJm_jg Видео тууралуу маалымат жазылат:

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "Урок № 13. Поля, отступы, границы"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "Урок № 13. Поля, отступы, границы" выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "Урок № 13. Поля, отступы, границы"?mobile menu icon

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

mobile menu iconКак скачать видео "Урок № 13. Поля, отступы, границы" на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "Урок № 13. Поля, отступы, границы"?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "Урок № 13. Поля, отступы, границы"?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

  • Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.