3. Блочная модель в CSS - свойства display, width, height, padding, margin, border и box-sizing

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 53

  • @dimedrollall1714
    @dimedrollall1714 Месяц назад +3

    Начал учить верстку, беру информацию с сайтов и с этого ютуб канала, что не понимаю там, понимаю здесь. Большое вам спасибо за ваш труд!

  • @liza_beg
    @liza_beg Год назад +3

    Спасибо за обучающий контент! Очень удобный и понятный формат. Находка!

  • @This_is_hellwood
    @This_is_hellwood Год назад +6

    Дякую, що пояснив розрахунок висоти та ширини ''pading". Бо я трішки не відстрелював :D

  • @Ivanfwit
    @Ivanfwit Год назад +3

    Очень круто, что уже упоминается, про возможное изменение контента внутри элемента, вещь вроде бы простая, но я сначала изучал материалы без понимания что так будет - и в учебных материалах это не упоминали, потом приходилось менять мышление/написание кода во многих вроде бы очевидных вещах

  • @romapavlov4420
    @romapavlov4420 4 месяца назад +3

    Пожалуй самые лучшие видеоуроки по фронту что я только видел. Очень много информации в такое количество времени. Бывает при просмотре видеоуроков становится слишком скучно, но тут такого нет. В общем пока очень нравится) Посмотрим куда приведет меня дорога приключений с таким наставником)

  • @smotritelyoutube
    @smotritelyoutube Год назад +5

    Супер, уроки пушка!!!

  • @ДиляраЗубарева-й1о
    @ДиляраЗубарева-й1о 6 месяцев назад +6

    я тугодум в плане учебы на фронтендера, но Ваши лекции мне нравятся. Стараюсь конспектировать каждую лекцию. Получается долго, но эффективно. Спасибо Вам. Надеюсь, из меня когда-нибудь получится хороший фронтендер))

    • @котпофигист
      @котпофигист 5 месяцев назад +1

      + тоже конспектирую каждое видео, эфитивность и запоминание выросли в разы)

    • @АнтошаГорохов
      @АнтошаГорохов 3 месяца назад

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

  • @Tehnokrott
    @Tehnokrott 9 дней назад +1

    Александр - Красава!

  • @АлександрБекач
    @АлександрБекач 7 месяцев назад +1

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

  • @Iwtin
    @Iwtin 4 месяца назад +3

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

  • @lucarrrg
    @lucarrrg 3 месяца назад +1

    Учусь в вузе на веб разработке и вы очень помогаете ❤

  • @alexb.2616
    @alexb.2616 Год назад +3

    За box-sizing отдельное спасибо!
    На 4:23 inline-block рассматриваем? В коде - inline-flex...

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +3

      Упс, опечатка в коде на видео. Но с inline-flex результат был бы тот же.

  • @ProgVipe
    @ProgVipe 6 месяцев назад +1

    полезные уроки!

  • @kronix249
    @kronix249 Год назад +2

    Решил влиться в фронтенд обратно спустя пол года простоя) Хочется потом увидеть видео про новые фичи css, которые за последнее время добавили. Видел, что теперь даже добавили функционал препроцессоров в синтаксис .test{ :&{} } :D

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +7

      Привет! Да, так называемый «нестинг», но эта фича пока что поддерживается не очень хорошо.
      Вообще, я расскажу обо всех фичах CSS, но последовательно. Сначала основы, затем будем углубляться.

    • @kronix249
      @kronix249 Год назад +3

      @@AleksanderLamkov спасибо, реально очень нравится ваша подача. Так держать 💪

  • @pablo_barnes7329
    @pablo_barnes7329 6 месяцев назад +1

    Супер!

  • @sv2234sv
    @sv2234sv Год назад +4

    Планируются ли в дальнейшем какие-то домашние задания на закрепление пройденного материала? В одном уроке задать задание, а в начале следующего урока дать ответ

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +9

      В этой версии курса, к сожалению, нет.
      Пока что моя задача - показать возможности технологии, по максимуму актуализируя информацию под современные реалии фронтенда и добавляя комментарии о нюансах из собственного опыта.
      Разумеется, просто смотреть - мало, нужна практика. Надеюсь, что смотрящие этот курс хотя бы экспериментируют с собственным кодом из изучаемых тем :)
      Вообще, после этого курса сразу пойдут различные мастер-классы, где я и макет предоставлю для разбора, и бест-практис на видео покажу.
      Но идея про ДЗ хорошая, возьму на заметку на будущую версию курса. Спасибо!

  • @darlindtryhgbvgft
    @darlindtryhgbvgft 5 месяцев назад +1

    спасибо

  • @Kino_moment_official
    @Kino_moment_official Месяц назад +1

    почему когда вы объясняли что такое display: inline-block; вы в своем коде поставили значение display: inline-flex;
    ?

    • @AleksanderLamkov
      @AleksanderLamkov  Месяц назад +1

      Опечатка. Спасибо, что заметил!

  • @lanalezhava-j1i
    @lanalezhava-j1i 3 месяца назад +1

  • @ksm9205
    @ksm9205 29 дней назад

    Не могу определить: свойство outline не входит в блочную модель CSS потому что никак не влияет на размеры? Или есть какие-то другие причины? Есть какая-то строгая спецификация в отношении блочной модели или блочная модель - это условная абстрактная вещь?

    • @AleksanderLamkov
      @AleksanderLamkov  29 дней назад

      Верно, свойство outline не берётся в расчет ни при каких обстоятельствах при формировании размеров элемента.

  • @svitboomer8840
    @svitboomer8840 Год назад +2

    Мини блиц-опрос Vue | React | Angular? 🤔

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +6

      - ванильный JavaScript!
      **мем с ослом из шрека**

    • @programisttj
      @programisttj 9 месяцев назад

      Vue.js

  • @svitboomer8840
    @svitboomer8840 Год назад +2

    А ты будешь устраивать что-то вроде live-кодинга? Ну или, например, показывать мастер-класс верстки какой-то страницы? По тебе видно, что ты понимаешь о чем говоришь, и я думаю, что многим было бы полезно, лично мне ещё и дико интересно, хотя понимаю, что такой формат не всем нравится из-за долгого просмотра

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +7

      Обязательно будет такой контент. Ближайший план: окончить курс по CSS => поверстать разного уровня сложности макеты в формате мастер-классов => рассказать о БЭМ, средствах автоматизации (препроцессоры, сборщики, шаблонизаторы) => ещё несколько мастер-классов со всеми перечисленными плюшками. Ну а затем JS и дальнейшее погружение в разработку.

    • @svitboomer8840
      @svitboomer8840 Год назад +1

      @@AleksanderLamkov Ты что планируешь подготовить поколение web senior-программистов? 😄

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +3

      Что-то вроде того!)

    • @alexb.2616
      @alexb.2616 Год назад +2

      @@AleksanderLamkov шикарный план!

  • @линакондратьева-е4о
    @линакондратьева-е4о 11 месяцев назад

    а почему вы про display: flex; ничего не сказали?

  • @pacanchik2013
    @pacanchik2013 Год назад +1

    4:56 что значит не анимируется? animation и @keyframes - запросто анимируется, при условии что изначально у элемента стоит display:none;

    • @AleksanderLamkov
      @AleksanderLamkov  Год назад +2

      Под анимацией я имею в виду плавное изменение состояния из "А" в "Б". У свойства display между значениями none и условным block нет промежуточных значений. А у opacity - есть.
      Новички зачастую пытаются добавить плавное исчезновение / появление элемента, оперируя свойством display, однако само по себе это работать не будет.
      Если в ключевом кадре заюзать display none, то без связки с opacity никакого fadeIn / fadeOut не сделать. И "анимацией" переключение дискретного свойства display с none на не-none назвать можно с натяжкой.

    • @U7uuuuuuu
      @U7uuuuuuu 2 месяца назад

      ​@@AleksanderLamkovПрофессионал своего дела!

  • @Tornado-ln7fq
    @Tornado-ln7fq 5 месяцев назад

    Маргин как Падинг, не отталкивается от других ,а от своих родителей,а их родители это элементы ,куда они были вложены. Еще кое что, маргин и падинг это невидимая рамка,маргин внешняя ,а падинг внутренняя ,и браузер учитывает их и просчитывает если они указаны. Самое главное что нужно знать,это железное правило. Маргин мы используем только для блочных элементов,а падинг строго только для строчных элементов.Это нужно знать прям железно. Маргин и падинг нужно знать и понимать,это самое самое главное,если не понимать ,как они работают,вы не сможете верстать,и будете топтаться на месте. Для того чтоб ими правильно пользоваться,нужно знать html элементы, и понимать какой из них строчный,а какой блочный.

    • @AleksanderLamkov
      @AleksanderLamkov  5 месяцев назад +2

      Не слышал о таком правиле.
      Разве margin-right для span не будет работать? А padding для div?
      Знаю только одну концепцию - «схлопывание» внешних отступов margin, когда, например, margin-bottom верхнего элемента накладывается на margin-top нижнего и в результате отступ между элементами будет равен наибольшему среди этих margin значению (а не их сумме).

    • @Tornado-ln7fq
      @Tornado-ln7fq 5 месяцев назад

      @@AleksanderLamkov Так я же и сказал что нужно знать какие элементы блочные,а какие строчные . Да можно конечно,для каждого свойства есть свое назначения.Многие новички когда начинают, поскольку не понимают что для чего,и до кучи начинают путаться,и не понимают что куда прописать,вроде можно и padding div толкнуть, а можно и margin прописать)))

  • @VEGAS_MARC
    @VEGAS_MARC Год назад +1

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

  • @darlindtryhgbvgft
    @darlindtryhgbvgft 5 месяцев назад +1

    border box изучала на 2ух каналах и ни на одном до этого не объяснили по человечески

  • @davidola1814
    @davidola1814 Месяц назад

    а можно воды побольше реально

    • @AleksanderLamkov
      @AleksanderLamkov  Месяц назад

      Сарказм? Или реально не хватает словесного мусора в объяснениях?

    • @heydrey32
      @heydrey32 10 дней назад

      @@AleksanderLamkov Я думаю не сарказм, порой быстро сказанная формулировка, без каких либо сравнений, не усваивается. Приходится отматывать и слушать заново.

    • @AleksanderLamkov
      @AleksanderLamkov  10 дней назад

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

    • @heydrey32
      @heydrey32 10 дней назад

      @@AleksanderLamkov Это лишь моё мнение, и я никак его не навязываю :)
      Просто сейчас просматривая плейлист, сталкиваюсь с этим.
      К последнему видео еще не пришел)