Свойства блоков. CSS padding. CSS margin. CSS display. Уроки CSS HTML JS. Урок №7
Вставка
- Опубліковано 2 чер 2024
- Свойства блоков. Отступы размеры характеристики. Уроки CSS HTML JS. Урок №7
Продолжаем учить CSS и сегодня начинаем говорить о свойствах блоков. А именно об отступах, размерах и характеристиках.
🔴 Весь плейлист с уроками по HTML CSS JS верстке:
• БЕСПЛАТНЫЙ курс по вер...
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle
Или качай по ссылке: fls.guru/files/tutorials/css_...
Содержание:
00:00 Настройка файлов к работе
01:10 padding - внутренний отступ блочных тегов
05:45 margin - внешний отступ блочных тегов
07:45 width - устанавливает ширину блочных тегов
11:04 max-width - устанавливает максимальную ширину блочных тегов
12:24 min-width - устанавливает минимальную ширину блочных тегов
15:09 height - устанавливает высоту блочных тегов
16:50 max-height - устанавливает максимальную высоту блочных тегов
18:03 min-height - устанавливает минимальную высоту блочных тегов
19:23 ВАЖНО! Свойство box-sizing - расчёт размеров блочных тегов. Значения этого свойства указывают, влияют ли отступы и границы на размеры блочных тегов.
22:12 overflow - управляет отображением содержания блочного элемента
24:24 display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. (Наример, делает из строчного элемента блочный и наоборот)
29:48 Шпаргалка по свойствам этого урока
30:32 Домашнее задание
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
Женя, у тебя уроки построены грамотнее, чем в онлайн-курсах/школах/университетах. А самое лучшее, это реакция на обратную связь.
Спасибо большое!
Я полностью солидарен !
Это точно!
100% согласен!
Согласен на 100 % !!!
Цілий урок конспектувала, а в кінці ви сказали, що залишили вже готовий конспект, мене дуже здивувало, що вам не жаль свого часу аж так допомагати людям. Підносите як на блюдці. Навчаюся з вами далі
Я сам из Украины, но буду писать на русском, так как здесь много людей из России. Значит по домашке.
1. На макете есть текст помещенный в теги. Только текст надо разместить вам на странице. А в редакторе (sublime text 3, brackets и т.д.) сам текст надо обернуть в указанные в домашке теги.
2. Каждый урывок текста это своего рода блок. Если в Avocode или Photoshop навести на него курсор, то видно рамки этого блока. То есть, работайте с этими блоками, как Женя учил в уроке. Думайте! Мне очень понравилось display: block; и display: inline-block;
3. В каждом селекторе укажите свойство border внизу, чтоб видеть границы. Потом это уберете в конце.
4. На рабочей странице, в браузере, ну типа когда открываете, чтоб посмотреть, что натворили нажмите F12 или Fn+F12 на ноуте и вы увидите свой код. Когда мышкой ставите на свои теги, то вы классно видите границы каждого блока и стилизацию. Мне это очень помогало.
Делюсь с вами моими наработками.
Не благодарите)
Спасибо, что написали!! Буду использовать ваши наработки при выполнии д\з
Полезно! Пока только учусь, но тоже пришел к выводу что с бордерами удобнее воспринимать страницу на этапе проектирования. Только я назначаю полные рамки для всех дивов на странице, мне так удобнее.
спасибо!
а не подскажите как удалось выстроить предпоследний элемент (ссылку ) в одну строку рядом со span?
По идее применение inline-block должно тут помочь , но не помогает.
Заранее спасибо.
@@kates9455 и это строчные тэги, они сами должны выстроится рядом, если есть место.
Можно сделать вот так: codepen.io/taskov1/pen/KKNBwyE
А то что в макете есть названия тегов, например их надо переносить на готовую страницу? Или вместо этих тегов должны быть отступы в верстке, не понял этого момента
ахахахах, я сижу весь урок, скрупулезно конспектирую каждое слово, Эвгений в конце видео: "для того, чтобы тебе не пришлось..."...
P.S.: "Щиро вдячний за твiй контент)"
Ты когда все это рассказываешь, у тебя аж глаза горят. Респект тебе!!!
Пожалуйста!
Я тоже обратил на это внимание. От этого еще больше заряжаешься. Жека, ты невероятно крут!!!
Реально чувствуется по голосу насколько человек увлечен тем что делает и насколько кайфует от этого.
Женя, благодарю тебя за твой труд и время которое тратишь на все эти уроки!! Ежедневно занимаюсь по твоим урокам.
Со своей стороны твоим каналом поделился уже с 6-ю друзьями, по-любому в будущем буду рекомендовать ещё для тех кто будет спрашивать о подобном.
как всегда ПАЛЕЦ ВВЕРХ!!!
Удачи в работе, здоровья тебе и твоей семье!!!
Спасибо большое!
ну и как успехи?
@@user-dq2wd2pk2r для себя, вероятно, занимается. Чтобы тупым не быть. И это отличное решение.
.85
Щх
Р0ш8ш66ггхлдщщдза1увй1й
Ух, сделала. Один день ушел на то, чтобы пару раз посмотреть видео, и другой на то, чтобы разобраться. В среднем, отдаю обучению вёрстке 3 ч в день. Так приятно бывает смотреть на результат и гордиться своими скромными достижениями ))
Плохо что на youtube нельзя два раза поставить лайк ! Спасибо огромное вам !
Евгений жму руку! твои видео как глоток чистого воздуха на просторах интернета.
Отдельный кайф - это твои картинки...🤠
Очень хорошо, что ты записываешь конспект в текстовый файлик :)
Я тоже так думаю))
@@FreelancerLifeStyle да, за это нижайший поклон)))
@@FreelancerLifeStyle о да, спасибо за это огромное
Пожалуйста)
@@FreelancerLifeStyle конспектики , то что надо нам
Тайм-коды, если нужно быстро что-то найти:
_______________________________________________________________________________
00:00 Настройка файлов к работе
01:10 padding - внутренний отступ блочных тегов
05:45 margin - внешний отступ блочных тегов
07:45 width - устанавливает ширину блочных тегов
11:04 max-width - устанавливает максимальную ширину блочных тегов
12:24 min-width - устанавливает минимальную ширину блочных тегов
15:09 height - устанавливает высоту блочных тегов
16:50 max-height - устанавливает максимальную высоту блочных тегов
18:03 min-height - устанавливает минимальную высоту блочных тегов
19:23 ВАЖНО! Свойство box-sizing - расчёт размеров блочных тегов. Значения этого свойства указывают, влияют ли отступы и границы на размеры блочных тегов.
22:12 overflow - управляет отображением содержания блочного элемента
24:24 display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. (Наример, делает из строчного элемента блочный и наоборот)
29:48 Шпаргалка от Евгения по свойствам этого урока
30:32 Домашнее задание
_________________________________________________________________________
Спасибо!
В описании есть тайм-коды))
@@user-hl5ki1bw6t уже есть)
Когда я писал, ещё не было)
пхахпах такой каеф было весь урок записывать а в конце услышать "можешь не записывать ,всё в файле есть"))
Приветствую Женя. Всем кто смотрит это. Советую пересматривать все по
2 - 3 раза, потом будет все понятно)
Все верно)
@@FreelancerLifeStyle Ух, отлегло. Думал, что это особенность моей "соображалки", что нужно пересматривать 2-3 раза.
@@AlexStolbovakariturnel аналогично)
так и делаем, ещё и в тетрадку заметки делаю)
Спасибо тебе Человечище, когда я начну зарабатывать благодаря твоим наставлениям я тебя отблагодарю. Отвечаю за свои слова.
Отличная мудрость "живи, а работай в свободное время". Найти работу по душе - так с предидущего предложения останется только одно слово)
Спасибо за уроки.
Пожалуйста! Рад что полезно!
Настроение было отвратительное, но тем не менее села за урок, чтобы не пропускать и заниматься регулярно
Даже настроение повысилось, спасибо вам за уроки! Вы отлично объясняете материал!
Как у вас успехи? Вы не сошли с пути за етот год?
@@david___620 К сожалению, сошла, сменила специальность)
Благодарю, зашел вспомнить пару терминов :)
-Засчет тебя я уже стал WEB Junior Front-end programming :)
Спасибо, я рад)
круто, сколько времени обучался до этого уровня ,?
@@tommy7tommy , в основном смотрел других ютуберов. Но от них матва не было, из-за этого ушел со сферы программирования. Потом неожиданно захотел вернуться, примерно 3-4 месяца учебы от фрилансера по жизни + телеграм канал. Дал себе знать чего я достоен, и это только начало
@@Syuzi.Surprises я реально рад за тебя!!!
@@Syuzi.Surprises какие уже успехи?)
Привіт з 2023! вирішив перейти з геймдеву у веб розробку. Дуже вдячний за ці всі уроки. Дуже корисно, без води, чітко та структуровано. Дуже велика робота була зроблена щоб вийшов такий результат. Дуже велика подяка за зроблену роботу !!!
Большое спасибо за обучения, спасибо богу, что есть такие люди как вы, которые дают удочку чтобы поймать рыбу, чтобы прокормится.
Я рад что полезно!
Спасибо за такие уроки, а главное материалы которые Вы как всегда уже подготовили)) Вы делаете колоссальную и очень крутую работу)
Просто бомбезні уроки!!!! Наскільки мені відомо, в Ужгороді вже 2 року жодна компанія не організовувала курсів для бажаючих працювати в IT. А всі онлайн курси, які мені зустрічались зорієнтовані на заробітку. А тут Женя викладає матеріал в настількі доступній формі, що неможливо щось не зрозуміти. Та ще й безкоштовно!!! Величезне дякую, лайк, підписка. 👨🎓👏
Радий що подобається!
Спасибо Вам огромное! Очень интересно наблюдать за тем как Вы рассказываете) Вы так этим всем увлечены, что Ваш позитив и энергия передаются мне через экран)
ДЛЯ ТЕХ, КТО НЕ ПОНЯЛ НА 19:23
При отключении BOX-SIZING в CSS: общая ширина блока=width+padding+margin+border
Пример: общая ширина блока=width500+padding10+margin20+border1=500+10+10+20+20+1+1=562
При включенном BOX-SIZING в CSS: общая ширина блока=width+margin (padding и border входят внутрь ширины width, поэтому и не учитываются)
Пример: общая ширина блока=width500+margin20=500+20+20=540 где width500=padding20+border1+оставшаяся ширина (500=20+20+1+1+458)
Это очень помогло!Спасибо
box-sizing в обнулении не сработал(код такой же, даже копировал из урока специально), и чтобы понять, как работает, пришлось дописать box-sizing в класс блочного тега.
спасибо!
К сожалению, автор заблуждается по поводу свойства box-sizing, так как ни при значении по умолчанию, ни при значении border-box, ширина и высота элемента не включают в себя значения свойства margin. Вот информация из MDN Web Docs: "border-box: The width and height properties include the content, padding, and border, but do not include the margin." Ну и через Chrome Dev Tools это тоже довольно просто отслеживается.
@@vladgalekas Так именно об этом и речь. И в комментарии и в ролике
Огромное спасибо!!! Как всегда легко, непринужденно, профессионально и с любовью к любимому делу.
Просто идеально💯✨.
Заходит как-будто я сам себе объясняю!
Спасибо огромное за труд. Я в восторге от качества материала и метода подачи.
Отличная подача материала, а позитивный настрой отличная мотивация двигаться дальше!!!
Я от души присоединяюсь ко всем восторженным отзывам о канале в целом и об этом курсе в частности! Настолько понятного материала по вёрстке я ещё не встречала... "Это просто праздник какой-то!" :)
Спасибо за отзыв и поддержку!
Очень нравится Ваша подача! Смотрю с огромным интересом! Спасибо!
Как же я рад , что нашел такого учителя как вы! Браво! Спасибо вам за весь труд!!! Чую подписоты на этом канале скоро будет ооочень много.
Поступил в онлайн школу на курс "FullStack разаработчик". Информация подается скомкано, быстро и ее очень много для одного урока.
Жека подает информацию дозированно и очень доступно. Очень заинтересовал курс с 1 сентября. Очень гуманная цена, попробовав позаниматься с Женей, понял что это очень хороший курс. Но... уже учусь на курсах и деньги никто не вернет. Пока в раздумьях по покупке курса. Жека, ты классный! Жаль что не попробовал заниматься по твоей программе раньше.
Очень хорошо объясняешь, без воды, с меня лайк и подписка! Продолжай в том же духе! Удачи!
Учусь с 0 по твоим урокам, никогда до этого я не сталкивался с программированием, а зря, это очень интересно) Устал от тяжёлой работы на ногах, хочу зарабатывать головой, тем более в наше сейчас время, когда ты не знаешь, что может произойти (война), и работы твоей может уже и не быть вовсе... Хочу сказать тебе огромное спасибо, что есть такой человек как ТЫ! Который обучает абсолютно бесплатно всех! А в конце ролика твоя речь, меня каждый раз вдохновляет только продолжать идти к цели и *Жить*...
@@SNSDfOu tot je vopros
знайшов роботу?
Також цікавить таке питання.
спасибо, по верстке ты лучший на русскоговорящем ютубе!
Большое спасибо за добросовестную подачу информации! Все шикарно!
Наверное самые годные уроки по верстке... Спасибо. Очень интересно смотреть.
Жека, спасибо за курс! Информационная компрессия в получасовом видео просто поражает!
А за шпаргалки - отдельное спасибо ))
Евгений, ВЫ ВОСХИТИТЕЛЬНЫ! _)
Спасибо за ещё одну порцию позитива и информации. Домашнее задание очень к месту для закрепления материала. И отдельное спасибо за конспектик!
Женя, благодаря тебе теперь я точно до конца понял что такое padding и margin
Спасибо за ваш труд, все на высоком уровне. Надеюсь будете продолжать снимать обучающие ролики, таких крутых уроков почти нет!!!
Спасибо! Продолжаю!
Спасибо за урок! Все объяснения на понятном языке) очень качественно и на позитиве)
Всё четко, просто и понятно. То что нужно для новичков) Спасибо Вам ОГРОМНОЕ!
Как всегда все на высоте. Так держать.
Спасибо!
Не могу не оставить комментарий! Очень крутые уроки! Помимо легкодоступной "не нудной" теории, еще и практика.. и домашка)) И еще, это первое видео (а пересмотрел подобных доху...) в котором узнал что margin может принимать отрицательное значение. Спасибо за труд)
Выражаю большую благодарность за бесплатный, качественный контент!))))
ВЕЛИЧЕЗНЕ Вам ДЯКУЮ за Неймовірно Змістовний Урок!!! ВЕЛИЧЕЗНІ РЕСПЕКТ І УВАЖУХА!!!
Спасибо за труды! Всех благ! Отдельный респект за конспектик!
Пожалуйста!
Спасибо Женя! Каждый урок круче предыдущего!!!
Пожалуйста!
Женя спасибо, твоим урокам уже 2 года, но до сих пор, люди на нём учиться, ты лучший!
Спасибо Евгений, огромное впечатление от ваших уроков, огромная благодарность и низкий паклон.
Прекрасные уроки, лучше, чем я себе мог таковые представить:)
Я рад!
Женя, благодарю за уроки!
Пожалуйста!
Обалденные уроки, благодаря вам, смогу сделать свой сайт! Спасибо Вам большое, что делаете такой контент!
Круто! очень последовательно и логично изложен материал! РЕСПЕКТ!
Жека, спасибо тебе тысячу раз за то, что только на твоих уроках можно отлично стартануть в web. Ты так много вложил любви и времени в материалы по обучению... Я очень ценю твой дар!
Пожалуйста!
@@FreelancerLifeStyle Женя. присоединяюсь ко всем коментам и словам благодарности. учиться по Вашему материалу одно удовольствие. все четко и продумано. Мне ваш курс посоветовал мой муж, который выучился на Ваших уроках и сейчас работает на фирме. Я когда раньше смотрел ем занимаеться мой муж, то чесно говоря хотелось плакать. А теперь сама в 40 лет после 6 лет декрета решила стать фрилансером и прохожу Ваши уроки. Сейчас мне уже не страшно, а даже наабарот интересно. Я понимаю, что именно через такую подачу материала как у Вас я и поменяла свое мнение. Еще раз спасибо Вам и успехов Вам во всех проектах.
отдельное спасибо за включения с улицы- классная фишка!
Пожалуйста!
Аааа, как же я рад, что выбрал именно этот курс!!!Спасибо огромное!
Спасибо Вам за качественно и грамотно подачи уроков! Вы лучший преподаватель!!!
Спасибо за видео !!! , , учусь верстке ,,,
Пожалуйста, успехов в учебе!
как успехи?
Как успехи?
Как успехи?
Как успехи?
Всех благ, спасибо! Помогаешь утрамбовать и расставить по полочкам!
Я рад!
Отличные уроки ! Объяснения полные , последовательные , даны со всех сторон . Спасибо !
Спасибо вам большое за ваши НЕЗАМЕНИМЫЕ туториалы!!!
Вы лучший
Автору: 1е у тебя талант преподавателя. 2е просто ты очень приятный молодой человек - на тебя приятно смотреть и приятно слушать. Хотелось бы еще вот такие уроки по JS . Это конечно не CSS и тема явно сложнее но поэтому ты и нужен, потому что у тебя получается правильно доносить информацию.
Очень приятно смотреть. Спасибо за такое качество контента
Пожалуйста!
Как же это гениально! Просто принимай мои поклоны!)
Эти уроки, потрясающие! Систематизированная информация, очень доступно да ещё и текстовая шпаргалка, как каркас, как HTML. Спасибо, тёска!
Спасибо! Ты красавчик! Я покупал платные курсы, которые мне рекомендовали, но там объяснили на много хуже чем ты бесплатно
Большое спасибо! за конспект в текстовом файле хочется поставить отдельный лайк)
Рад что полезно!
Спасибо тебе огромное! На курсах в Киеве мне так не рассказывали как ты! Я очень рада, что нашла ТВОЙ канал и что ТАКОЙ ЧЕЛОВЕК КАК ТЫ - ЕСТЬ!
От души за уроки ! Смотрю и просто вникаю ! Лучшие уроки по теме!
Женя, спасибо вам большое! Я биолог-эколог по образованию (в этом году выпуск), но по вечерам в свободное время одно удовольствие проходить ваш курс, даже такому далекому от IT-сферы человеку, как мне)
Здоровская и подробная подача материала без воды. Такое упустить просто нельзя!)
Желаю вам всего самого наилучшего!
Я даже рекламу смотрю что бы тебе деньги капали
Спасибо! Ценю!
Можно по ссылкам переходить из рекламы, так еще упадет монетка!
@@shelove4212 спасибо за совет-буду тоже так делать)))
@@sinulka да я тоже, всегда хочется поддержать хорошего автора
Если с према смотреть то не будет что-ли капать, или засчитывается как-то?)Автор конечно лучший, довольно быстро ввёл в курс дела по html и сss, которые были для меня обратной стороной Луны до сегодня)
Женя ты лучший! Реально живее и интереснее чем препод на моих платных курсах!!!
Как всегда на высшем уровне! Спасибо
Все очень круто! Пока лучшее, что я видел по вёрстке!) Спасибо)
Спасибо! Я рад!
Курсы просто ТОП!
Очень доступно!
За блокнот отдельное спасибо!!!
То чувство когда понимаешь что информация годная!
Супер! Я рад!
qwerty
Неделю назад наткнулся на ваш канал и да я знаю что поздно вас благодарю, но все же лучше поздно чем никогда. Спасибо вам за все ваши видеоуроки и старания! Каждый день смотрю и мотивируюсь смотря как вы усердно работаете, стараетесь что бы приподнести годную инфу. А главное вы это делаете бесплатно. Я очень рад что нашел ваш канал! Буду продолжать смотреть все ваши видео на канале, а вам я желаю успехов в продвижении канала и вообще в жизни. Удачи вам!
Классные уроки, наглядно, понятно, время роликов хорошее 👍
Спасибо
Один из важнейших уроков(!!!), который нужно очень хорошо проработать и осознать. Спасибо за ролик!
Пожалуйста!
Жень, как всегда классный выпуск!)
Спасибо!🤟
Евгений, ты как Прометей, делишься с людьми сокровенными знаниями. Огромное спасибо!
Очень круто обьяснили за display. Сейчас учу front end самостоятельно и ваши уроки очень помогают. Спасибо большое)
Спасибо большое, Женя за очередной классный выпуск! Мне понравилось как ты в конце засмеялся, когда строчный тег превратился в блочный, улыбнулся вместе с тобой! Ты вдохновляешь на занятия версткой!
Спасибо! Все получится!
спасибо.
Любовь к своему делу ,сразу видно.
Это да)
Спасибо Вам огромное за уроки!!! Вы прекрасный преподаватель!!!
Вы просто моё солнышко в мире вёрстки. Обращаюсь к вашим видео далеко не в первый раз.
Спасибо)
Спасибо Евгений. Прекрасно доносите информацию до слушателя. Монтаж Вашего видео - отдельное видео.
Спасибо! Рад что нравится!
Спасибо большое за бесплатные уроки, очень ценно!
Нет ничего более дорогого чем бесплатное)
Женя, супер подача, спасибо! Особенно об overflow, наконец-то поняла! Учусь на дорогих курсах, но понимаю все на твоих. Нашла бы тебя раньше, ни за то бы на платные не пошла.
Спасибо Вам большое! Это лучший курс по html,css,js!
Спасибо за интересный урок и полезную информацию 👍
Пожалуйста!
Женя у тебя уроки лучше и понятлее чем другие курсы даже академии
Я рад!
дякую за ваші відео, гарний матеріал, чудові уроки, зручний плейлист
Лучший контент по вёрстке! Спасибо огромное за твой труд !!!
Прогеры давайте лайки эти уроки достойны большего
Спасибо!
@@FreelancerLifeStyle оригинально проводить уроки 👍👍👍
Чтобы предпоследний span и ссылка стали в одну строку как в макете, можно параграфу задать display: block, с помощью padding`а отодвинуть его вправо, и с помощью отрицательного верхнего margin`а поставить его в одну линию с div`ом
Евгений спасибо! Такой же интересный и грамоный урок как и предыдущие.
Женя, благодарю за такой мощный урок. Как все сложно казалось до этого урока, а сейчас ты все по полочкам раскладываешь и главное, все понятно. Мне с каждым уроком становится все интереснее и понятнее. Спасибо тебе, большое!!!