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

Рет қаралды 27,793

5 жыл бұрын

Second Channel - / annablok
Examples:
- codepen.io/anna_blok/pen/LvVgOq
- codepen.io/anna_blok/pen/vMJbav
- codepen.io/anna_blok/pen/YMxBjR
- codepen.io/anna_blok/pen/oOemMM
- codepen.io/anna_blok/pen/gyxqjJ
______________
Buy Frontend Book - tpverstak.ru/frontendbook
Ask a question for free - frontendhelp.me/ru
______________
Website - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak и t.me/annbloknote
Telegram Chat - t.me/tpverstakchat
______________
Course "Super Start" - tpverstak.ru/super-start/
Feedback - topic-149247708_36129364
Basic course - tpverstak.ru/training/
Advanced course - tpverstak.ru/training-profi/
Feedback - topic-149247708_35960122

Пікірлер: 73

@user-en3zg3lk9v 4 жыл бұрын

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

@annblok_webdev 4 жыл бұрын

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

@user-pk8gk1nl8k 5 жыл бұрын

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

@annblok_webdev 5 жыл бұрын

😊😊😊

@olehkis4787 5 жыл бұрын

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

@justspartak 5 жыл бұрын

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

@bytheway3876 3 жыл бұрын

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

@opentheworlds3229 4 жыл бұрын

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

@ms.botanick3677 Жыл бұрын

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

@tasha18.12 Жыл бұрын

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

@Tim-Ilim 4 жыл бұрын

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

@pavelzhol 4 жыл бұрын

!respect

@dmitrijponkin 5 жыл бұрын

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

@farxodxamidov2102 3 жыл бұрын

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

@annblok_webdev 3 жыл бұрын

😌😌😌

@zhenikosha Жыл бұрын

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

@user-cm1pn5qq9q 5 жыл бұрын

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

@user-cb5xj1lg1l 5 жыл бұрын

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

@tovjukov 4 жыл бұрын

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

@mykhaylolytvynov5369 3 жыл бұрын

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

@tawt6260 4 жыл бұрын

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

@tuRistst 4 жыл бұрын

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

@mrsuhrob1334 4 жыл бұрын

Ann you are best

@user-lh7ti3hb2b 2 жыл бұрын

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

@mrsuhrob1334 4 жыл бұрын

Thanks

@user-gx7gk2ku1h 5 жыл бұрын

Прелесть)

@yarik83men51 4 жыл бұрын

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

@JIeXaG 2 жыл бұрын

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

@Tigran5233 3 жыл бұрын

1000-й лайк :)

@pogrebnoimaksim 5 жыл бұрын

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

@Tim-Ilim 4 жыл бұрын

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

@Freelancer19841 4 жыл бұрын

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

@DKenny288 Жыл бұрын

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

@dobrydyadka 5 жыл бұрын

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

@annblok_webdev 5 жыл бұрын

Сама

@singlebw4065 4 жыл бұрын

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

@Tornado-ln7fq 2 жыл бұрын

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

@Buzzilio_ 5 жыл бұрын

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

@j-lewis 3 жыл бұрын

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

@user-kk1mj4jt2f 3 жыл бұрын

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

@neins 5 жыл бұрын

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

@houston9114 4 жыл бұрын

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

@neins 4 жыл бұрын

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

@houston9114 4 жыл бұрын

@@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 4 жыл бұрын

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

@NG-gz9ly 5 жыл бұрын

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

@annblok_webdev 5 жыл бұрын

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

@NG-gz9ly 5 жыл бұрын

@@annblok_webdev спс

@BearVodkaAndValenki 5 жыл бұрын

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

@eremey1760 7 ай бұрын

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

@progerlife6690 5 жыл бұрын

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

@systemconnect3096 5 жыл бұрын

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

@annblok_webdev 5 жыл бұрын

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

@vittoverseti8296 Жыл бұрын

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

@mikrotik_joomla Жыл бұрын

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

@eugenefedoryachenko8793 5 жыл бұрын

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

@annblok_webdev 5 жыл бұрын

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

@karmahchannel 5 жыл бұрын

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

@TakeYourDickAwayWalter 3 жыл бұрын

Зашел на ролик, чтобы узнать все о единицах измерения, но начав смотреть, понял, что прошла 2 минута, а кроме лица милой девушки, ничего не помню. Осознал, что любуюсь ею. Пришлось взять себя в руки)

@user-el7jj6qd3m 3 жыл бұрын

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

@Genussz 3 жыл бұрын

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

@VasyaStone8oy 5 жыл бұрын

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

@user-no3rr2wk2g 5 жыл бұрын

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

@murrmax1466 3 жыл бұрын

пёдинг

@Sward66 2 жыл бұрын

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

@xenus86 5 жыл бұрын

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