CSS units for padding / margin / width / height: px, %, em, rem, vw, vh, vmin, vmax

Поділитися
Вставка
  • Опубліковано 1 січ 2025

КОМЕНТАРІ • 73

  • @АндрейИванов-с7ц3щ
    @АндрейИванов-с7ц3щ 4 роки тому +9

    Ни на одном канале нет информации про единицы измерения так подробно. Очень интересно. Анна, спасибо!

    • @annblok_webdev
      @annblok_webdev  4 роки тому +1

      Я рада, что вам понравилось 🤗

  • @АлександрМельник-ч3ь
    @АлександрМельник-ч3ь 5 років тому +12

    спасибо. В который раз убеждаюсь, что мало просто знать, нужно уметь преподавать. А у Вас этот дар есть. И хотя я больше backend разработчик, но смотрю с удовольствием и англоязычному каналу тоже рад.

  • @FantonTim
    @FantonTim 5 років тому +16

    Спасибо, не думал, что так важно знать единицы изменения! Сразу видно, что не скопировала темы на других курсах)) respect!

  • @tasha18.12
    @tasha18.12 2 роки тому +1

    Спасибо, стало понятнее как использовать эти единицы измерения

  • @ms.botanick3677
    @ms.botanick3677 2 роки тому +1

    Анна спасибо огромное. Так приятно после JS вернуться к грамотному CSS

  • @opentheworlds3229
    @opentheworlds3229 4 роки тому +2

    Кратко, понятно, по делу и с примерами) Гораздо понятнее чем читать статью) Спасибо)

  • @zhenikosha
    @zhenikosha Рік тому

    Спасибо, Анна, очень славно, наконец понял почему все так.

  • @bytheway3876
    @bytheway3876 3 роки тому +1

    Анна, спасибо за видео

  • @justspartak
    @justspartak 5 років тому +3

    Спасибо! Очень хороший канал, подписался.

  • @farxodxamidov2102
    @farxodxamidov2102 4 роки тому +1

    Спасибо вам большое за канал, вообще за труд 🙏

  • @mykhaylolytvynov5369
    @mykhaylolytvynov5369 3 роки тому

    Гороздо лучше и понятнее чем предыдущий ролик!

  • @olehkis4787
    @olehkis4787 5 років тому +2

    Супер, как раз в тему!

  • @ИкромХасанбаев
    @ИкромХасанбаев 3 роки тому +1

    ухххх, девушки с ошейниками прекрасны

  • @pogrebnoimaksim
    @pogrebnoimaksim 5 років тому +3

    Анна, уже смотрю какой по счету ролик и замечаю как фокус в видео буквально сходит с ума и постоянно прыгает на полке которая на заднем плане, я так думаю это из за мигающей гирлянды, установите фиксированный фокус чтоб не было таких прыжков, и еще... та голая кукла на фоне в плавках... неужели она так необходима в кадре??))))

    • @FantonTim
      @FantonTim 5 років тому

      Фокус прыгает, потому что не получается записать одним дублем

  • @progerlife6690
    @progerlife6690 5 років тому +4

    Глаза красивые! И слушать приятно!!)Лайк)

  • @eremey1760
    @eremey1760 Рік тому +1

    видиАААролика видиАААролика видиАААролика видиАААролика видиАААролика

  • @ИванПахомов-т6о
    @ИванПахомов-т6о 5 років тому

    И интересно, и полезно, заслуженный лайк.

  • @Freelancer19841
    @Freelancer19841 4 роки тому +1

    Ролик отличный и я поставил лайк, но в нём не было примера по VH, а это именно то, что я искал.

  • @Tornado-ln7fq
    @Tornado-ln7fq 2 роки тому

    А чтобы не было проблем,как с стороны заказчика,и с стороны колек по цеху,используйте px ,и будет вам счастья.

  • @mikrotik_joomla
    @mikrotik_joomla Рік тому

    Ощущение что Анна Блок не реальная девушка, а сгенерированная нейросетью...

  • @dmitrijponkin
    @dmitrijponkin 5 років тому

    Спасибо! Круто: )

  • @vittoverseti8296
    @vittoverseti8296 2 роки тому

    А зачем вуот этотш энглиуский акчент: мёёджин пэээдинг, бодее-рэдиус

  • @singlebw4065
    @singlebw4065 5 років тому

    vw vmax вроде бы удобно, но если пытаться увеличить увеличивать страницу, то ничего не увеличивается

  • @tuRistst
    @tuRistst 5 років тому

    Отличная прическа! :)

  • @АхмедЯндиев-ъ4м
    @АхмедЯндиев-ъ4м 3 роки тому +1

    В шкафу мой Мой кумир стоит

  • @ДокторнаПриколе
    @ДокторнаПриколе 5 років тому +2

    Благодарчка!

  • @tovjukov
    @tovjukov 5 років тому +1

    Интересно-интересно.

  • @DKennyBSK
    @DKennyBSK 2 роки тому

    Я из 2022. Смотрю и просвещаюсь)

  • @tawt6260
    @tawt6260 5 років тому

    вообще молодец=)

  • @mrsuhrob1334
    @mrsuhrob1334 5 років тому

    Ann you are best

  • @systemconnect3096
    @systemconnect3096 5 років тому +4

    так ничего и не сказано про vw и vh. и. в каких случаях нужно использовать такие значения. так что тема видоса не раскрыта(

    • @annblok_webdev
      @annblok_webdev  5 років тому +1

      О них было сказано больше в первом видео. Смотрите внимательнее.

  • @Buzzilio_
    @Buzzilio_ 5 років тому +2

    height = хайт, а не хейт = hate (ненависть)

    • @j-lewis
      @j-lewis 3 роки тому +1

      Да кстати, довольно распространённая ошибка у славян. Читают слова как они пишутся, но в английском это не всегда работает.

  • @yarik83men51
    @yarik83men51 5 років тому +3

    Интересно. Подписался на Ваш канал...

  • @JIeXaG
    @JIeXaG 3 роки тому

    Спасибо! Симпотяшка)

  • @Anatoliy_Tabakov
    @Anatoliy_Tabakov 4 роки тому +1

    1000-й лайк :)

  • @dobrydyadka
    @dobrydyadka 5 років тому

    А на втором канале ты сама текст переводишь или есть специальный человек? :)

  • @neins
    @neins 5 років тому

    То есть, как я правильно понял, em всегда привязана к font-size и зависит только от него?

    • @houston9114
      @houston9114 5 років тому

      em - единицы измерения, зависящие от родительского блока

    • @neins
      @neins 5 років тому

      @@houston9114 каким образом, объясните мне пожалуйста; в чем тогда отличие от % (измерение тоже же берется от родительского)? Нормальной инфы по эм и рэм я не смог нагуглить

    • @houston9114
      @houston9114 5 років тому

      @@neins как я понял, em - берётся от родителя, т.е. body { font-size: 16 px}; div {font-size: 10px}; div p{ font-size: 2em}, т.е размер шрифта в параграф вложенном в div будет 10 px * 2em = 20 px, rem - берётся от корня элемента (обычно указывают html{font-size: (размер в px
      или %, чаще всего), например, 20 px}; div{ font-size: 2rem}; div p{font-size: 0.5 rem}, т.е размер шрифта в div будет 20px * 2 = 40px, размер шрифта у div p будет 20 * 0,5 = 10px. Но вот эти единицы измерения всякие надо применять к определённым ситуациям, тк не все адаптируются, хотя все пишут обратное , адаптируются только, как я заметил, %, vw, vh(кажется так пишутся), возможно, если применять calc(), то тогда и em, rem и даже px будет адаптироваться, но я ток учусь, поэтому насчёт адаптации px с помощью calc() могу ошибаться

    • @neins
      @neins 5 років тому

      @@houston9114 ну вот вы вначале на мой вопрос о привязке к font-size ответили что привязка идет к размерам родительского блока, а сейчас показываете на примерах что привязка все таки берется не от размеров родителя а от размера font-size, в общем я запутался. Так то приведенные примеры мне понятны, просто нет однозначной информации о привязке к fz и такая же путаница как и сейчас в итоге

  • @ДмитрийЛегостаев-р9ш

    Кажется, проценты не упомянули

  • @Vasya_Stone8oy
    @Vasya_Stone8oy 5 років тому +4

    Анна роняет запад!

  • @NG-gz9ly
    @NG-gz9ly 5 років тому

    Посоветуйте книги про верстку

    • @annblok_webdev
      @annblok_webdev  5 років тому

      Если интересуют только азы для старта, то сначала читай "Изучаем HTML, XHTML и CSS" от Фримена, после "CSS для профи" от Кит Грант.

    • @NG-gz9ly
      @NG-gz9ly 5 років тому

      @@annblok_webdev спс

    • @BearVodkaAndValenki
      @BearVodkaAndValenki 5 років тому +1

      Lea Verou, "секреты css".

  • @АндрейЧ-ы3й
    @АндрейЧ-ы3й 4 роки тому

    Как это не странно, но height в % работает не всегда!

  • @xenus86
    @xenus86 5 років тому +5

    Лучше убери это пугающее звуковое оформление при показе логотипа. Подбери что-нибудь спокойное, ближе к it, а не к фильмам ужасов :) И еще, ты неправильно произносишь некоторые слова. Например, task: правильнее - "таск", а не "тэск" (кстати, черный - блак). Height - "хайт". Впрочем, все это легко проверяется практически в любом электронном переводчике.

  • @eugenefedoryachenko8793
    @eugenefedoryachenko8793 5 років тому

    перезалив или я что-то путаю?

    • @annblok_webdev
      @annblok_webdev  5 років тому +2

      Вторая часть видео на эту тему. Первая не была окончена.

  • @ЛёняПушкин-г9р
    @ЛёняПушкин-г9р 5 років тому

    Прелесть)

  • @Genussz
    @Genussz 4 роки тому

    хэйт???? Чей диалект?

  • @mrsuhrob1334
    @mrsuhrob1334 5 років тому

    Thanks

  • @МихаилВикторович-р2я
    @МихаилВикторович-р2я 5 років тому +2

    top, left, bottom и right))

  • @Прикольноепроектноепрограммиро

    И чем людям пиксели с процентами не угодили? Em-ы какие-то... Да, за видос спасибо!

  • @murrmax1466
    @murrmax1466 4 роки тому +1

    пёдинг

    • @Gazon1155
      @Gazon1155 3 роки тому

      мёрджин (режет без ножа)

  • @denieldell2904
    @denieldell2904 2 роки тому

    я ни понил

  • @karmahchannel
    @karmahchannel 5 років тому

    Александр Блок, ваш родственник

  • @ShocKKKKKKK
    @ShocKKKKKKK 5 років тому

    Но я же не англичан, ничего понимать не буду))

  • @Бойправ-ж8ы
    @Бойправ-ж8ы 4 роки тому +2

    Не порть русский язык. английские слова говори нормально - по русски, без шепелявления.

    • @cyraxkillallx6677
      @cyraxkillallx6677 4 роки тому

      Не гони, ты пришел весточку чить или русский язык?

    • @j-lewis
      @j-lewis 3 роки тому

      "Говори английские слова по-русски" Wait what, what the...?! У меня на этой фразе BSOD случился.