CSS Display свойство. Разбираем типы отображения block, inline-block, flex.

  Переглядів 42,811

temofart

temofart

4 роки тому

В этом уроке разбираемся с типами отображения в CSS, а именно с display: block, inline-block, inline, flex. Дополнительно разберем как выровнять блоки с помощью flex (justify-content, align-items). Базовые и необходимые знания
css для начинающих, которые решили стать верстальщиками или веб-разработчиками.

КОМЕНТАРІ: 132
@ultraduck100
@ultraduck100 3 роки тому
не знал, что у Мармока есть канал по верстке
@vladimirpuzey713
@vladimirpuzey713 4 роки тому
Лучшее объяснение свойства display на youtube!!
@temofart
@temofart 4 роки тому
Worcester Souse рад слышать🙂
@user-lg5ze7vd4o
@user-lg5ze7vd4o 3 роки тому
@@temofart не только на ютьюб, прохожу курсы платные там эту тему не понял, перечитал уже раз 5, а тут с одного видео все сразу стало ясно, спасибо!
@andreiBylkin
@andreiBylkin 3 роки тому
@@user-lg5ze7vd4o чьи курсы, если не секрет??
@protagonist_proradersnion
@protagonist_proradersnion 3 роки тому
ЧЕЛ,СПАСИБО ОГРОМНОЕ,ПРОДОЛЖАЙ В ТОМ ЖЕ ДУХЕ,САМОЕ ЛУЧШЕЕ ОБЪЯСНЕНИЕ ДАЛ,ЭТО ШЕДЕВР,ЖЕЛАЮ ПРОЦВЕТАНИЮ КАНАЛА!!!))Я наконец разобрался в том,что так долго не мог запомнить)Спасибо тебе!))
@prostoprofi4385
@prostoprofi4385 3 роки тому
Спасибо очень помог всё просто и понятно! То как вы подаёте материал это самый лучший и наглядный способ для учащихся! Продолжайте !
@_goldmanv5925
@_goldmanv5925 Рік тому
Лайк за "Тесто" - )) и еще один лайк за хорошие объяснение. Автору огромное спасибо!
@user-tj7md9ct1s
@user-tj7md9ct1s 2 роки тому
ты просто сказка, за 1 видос понял то, чего не мог понять неделю, может не так объясняли или ещё чего, но я прям многое догнал всего лишь за одно твоё видео, спасибо
@sndk2267
@sndk2267 Місяць тому
Очень полезное видео, всё понятно объясняешь, препод объясняет не так, приходится самому досматривать. Подписка и лайк однозначно !!!
@user-rl9mk1hw4b
@user-rl9mk1hw4b 4 роки тому
Монтаж помогает расслабиться , спасибо за best tutorial
@andreiBylkin
@andreiBylkin 3 роки тому
Кайф! Приятно разбираться в верстке под такие уроки :)
@admiralalamin
@admiralalamin 3 роки тому
как же классно, спасибо тебе, удачи!
@deolvap
@deolvap 3 місяці тому
Спасибо за видео! Приятно слушать, всё понятно.
@desenchantee7
@desenchantee7 Рік тому
Спасибо! Это была самая понятная для меня подача!
@user-nr8ke8qw2g
@user-nr8ke8qw2g 3 роки тому
Это самое понятное объяснение!!! Благодарю!
@dmitry_kolom
@dmitry_kolom Рік тому
Спасибо, за такое качественное объяснение
@user-oj9qd4hq5j
@user-oj9qd4hq5j 4 роки тому
помог понять тему, которую другие разжевать не могут, спасибо
@dom_Poerinionte
@dom_Poerinionte 2 роки тому
Четко, внятно, понятно. Спасибо!
@user-tn1vz6vr8y
@user-tn1vz6vr8y 3 роки тому
Большое тебе спасибо,легко понимаю твои уроки
@Nataly90mak
@Nataly90mak 4 роки тому
спасибо большое! Все очень доступно для понимания.
@lisov1k492
@lisov1k492 Рік тому
На Марсе классно) Спасибо за понятное объяснение.
@sandusgoga9676
@sandusgoga9676 3 роки тому
Прекрасно!Благодарю👍
@Idamshop
@Idamshop 4 місяці тому
многое понял, просто и доступно объяснил
@romanpit4you361
@romanpit4you361 Рік тому
Спасибо, все подробно и понятно!)
@kasparbiekies186
@kasparbiekies186 3 роки тому
под такую музыку прям и хочется заниматься!)
@polinaevtuhova8247
@polinaevtuhova8247 2 роки тому
Спасибо большое,повторила к собесу,зашло отлично!!!
@vollyyaa
@vollyyaa 8 місяців тому
Бро, спасибо четко точно лаконично)))
@Mayhem888
@Mayhem888 Рік тому
Спасибо! Очень помогло в понимании!
@tor8564
@tor8564 11 місяців тому
Оч круто! Спасибо!❤
@user-qt9wr4kq8e
@user-qt9wr4kq8e Рік тому
лучи бобра тебе, ты оч крутой, надеюсь, ты никогда не забросишь это дело) спасибо
@izobretateldobra
@izobretateldobra 4 роки тому
Очень доходчиво! Благодарю. Пошёл переделывать лендос )
@user-zw9mp2fd7d
@user-zw9mp2fd7d Рік тому
Спасибо большое, так понятно все разложил!
@issssam5853
@issssam5853 9 місяців тому
спасибо за объяснение
@sokolovoleh
@sokolovoleh Рік тому
Огромная благодарность!
@cam-onchannel
@cam-onchannel Рік тому
На Марсе классно 🔥🔥)))
@user-ds1hj3yv2g
@user-ds1hj3yv2g 3 роки тому
Круто объясняешь молодец👍
@runup1569
@runup1569 Рік тому
Спасибо!!! всё понятно
@w1erley
@w1erley 4 роки тому
Очень понравилось, спасибО!!
@user-fs9dq8xy5m
@user-fs9dq8xy5m 4 роки тому
очень развернуто , за это спасибо в двойне. посылаю лучи добра)
@mikhailmir9501
@mikhailmir9501 4 роки тому
Зачем было в видео вставлять себя? Закрывает некоторые функции кода и примеров
@nursayazhanabay353
@nursayazhanabay353 Рік тому
Спасибо большое ✨✨✨♥️
@EvilGazz
@EvilGazz 4 роки тому
Спасибо!
@shanthakobyan3578
@shanthakobyan3578 3 роки тому
sposibo otlichno obyasnil
@benotepanyan9464
@benotepanyan9464 3 роки тому
Ну несмотря на этого большое спасибо тебе, очень аккуратно обясняешь,,,!!!
@user-it7jm2bd3m
@user-it7jm2bd3m 2 роки тому
нет вопросов проста шикарная объяснение спасибо
@GennadiyDchamanov
@GennadiyDchamanov 3 роки тому
спасибо просто и доходчиво
@user-xl9bm9wf8h
@user-xl9bm9wf8h 4 роки тому
Каеф, спасибо!
@denisromanyuk729
@denisromanyuk729 4 роки тому
Красаучек, я с тобой за пару дней столько понял... Теорию сам читаю в инете, а тут свего рода практика. Сенк!
@temofart
@temofart 4 роки тому
Спасибо✌️
@leonidpogojii9649
@leonidpogojii9649 Рік тому
Хорошее видео, лайк за нойза в конце
@user-um2qe7rs3v
@user-um2qe7rs3v 2 роки тому
Подписка. Однозначно.
@mrvktr8721
@mrvktr8721 Рік тому
оч круто, респект
@user-de8sv9wp5d
@user-de8sv9wp5d Рік тому
Лайк классно обьясняет
@jugo-stream
@jugo-stream 3 роки тому
годный контент 👍
@deorfeal5657
@deorfeal5657 2 роки тому
Пасибо !
@zardima8123
@zardima8123 3 роки тому
однозначно лайк
@anastasiiah2784
@anastasiiah2784 2 роки тому
super!! spasibo
@sanya8158
@sanya8158 3 роки тому
Спасибо большое, хи
@MyakishMops
@MyakishMops Рік тому
Спасибо
@user-jc4fs6gy2k
@user-jc4fs6gy2k 2 роки тому
Спасибо.
@gigoshkin
@gigoshkin 4 роки тому
Спасибо, очень помог, все описано подробно, но мне кажется камера по среди экрана мешает
@kristinagevorgyan1095
@kristinagevorgyan1095 4 роки тому
Thank you
@user-kv2xb8dl8y
@user-kv2xb8dl8y 3 роки тому
голос как у мармока) пасибо, очень помог!
@scankomp241
@scankomp241 Рік тому
за пару сек я исправил ошибку блока кнопки посмотря твоё видео, ПОДПИСКА 🙃
@irinachepurna6013
@irinachepurna6013 4 роки тому
Спасибо большое за доступное объяснение материала. Все очень понятно и просто :)
@Makswell-oo5gu
@Makswell-oo5gu 3 роки тому
Давай так же понятно о JavaScript)
@konglomora227
@konglomora227 3 роки тому
За Нойза отдельный поклон
@lifelive7078
@lifelive7078 3 роки тому
👍👍👍👍👍
@sweetsforsweets6488
@sweetsforsweets6488 3 роки тому
Добрый день ! У вас есть уроки по JavaScript ? (интересуюсь созданием поисковика по сайту )
@andrew2340
@andrew2340 Рік тому
👍
@SlarkShark31415
@SlarkShark31415 Рік тому
все отлично, только музыку нужно тише и без слов
@good666fella
@good666fella 4 роки тому
Спасибо, помог!!
@bpospanov
@bpospanov 3 роки тому
очень хорошее видео, бро. только не видно стили из-за вебки)
@firekeeper7461
@firekeeper7461 3 роки тому
Если бы я захотел создать рыцарский орден программистов, то ты бы заслуженно возглавил его. Я посмотрел меньше минуты видео И У МЕНЯ УЖЕ ПОЛУЧИЛОСЬ ТО ,С ЧЕМ Я БИЛСЯ ЧАСОВ 6, в то время как другие гайды ничем не помогали. Счастья тебе и всего замурчательного~
@temofart
@temofart 3 роки тому
Спасибо за такой отзыв😊🔥🤙
@arturperel
@arturperel Рік тому
А если задавать max-height, как сжать текст, есть ли такая возможность?
@paulblog2438
@paulblog2438 4 роки тому
Спасибо))
@nikitadv777
@nikitadv777 4 роки тому
Я бы хотел узнать, после изучения HTML и CSS нужно учить JS или PHP? Или вообще план обучения должен быть иным?А также, когда начинать учить Bootstrap или что то подобное? Заранее спасибо!
@temofart
@temofart 4 роки тому
Когда знание верстки будет на хорошем уровне ты сам начинаешь понимать что тебе дальше нужно. А хороший уровень - это когда ты уже работаешь в компании либо стабильно берешь заказы на фрилансе по верстке. Прыгать в программирование раньше , чем освоил верстку нет смысла, мое мнение
@user-fy2yl5ri3l
@user-fy2yl5ri3l 4 роки тому
@@temofart со знанием одной лишь верстки тяжело устроиться в компанию(((
@temofart
@temofart 4 роки тому
@@user-fy2yl5ri3l Согласен, что не просто, но такие вакансии есть. Я сам пришел в компанию еще будучи просто верстальщиком, хотя на фрилансе выполнял заказы на WordPress . Об этом стоит рассказать больше, есть несколько путей развития. Либо пойти по пути Vue/React, либо научиться работать с CMS типа вордпресс. Каждый из вариантов имеет свои преимущества и недостатки. Но смысл в том, что все это невозможно освоить не научившись верстать.
@user-vz6ss2ct1t
@user-vz6ss2ct1t Рік тому
Привет, подскажи пожалуйста, вот у меня четыре блока и я не хочу выстраивать из в одну строку, а хочу сделать два и два под первыми блоками, как это решить?
@user-hl2el5cz8e
@user-hl2el5cz8e 23 години тому
что за редактор кода у тебя?
@lilokino94
@lilokino94 2 роки тому
Вот этот пырень понятно объясняет
@user-zw9mp2fd7d
@user-zw9mp2fd7d Рік тому
Можно попросить сделать обзор как сделать адаптивное меню с бургером!?
@sulejmanpovelitel1220
@sulejmanpovelitel1220 Рік тому
автор в конце ролика спрашивает на какую тему еще поговорить, не знаю актуально это сейчас или нет , хотелось бы посмотреть видео на тему меню сайта и все что с этим связано
@Bakytov
@Bakytov 3 роки тому
Простите за глупый вопрос, если блочный элемент занимает всю строку как тогда float подстраивает их в одну строку
@freedomjustice7069
@freedomjustice7069 2 роки тому
Кто нибудь знает что за программа или дополнение через которую ты смотришь полученный результат как у автора ?
@temofart
@temofart 2 роки тому
Live Preview
@user-gl8qs7qj4k
@user-gl8qs7qj4k 2 роки тому
капец Чарли Дэй знает CSS
@zacktherussian3617
@zacktherussian3617 4 роки тому
фанаты гуфа и центра сразу видно)
@sweetsforsweets6488
@sweetsforsweets6488 3 роки тому
Подскажите, у меня 9 маленьких блоков в одну строку. Как сделать чтобы при уменьшении браузера, те блоки которые не влазят= скрывались ???
@temofart
@temofart 3 роки тому
Свойство overflow-x скрывает все, что выходит за пределы элемента.
@sweetsforsweets6488
@sweetsforsweets6488 3 роки тому
@@temofart Ого как оперативно )) Спасибо. Но появилась проблема, он просто обрезает блоки по краям. А хотелось бы чтобы чтобы он их целиком не показывал если не влазеет .
@temofart
@temofart 3 роки тому
В вёрстке такой возможности нет. Но и сам вопрос звучит необычно, возможно нужно другое решение. Например, чтобы в адаптивной вёрстке все влезало, а не пропадало) или с помощью медиа запросов можно описать поведение всех блоков на каждом этапе, даже если нужно их по очереди убирать
@sweetsforsweets6488
@sweetsforsweets6488 3 роки тому
@@temofart Просто передо мной стоит задача - Разместить 12 (маленьких) блоков во всю ширину экрана одной строкой. Нельзя использовать js, только css и html При изменениях экрана все должно работать корректно, блоки растягиваться на всю ширину, а те, что не влезают - скрываться. Ничего подсказать не можете ?))
@sweetsforsweets6488
@sweetsforsweets6488 3 роки тому
@@temofart А если написать flex-wrap: wrap; (то есть перенести все что не влезает на вторую строку, а вторую строку скрыть )Так получится ?
@user-vt1xz8sx7i
@user-vt1xz8sx7i 4 роки тому
Спасибо, но было бы лучше без фоновой музыки, мое мнение.
@temofart
@temofart 4 роки тому
Спасибо. Видео в ютубе - творчество, поэтому хочется делать так, как нравится. На любое творчество найдутся те, кому нравится - а кому нет)
@denpro9712
@denpro9712 4 роки тому
Sweating Поддерживаю комментарий. Музыка очень мешает и отвлекает. Без неё было лучше. Это вообще странная мода, ставить музыку фоном, при объяснении важных принципов.
@temofart
@temofart 4 роки тому
Музыка держит в тонусе, скучно же. Я, например, работаю под музыку, решая сложные задачи, как и многие мои коллеги. А в офисе столько посторонних звуков, что музыка будет лучшим вариантом среди них, нужно научиться фокусироваться на задаче отключая в голове все лишнее)
@miragadzafarli1014
@miragadzafarli1014 4 роки тому
добавь код блоков что бы скачали . У меня не работает ((((
@hologramprint6292
@hologramprint6292 4 роки тому
прикольно, но почему квадратик с вашим лицом заслоняет весь код css) но про флекс всё доходчиво! спасибо лайк
@temofart
@temofart 4 роки тому
Я старался, чтобы нужный код было видно. Но в любом случае это первые видео, дальше я изменил подход)
@nicksakovich6500
@nicksakovich6500 Місяць тому
!!!
@abl1ght
@abl1ght 2 роки тому
Его Вебкамера мешает я не вижу часть кода CSS
@temofart
@temofart 2 роки тому
Попробуй найди другое видео по этой теме
@8dog574
@8dog574 4 роки тому
+
@user-gl8qs7qj4k
@user-gl8qs7qj4k 3 роки тому
капец иван ургант второй канал открыл
@arturperel
@arturperel Рік тому
А где grid, flow layout
@temofart
@temofart Рік тому
3 года назад использовать в продуктовых проектах гриды было рано, а новичкам знать все сразу необязательно.
@vr4836
@vr4836 3 роки тому
фон громковат
@benotepanyan9464
@benotepanyan9464 3 роки тому
Привет братан, извини, но flex-direction:row, column, row-reverse, column-reverseвсё про этих фишек забыл говорить!!!!
@maximmaximov1038
@maximmaximov1038 3 роки тому
Очень хотелось бы знать : как и в каких случаях текст влияет на размеры блока и как он (текст) может менять эти размеры?
@kuskauu2946
@kuskauu2946 3 роки тому
Ты случаем не брат мармока?
@temofart
@temofart 3 роки тому
Та не похожи мы )
@kuskauu2946
@kuskauu2946 3 роки тому
@@temofart но голос ощущается :>
@kittycat3226
@kittycat3226 3 роки тому
ничего не поняла
@MaratHighlander
@MaratHighlander 3 роки тому
Ну ёёёмаё, нам видос нужен а не ты)))) Весь код перекрыл лицом, ппц.
@kuskauu2946
@kuskauu2946 3 роки тому
Зачем тебе код? Он объясняет для чего нужен код, ты должен быть уже с ним ознакомлен.
@MaratHighlander
@MaratHighlander 3 роки тому
@@kuskauu2946 Капец ты Эйнштейн.
@kuskauu2946
@kuskauu2946 3 роки тому
@@MaratHighlanderУдачи по пути програмиста)
@myganter
@myganter 3 роки тому
Кто-нибудь отключите эту музыку!!!!!!!!!!!!!!!!!!!
@user-mf1cx7cn4k
@user-mf1cx7cn4k 4 роки тому
Ничего не понятно
@alexandrmoskalev8642
@alexandrmoskalev8642 3 роки тому
Контент хороший, но зачем эту убогую музыку было вставлять?
@temofart
@temofart 3 роки тому
Потому что она мне нравится)
@alexandrmoskalev8642
@alexandrmoskalev8642 3 роки тому
@@temofart это хорошо), но она отвлекает...Особенно когда слова в середине появляются, и не понятно кого именно слушать)
Свойство display (inline, block, inline-block, none)
12:15
Vitaliy html
Переглядів 5 тис.
Свойства блоков. CSS padding. CSS margin. CSS display. Уроки CSS HTML JS. Урок №7
31:08
The World's Fastest Cleaners
00:35
MrBeast
Переглядів 50 млн
Кровосток - разговор с легендами / вДудь
2:12:57
In 10 Minutes This Room Will Explode!
10:00
MrBeast
Переглядів 47 млн
Верстаем таблицы | Курс HTML & CSS | Занятие №4
26:45
Андрей Андриевский
Переглядів 128 тис.
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 216 тис.
Block, Inline, and Inline-Block explained | CSS Tutorial
14:19
Kevin Powell
Переглядів 235 тис.
Как создать очень простой и красивый сайт HTML + CSS Урок 1.
43:11
Ranch Easy | Информатика ЕГЭ
Переглядів 36 тис.
CSS Pseudo elements Before and After: Examples
11:55
Анна Блок
Переглядів 101 тис.
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Переглядів 536 тис.
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Переглядів 1,3 млн
The World's Fastest Cleaners
00:35
MrBeast
Переглядів 50 млн