CSS3 #6 Блочная модель и отступы (Box Model, Padding & Margin)

  Переглядів 21,127

webDev

webDev

3 роки тому

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ UKposts: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

КОМЕНТАРІ: 47
@Nikitosss91
@Nikitosss91 3 роки тому
Если рай существует, Женя, ты туда попадешь без очереди. Пс. После CCS нужен курс по Гиту, во это тема была бы. У Минина есть, но там как обычно..
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо за отзыв. Git есть в планах, пока думаю над идеей реализации
@yevhenkorotych6038
@yevhenkorotych6038 Рік тому
Евгений, благодарю за очередной урок. Вас очень приятно смотреть и слушать. Ваша речь очень продуманна и чиста, ни одного лишнего слова🙂
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо большое
@zzicman
@zzicman Місяць тому
спасибо за видео) все доступно понятно, без '''воды''
@YauhenKavalchuk
@YauhenKavalchuk Місяць тому
Всегда пожалуйста
@EugenySubbotin
@EugenySubbotin Рік тому
про блочную модель подробно, полно и ничего лишнего! шикарные уроки!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@VaLeria-ow9zw
@VaLeria-ow9zw Рік тому
Спасибо за урок! Все четко и по полочкам!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-ne2hp2cs5i
@user-ne2hp2cs5i 3 роки тому
Спасибо за лучшие курсы по фронтенду на ру ютубе! Очень понятно и качественно все организованно. 4:04 перепутаны цвета бордер и марджин. Бордер красный, а не желтый. А марджин желтый, а не красный)
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо за отзыв. Да нет, всё верно сказал. Это я имел ввиду блочную модель
@posadcom
@posadcom 2 роки тому
Так тайминг 4:04 Это пасхалка :D
@eugenia9999
@eugenia9999 3 роки тому
Приветствуем, Евгений !!)) спасибо огромное за видео!!))
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста)
@antontyronchik496
@antontyronchik496 2 роки тому
Суперинформативно! Спасибо Женя
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Пожалуйста)
@pavelkruglik5346
@pavelkruglik5346 3 роки тому
Спасибо! Полезно повторить!
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
👍
@donstacky
@donstacky Рік тому
С каждым уроком чувствую себя все более уверенным в себе маслёнком 💪
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@olehyefimenko6693
@olehyefimenko6693 Рік тому
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@Tornado-ln7fq
@Tornado-ln7fq 2 роки тому
Наконец то,нашел человека который правильно объясняет ,слава богам).Да без понимания блочной модели ты верстать не сможешь,это как воздух, это самый главный аспект для верстальщика.
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
👍
@user-xd7vj5cf9f
@user-xd7vj5cf9f 3 роки тому
Лайк за труд
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо
@kr4a6ne
@kr4a6ne 2 роки тому
Интересно! Получается, разница в box model - это у кого больший приоритет в плане сохранения заданного размера? В одном случае - приоритет border, в другом - content?
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Нет, это свойство которое помогает задать алгоритм рассчёта размеров
@user-uu5jx4pc3x
@user-uu5jx4pc3x Рік тому
Спасибо за урок! Скажи пожалуйста(Вопрос не по теме), только начинаю изучать css , можешь посоветовать примеры простых сайтов которые можно сверстать самому ,чтобы понимать как все это работает.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Да просто введите webpage PSD Free templates, выбирайте что вам нравится и верстайте
@user-uu5jx4pc3x
@user-uu5jx4pc3x Рік тому
@@YauhenKavalchuk спасибо)
@user-wq2oq8st1u
@user-wq2oq8st1u 2 роки тому
8:33 очень странно, я проверил в Хроме и ФФ, по умолчанию у меня показывает border-box, а не content-box.
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Возможно в новых версиях браузеров свойство изменили
@user-nu8yp4qs7x
@user-nu8yp4qs7x 2 місяці тому
5:07 у обеих margin по 10 px что значит большему marginy?
@YauhenKavalchuk
@YauhenKavalchuk Місяць тому
То есть, если два элемента с разными margin стоят рядом. То суммарное расстояние между ними будет равно большему margin. И следующим примером я это показываю
@rimavedeckiene2203
@rimavedeckiene2203 8 місяців тому
Very difficult ..I did't undestand this lesson😢😢 I will tray tomorrow,becose it's important!
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
Good luck
@accoladed
@accoladed 6 місяців тому
Не до конца понял про инлайн-блок. Зачем элетементу придавать такое свойство? В чем преимущество инлайна перед блоком в данном случае? Чтобы он не занимал всю строчку но мог иметь отступы снизу и сверху?
@user-wm3ww3su6w
@user-wm3ww3su6w 2 місяці тому
С помощью инлайн-блок можно например несколько div отобразить на одной линии, т.е. в строку
@nouchance
@nouchance 3 роки тому
Просто лучший! Лайкосик +666💪✊👍
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо)
@aleksandrkozowski9717
@aleksandrkozowski9717 2 місяці тому
Пуля
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
Спасибо за отзыв
@alexeymarkvart
@alexeymarkvart 3 роки тому
не понятно зачем так много различных отступов для элемента.
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Как только начнёте верстать самостоятельно, всё сразу станет на свои места. Лишних элементов нет, каждый нужен для конкретных визуальных целей
@stass3251
@stass3251 3 роки тому
@@YauhenKavalchuk а как понять когда начинать верстать? После изучения Ваших курсов html, css basic получиться сверстать что то похожее на сайт? Сейчас я понимаю, что мне недостаточно знаний что бы сверстать что тот похожее на сайт.
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Переглядів 1,3 млн
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 216 тис.
HTML & CSS Урок 12. Отступы margin и padding - StudioProWeb
8:02
StudioProWeb - школа программирования
Переглядів 10 тис.