Уроки по CSS/CSS3. Часть 4. Позиционирование элементов

В этом уроке рассматриваем позиционирование и отображение элементов

[STRIPPEDSTAR]

КОнспект
Сначала философия о текстовых редакторах(не критика просто факт:)
2:05 Стартовый html-листинг
2:13 Если вы по какой-то причине пользуетесь файерфоксом то эта инфа
вам скорее всего не поможет тк она 8 летней давности. Жми F12 и будет
тебе счастье.
3:25 Повесть о крутизне тогдашних браузеров
3:50 Разбираемся в том сколько занимают элементы пространства в зависимости
от вида
4:30 display: block; (блочный элемент) ему можно задавать ширину и высоту
5:15 блочные элементы всегда располагаются друг под другом
5:33 а строчные как ни парадоксально друг за дружкой в строчку
Не знаю как раньше но параграфы на данный момент всегда
начинаются с новой строки
5:59 Разбор свойства display
display: block; (блочный элемент) ему можно задавать ширину и высоту

display: inline; делает элемент строчным (у него высота и ширина определяются
высотой и шириной контента)
display: inline-block сохраняем возможность указывать ширину и высоту
но теперь такие элементы можно уложить по горизонтали
7:50 Про Отступы внешние margin и внутренние padding
8:30 Про Семейстов margin-ов
10:40 Про padding-и
11:06 как с помощью значение auto отцентрировать элемент относительно
родительского элемента
12:16 min-width max-width для указания минимальной и максимальной ширины соотв.
минимальная позволяет расширяться свыше указанного значения, но не позволяет
уменьшаться. А максимальна позволяет уменьшаться, но не расширяться.
15:24 О свойстве position
position: relative; Указывает относительно какого элемента должны смещаться элементы с
position: absolute; Последнее же позволяет смещать элемент относительно элемента с
position: relative; При помощи свойств top: right: bottom: left: Которые указывают отступ от
одноименных граней в пикселях или процентах. (можно указывать отрицательные значения)
18:13 position: fixed Позволяет зафиксировать элемент относительно окна браузера
на месте указанном с помощью свойств top: right: bottom: left:
19:40 z-index свойство позволяет задать приоритет слоев (Больше цифра - ближе к
переднему плану)
20:20 overflow свойство которое отвечает за контент который не влазит в размеры контейнера
overflow: visible; значение по умолчанию контент просто торчит за границы контейнера
overflow: hidden; прячет все что не вмещается в границы контейнера
overflow: scroll; добавляет скрол для всего что не влазит горизинтальный тоже
overflow: auto; решает сам))
чтобы наверняка задать и вертикальный и горизонтальный overflow есть специально обученные
свойства overflow-x: и overflow-y:
23:38 Волшебное свойство display: none;

[TXS]

Парень сделал этот курс в 2012. Я его смотрю, учусь и понимаю в 2020, с мельчайшими коррективами на нынешний софт. Однозначно прекрасно, лайк.

[semenkuznetsov]

Отличный курс наконец то понял как работает position. Нигде не могут вразумительно объяснить принцип, а оказалось все настолько просто, что от злости стул подпалил. Автор молодец, можно сказать миссионер несет миру халявное образование. Сейчас довольно сложно найти грамотное бесплатное видео по css. Обычно на различных каналах css идет как платное дополнение к html. Так что буду дальше смотреть и потихонечку конспектировать в свою тетрадочку данные уроки.

[Ayoushminald]

разницу про hidden и none надо было рассказать еще =) что hidden просто скрывает элемент, он становится как бы прозрачным, но место свое по прежнему занимает на странице, а вот none полностью удаляет элемент как бы со страницы и соседние элементы сверху снизу и по бокам его место занимают.

[en_li_]

кладезь знаний.лучшие уроки что довелось найти.большое человеческое спасибо

[КоляИколай-вж]

Ты невероятно крут! Не мог позиционировать кнопку в картинке, но после Вашего видео всё ОК! Спасибо, делай больше уроков! :) Всех благ!

[nexgenua]

Небольшое дополнение к уроку, у всех блоков по умолчанию стоит position: static, но мы просто его явно не указываем, если у блока стоит position: absolute, то он будет позиционироваться от ближайшего родителя, который имеет любой position отличный от static т.е. relative, asolute и fixed (а не только relative, как было сказано в видео). А так же для понимания чем отличается position: relative от position: absolute - это то, что при position: relative блок не выпадает из потока т.е. когда мы его сдвигаем, на его месте остается невидимый блок таких же размеров и другие блоки будут его учитывать, а при position: absolute блок выпадает из потока и другие блоки его уже не учитывают.

[НиколайВоронцов-эы]

Ну да, очень понравился курсы все.Очень интересно обьясняет.Даже где сложно после 3-4 повторений уж догоняю)Спасибо

[juliannaxxx]

*рассказывает о сложном* - 30 секунд
*что такое минимальная и максимальная широта* - 2 минуты

А так канал очень полезен, все видео носят ценную информацию, автору огромное спасибо! Даже спустя 8 лет его смотрят:)

[drallexpro]

Спасибо! Познавательно! Все понятно, без лишней "воды"...

[crocustype]

Автор ты чудо! Спасибо, благодаря тебе научился. Удачи тебе и больших успехов!

[dormant]

Блин, круто объясняешь! Просто на сайтах многое непонятно куда писать, что писать, а туту всё ясно и главное видно! Спасибо.

[maksigors]

отлично рассказываешь, спасибо, много интересных моментов

[BumaMuHR]

Боже чувак, спасибо тебе за z-index, а то я только начинающий. После 1 курса были для меня просто непонятныне проблемы с выпадающими меню! Огромное спасибо, теперь буду учится у тебя!

[Sanya]

очень классные уроки. продолжай в том же духе)

[Евгений-ъяэ]

на 5:40  автор ролика говорит что содержимое будет располагаться в строчку и это касается параграфов и тегов спан и т.д. Что абсолютно не верно для параграфов, так как тег p является блочным и содержимое будет отображаться друг под другом.

[mj_nooker]

благодарю! очень внятно и без разлитой воды! респект!

[fivewords]

Доступно, легко и понятно!
Спасибо!!!

[dsdssdsd]

2018 год, начал изучать css+html. Хочу научиться делать интересные сайты/проги/аппликации/игры для андроид, компа, или других возможных устройств. Вся идея в саморазвитии - убил много времени в "киберспорт" и не вижу развития, супер скучно. Мне 24, возраст только цифра, учил когда-то ООП на джава все понимал легко но перестал из-за проблем разных, сейчас меня ничто не затормозит, хочу развиваться. Прошу опытных ребят(умных и опытных), подсказать, каков сейчас рынок программирования, но, что по сути не будет скучной работой для вас именно, т.к. я енивей не живу ради денег мне главное чтобы было интересно ну и само собой иметь бару баксов на хату и еду. Всем мира, любви и вдохновления в жизни!

[velichaishiy]

Спасибо.Пытался подвинуть ссылку, но не как, а вы помогли!