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

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

Пікірлер: 47

  • @Nikitosss91
    @Nikitosss913 жыл бұрын

    Если рай существует, Женя, ты туда попадешь без очереди. Пс. После CCS нужен курс по Гиту, во это тема была бы. У Минина есть, но там как обычно..

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    Спасибо за отзыв. Git есть в планах, пока думаю над идеей реализации

  • @zzicman
    @zzicman3 ай бұрын

    спасибо за видео) все доступно понятно, без '''воды''

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 ай бұрын

    Всегда пожалуйста

  • @yevhenkorotych6038
    @yevhenkorotych6038 Жыл бұрын

    Евгений, благодарю за очередной урок. Вас очень приятно смотреть и слушать. Ваша речь очень продуманна и чиста, ни одного лишнего слова🙂

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    Спасибо большое

  • @EugenySubbotin
    @EugenySubbotin Жыл бұрын

    про блочную модель подробно, полно и ничего лишнего! шикарные уроки!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    👍

  • @VaLeria-ow9zw
    @VaLeria-ow9zw Жыл бұрын

    Спасибо за урок! Все четко и по полочкам!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    Пожалуйста

  • @antontyronchik496
    @antontyronchik4962 жыл бұрын

    Суперинформативно! Спасибо Женя

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    Пожалуйста)

  • @user-ne2hp2cs5i
    @user-ne2hp2cs5i3 жыл бұрын

    Спасибо за лучшие курсы по фронтенду на ру ютубе! Очень понятно и качественно все организованно. 4:04 перепутаны цвета бордер и марджин. Бордер красный, а не желтый. А марджин желтый, а не красный)

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    Спасибо за отзыв. Да нет, всё верно сказал. Это я имел ввиду блочную модель

  • @posadcom

    @posadcom

    2 жыл бұрын

    Так тайминг 4:04 Это пасхалка :D

  • @pavelkruglik5346
    @pavelkruglik53463 жыл бұрын

    Спасибо! Полезно повторить!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    👍

  • @eugenia9999
    @eugenia99993 жыл бұрын

    Приветствуем, Евгений !!)) спасибо огромное за видео!!))

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    Пожалуйста)

  • @Tornado-ln7fq
    @Tornado-ln7fq2 жыл бұрын

    Наконец то,нашел человека который правильно объясняет ,слава богам).Да без понимания блочной модели ты верстать не сможешь,это как воздух, это самый главный аспект для верстальщика.

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    👍

  • @donstacky
    @donstacky Жыл бұрын

    С каждым уроком чувствую себя все более уверенным в себе маслёнком 💪

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    👍

  • @user-xd7vj5cf9f
    @user-xd7vj5cf9f3 жыл бұрын

    Лайк за труд

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    Спасибо

  • @olehyefimenko6693
    @olehyefimenko6693 Жыл бұрын

    Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    👍

  • @nouchance
    @nouchance3 жыл бұрын

    Просто лучший! Лайкосик +666💪✊👍

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    Спасибо)

  • @kr4a6ne
    @kr4a6ne2 жыл бұрын

    Интересно! Получается, разница в box model - это у кого больший приоритет в плане сохранения заданного размера? В одном случае - приоритет border, в другом - content?

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    Нет, это свойство которое помогает задать алгоритм рассчёта размеров

  • @user-uu5jx4pc3x
    @user-uu5jx4pc3x Жыл бұрын

    Спасибо за урок! Скажи пожалуйста(Вопрос не по теме), только начинаю изучать css , можешь посоветовать примеры простых сайтов которые можно сверстать самому ,чтобы понимать как все это работает.

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    Да просто введите webpage PSD Free templates, выбирайте что вам нравится и верстайте

  • @user-uu5jx4pc3x

    @user-uu5jx4pc3x

    Жыл бұрын

    @@YauhenKavalchuk спасибо)

  • @accoladed
    @accoladed8 ай бұрын

    Не до конца понял про инлайн-блок. Зачем элетементу придавать такое свойство? В чем преимущество инлайна перед блоком в данном случае? Чтобы он не занимал всю строчку но мог иметь отступы снизу и сверху?

  • @user-wm3ww3su6w

    @user-wm3ww3su6w

    4 ай бұрын

    С помощью инлайн-блок можно например несколько div отобразить на одной линии, т.е. в строку

  • @rimavedeckiene2203
    @rimavedeckiene220310 ай бұрын

    Very difficult ..I did't undestand this lesson😢😢 I will tray tomorrow,becose it's important!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    10 ай бұрын

    Good luck

  • @user-wq2oq8st1u
    @user-wq2oq8st1u2 жыл бұрын

    8:33 очень странно, я проверил в Хроме и ФФ, по умолчанию у меня показывает border-box, а не content-box.

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    Возможно в новых версиях браузеров свойство изменили

  • @user-nu8yp4qs7x
    @user-nu8yp4qs7x4 ай бұрын

    5:07 у обеих margin по 10 px что значит большему marginy?

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 ай бұрын

    То есть, если два элемента с разными margin стоят рядом. То суммарное расстояние между ними будет равно большему margin. И следующим примером я это показываю

  • @aleksandrkozowski9717
    @aleksandrkozowski97174 ай бұрын

    Пуля

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 ай бұрын

    Спасибо за отзыв

  • @alexeymarkvart
    @alexeymarkvart3 жыл бұрын

    не понятно зачем так много различных отступов для элемента.

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    Как только начнёте верстать самостоятельно, всё сразу станет на свои места. Лишних элементов нет, каждый нужен для конкретных визуальных целей

  • @stass3251

    @stass3251

    3 жыл бұрын

    @@YauhenKavalchuk а как понять когда начинать верстать? После изучения Ваших курсов html, css basic получиться сверстать что то похожее на сайт? Сейчас я понимаю, что мне недостаточно знаний что бы сверстать что тот похожее на сайт.