Свойства блоков. CSS padding. CSS margin. CSS display. Уроки CSS HTML JS. Урок №7

Свойства блоков. Отступы размеры характеристики. Уроки CSS HTML JS. Урок №7
Продолжаем учить CSS и сегодня начинаем говорить о свойствах блоков. А именно об отступах, размерах и характеристиках.

🔴 Весь плейлист с уроками по HTML CSS JS верстке:

Содержание:
00:00 Настройка файлов к работе
01:10 padding - внутренний отступ блочных тегов
05:45 margin - внешний отступ блочных тегов
07:45 width - устанавливает ширину блочных тегов
11:04 max-width - устанавливает максимальную ширину блочных тегов
12:24 min-width - устанавливает минимальную ширину блочных тегов
15:09 height - устанавливает высоту блочных тегов
16:50 max-height - устанавливает максимальную высоту блочных тегов
18:03 min-height - устанавливает минимальную высоту блочных тегов
19:23 ВАЖНО! Свойство box-sizing - расчёт размеров блочных тегов. Значения этого свойства указывают, влияют ли отступы и границы на размеры блочных тегов.
22:12 overflow - управляет отображением содержания блочного элемента
24:24 display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. (Наример, делает из строчного элемента блочный и наоборот)
29:48 Шпаргалка по свойствам этого урока
30:32 Домашнее задание

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка

[tuoktsf]

Женя, у тебя уроки построены грамотнее, чем в А самое лучшее, это реакция на обратную связь.

[myroadmalankajosef]

Я сам из Украины, но буду писать на русском, так как здесь много людей из России. Значит по домашке.
1. На макете есть текст помещенный в теги. Только текст надо разместить вам на странице. А в редакторе (sublime text 3, brackets и т.д.) сам текст надо обернуть в указанные в домашке теги.
2. Каждый урывок текста это своего рода блок. Если в Avocode или Photoshop навести на него курсор, то видно рамки этого блока. То есть, работайте с этими блоками, как Женя учил в уроке. Думайте! Мне очень понравилось display: block; и display: inline-block;
3. В каждом селекторе укажите свойство border внизу, чтоб видеть границы. Потом это уберете в конце.
4. На рабочей странице, в браузере, ну типа когда открываете, чтоб посмотреть, что натворили нажмите F12 или Fn+F12 на ноуте и вы увидите свой код. Когда мышкой ставите на свои теги, то вы классно видите границы каждого блока и стилизацию. Мне это очень помогало.
Делюсь с вами моими наработками.
Не благодарите)

[svitlanasvitlana]

Цілий урок конспектувала, а в кінці ви сказали, що залишили вже готовий конспект, мене дуже здивувало, що вам не жаль свого часу аж так допомагати людям. Підносите як на блюдці. Навчаюся з вами далі

[eiwyewf]

Реально чувствуется по голосу насколько человек увлечен тем что делает и насколько кайфует от этого.
Женя, благодарю тебя за твой труд и время которое тратишь на все эти уроки!! Ежедневно занимаюсь по твоим урокам.
Со своей стороны твоим каналом поделился уже с 6-ю друзьями, по-любому в будущем буду рекомендовать ещё для тех кто будет спрашивать о подобном.
как всегда ПАЛЕЦ ВВЕРХ!!!
Удачи в работе, здоровья тебе и твоей семье!!!

[vercringer]

Очень хорошо, что ты записываешь конспект в текстовый файлик :)

[yuriilukianovych]

Тайм-коды, если нужно быстро что-то найти:

00:00 Настройка файлов к работе
01:10 padding - внутренний отступ блочных тегов
05:45 margin - внешний отступ блочных тегов
07:45 width - устанавливает ширину блочных тегов
11:04 max-width - устанавливает максимальную ширину блочных тегов
12:24 min-width - устанавливает минимальную ширину блочных тегов
15:09 height - устанавливает высоту блочных тегов
16:50 max-height - устанавливает максимальную высоту блочных тегов
18:03 min-height - устанавливает минимальную высоту блочных тегов
19:23 ВАЖНО! Свойство box-sizing - расчёт размеров блочных тегов. Значения этого свойства указывают, влияют ли отступы и границы на размеры блочных тегов.
22:12 overflow - управляет отображением содержания блочного элемента
24:24 display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. (Наример, делает из строчного элемента блочный и наоборот)
29:48 Шпаргалка от Евгения по свойствам этого урока
30:32 Домашнее задание

[custercuster]

ахахахах, я сижу весь урок, скрупулезно конспектирую каждое слово, Эвгений в конце видео: "для того, чтобы тебе не пришлось..."...
P.S.: "Щиро вдячний за твiй контент)"

[NickBardier]

Ты когда все это рассказываешь, у тебя аж глаза горят. Респект тебе!!!

[occamsr]

Октябрь 2022.
Начали курс группой.
Спасибо, что оставил русскоязычный контент.
Объясняешь весьма доходчиво и структурировано.

[winsol]

Приветствую Женя. Всем кто смотрит это. Советую пересматривать все по
2 - 3 раза, потом будет все понятно)

[tjhkxtc]

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

[landfathich]

пхахпах такой каеф было весь урок записывать а в конце услышать "можешь не записывать, всё в файле есть"))

[sychunya]

Настроение было отвратительное, но тем не менее села за урок, чтобы не пропускать и заниматься регулярно
Даже настроение повысилось, спасибо вам за уроки! Вы отлично объясняете материал!

[Syuzi.Surprises]

Благодарю, зашел вспомнить пару терминов :)
-Засчет тебя я уже стал WEB Junior Front-end programming :)

[kwqzebd]

Евгений жму руку! твои видео как глоток чистого воздуха на просторах интернета.

Отличная мудрость "живи, а работай в свободное время". Найти работу по душе - так с предидущего предложения останется только одно слово)
Спасибо за уроки.

[BohdanH]

Просто бомбезні уроки!!!! Наскільки мені відомо, в Ужгороді вже 2 року жодна компанія не організовувала курсів для бажаючих працювати в IT. А всі онлайн курси, які мені зустрічались зорієнтовані на заробітку. А тут Женя викладає матеріал в настількі доступній формі, що неможливо щось не зрозуміти. Та ще й безкоштовно!!! Величезне дякую, лайк, підписка. 👨‍🎓👏

[Sweet_and_joy]

ДЛЯ ТЕХ, КТО НЕ ПОНЯЛ НА 19:23

При отключении BOX-SIZING в CSS: общая ширина

Пример: общая ширина

При включенном BOX-SIZING в CSS: общая ширина блока=width+margin (padding и border входят внутрь ширины width, поэтому и не учитываются)

Пример: общая ширина где ширина (500=20+20+1+1+458)

[feliks_iron]

Отдельный кайф - это твои картинки...🤠

[lupodimarel]

Плохо что на youtube нельзя два раза поставить лайк ! Спасибо огромное вам !