Step 5 (S-44732)

From Stepik Wiki
Revision as of 23:37, 5 August 2017 by Admin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14821/step/5

Step 5 (S-44732) 1.png

[00:00 - 00:19] как правило у начинающих разработчиков при попытке что то сверстать возникают проблемы с позиционированием элементов то есть выбрать задать шрифт цвет а это обычно получается легко а вот расположить элемент


[00:19 - 00:34] там где он должен быть получается сложно а поэтому считаю важным рассмотреть некоторые стили которые определяют расположение элементов на странице и показать как их использовать а


Step 5 (S-44732) 2.png

[00:34 - 00:50] 1 с чего нужно начать а это режим отображения элементов режим отображения создается стилем display существуют следующие режимы дисплей нам этот элемент вообще не будет виден на странице


[00:50 - 01:06] он присутствует в верстке присутствует так называемый дом дереве а дом дерево это представление о верстке браузер ее проанализировал и подготовил к отображению внутренние представления документов а этот элемент есть


[01:06 - 01:23] к нему можно обратиться с помощью языка java script он не видит а на самом деле такие моменты использоваться чаще всего именно для языка javascript при некоторых действиях пользователей от премии


[01:23 - 01:38] если элемент должен быть скрыт к нему добавляют 7 дисплей нон он исчезает этот элемент не видел и не занимает места на экране а далее блок а это как раз тот


[01:38 - 01:56] стиль который определяет блочные элементы элементы со стилем display блок занимает максимальную ширину а они разрывают строчку то есть каждый раз начинаю с новой строки и после них текст начинается с новой строки а


[01:56 - 02:12] кроме того у них можно создавать высоту ширину и отступы со всех сторон а высота и ширина задается с помощью стилей высыхает а когда мы говорили про блочные элементы


[02:12 - 02:27] поблочно и строчные элементы а в предыдущем уроке мы подчеркивали что у с деление условно а сейчас станет ясно почему итак есть дисплей


[02:27 - 02:46] in line а соответствует отображения встроенных элементов а то есть это те элементы которые занимает минимальную ширину не разрывают строчку то есть они занимают так чтобы поместилось содержимое которой у них есть тот текст который у них есть они его как бы обволакивает


[02:46 - 03:03] эти элементы не разрывают строчку то есть они идут в потоке текста и игнорируют размер а игнорируют отступы сверху и снизу отступ слева и справа задать все еще можно а но


[03:03 - 03:22] это не все варианты например есть комбинированная значение displayed on line блог а блог ведет себя как блочный элемент но не разрывают строку то есть этот элемент находится внутри строки но у него можно задать


[03:22 - 03:41] размеры и отступы со всех сторон так ведет себя так а почему деление на блочные и строчные элементы которые бы говорили раньше она условно а потому что по факту в браузере есть набор


[03:41 - 03:56] различных элементов и для различных элементов а заданы стили по умолчанию зависимости от того какие стили по умолчанию элемент ведет себя как а блочные либо как строчной


[03:56 - 04:11] то есть деление не жестко зависит от того какие стили по умолчанию есть у данного элемента помимо приведенных здесь есть еще display table cell display list item а и так далее


[04:11 - 04:26] а вот эти 4 они более менее стабильно работают во всех браузерах остальные а режимы работают в разных браузеров немножко по разному мы можем посмотреть в чем


Step 5 (S-44732) 3.png

[04:26 - 04:41] отличие differ элементов difference to stop абстрактный блочно абстрактной срочный контейнер а теперь с точки зрения а вот этих стилей а допустим у нас есть такая верстка у нас есть 2 класса div


[04:41 - 05:00] co 2 элемента div 2 элемента спам класс ко всем добавлен для того чтобы было видно в чем заключается класс t он сдает он ширину и высоту 150x100 пикселей задает цвет фона а задает белый


[05:00 - 05:17] цвет текста и задает отступа посмотрим как ведут себя тихо наличие таких стилей мы видим что div поскольку это блочный элемент дисплей блок снимает всю предоставленную


[05:17 - 05:35] а че он не занимает и всю предоставлю ширину занимает тот размер который мы указали то есть 150x100 а помимо этого у димы есть отступы то есть мы видим здесь 30 пикселей


[05:35 - 05:49] здесь 30 пикселей ну здесь а тоже есть 30 пикселей просто контейнер немножко шире 10 30 пикселей это блочный элемент 2 дифф ведет себя точно так же а


[05:49 - 06:05] строчные элементы ведут себя по другому мы видим что они игнорируют отступа сверху и сверху и снизу я там был снизу хорошо виден слева и справа отступа есть


[06:05 - 06:23] то есть а из заданных отступов используются только левые а а высота и ширина они вообще проигнорированное то есть элементы располагаются в 1 строчку причем по ширине не совпадает с тем текстом который


[06:23 - 06:40] в них находится какой из этого можно сделать вывод можно сделать что для позиционирования элементов если вам необходимо расположить какой то момент в определенном месте либо разделить страницу на 2 части логично использовать элементы дисплей блок


Step 5 (S-44732) 4.png

[06:40 - 06:59] а элементы со стилем display on line используется в основном для выделения отдельных слов и текстов а то есть а для того чтобы задать структуру страны страница используется блочный элемент а теперь перейдем к следующему стилю а это стиль флот


[06:59 - 07:18] изначально флот использовался для обтекания обтекание текстом работает он примерно так же как то сделал а wysiwyg редакторов например ворд


[07:18 - 07:37] этот стиль позволяет задать обтекания этого блока а допустим у нас есть картинка и у нее задана стиль слот left это означает что данная картинка не будет а содержаться внутри строчки она будет всплывать в левую сторону


[07:37 - 07:54] ну либо что то же самое текст обтекает ее справа но удобнее считать что картинка всплывают в левую сторону а эта картинка не а раздвигает контейнеров то есть в данном случае размер контейнера а у нас тут


[07:54 - 08:10] место текста находится в каком то определенном контейнера то есть а высота этого контейнера она определяется размером текста если текста было бы очень мало контейнер заканчивался вот там где заканчивался текст например что было бы 1 предложение


[08:10 - 08:25] картинки которые всплывают они а не раздвигайте float left это соответственно влево а вместе а слово то используется


[08:25 - 08:41] клеев а clear позволяет отменить всплывания начиная с данного элемента а проще представить как проведения черты то есть обычно после того как


[08:41 - 09:00] разместили несколько всплывающих элементов создается какое то визуально неразличимы элементов например перенос строки и для этого переноса добавляется стиль clear босс таким образом проводится черта после нее идет обычный порядок без всплывания


Step 5 (S-44732) 5.png

[09:00 - 09:18] а однако сейчас стиль слово используется не только и не столько для а всплывание внутри текста сколько ли позиционирование элементов посмотрим как это делается а


[09:18 - 09:37] прежде чем приступить к рассмотрению 2 важных факта если у нас есть 2 float элемента то они выстраиваются друг за другом ну естественно если они у них одинаковости флота чтобы float left float right они устраиваются друг за друга а


[09:37 - 09:55] 2 факт элементы не раздвигают контейнер они его раздвигая только если он также является флот а теперь перейдем к рассмотрению допустим нас есть такая вешь здесь автор это некоторые контейнер в на рисунке он в сером обозначен


[09:55 - 10:15] внутри него есть несколько других дьяволов а у нас есть 5 дивов с классом сквер и с классом л здесь написано 1 0 5 на самом деле потом идет а div div с классом


[10:15 - 10:33] целом склеп потом еще 5 дивов а с классом фк а класса сквер это просто задание к красному квадрату чтобы было видно а вот эта float left clear


[10:33 - 10:50] это то самое то самое черта отсечение задача заключается в том чтобы понять какой из этих элементов является каким элементам верстки вот у нас есть 1 элемент с float left вот у нас есть


[10:50 - 11:09] а допустим 5 элемент который является словом расставить числа а давайте начнем 1 элемент у нас float left


[11:09 - 11:28] влево так цвет соответственно вот это это 1 день заметил он тоже float left поэтому выстраивается


[11:28 - 11:45] строчку потом идет 3 потом идет 4 а заметим что 4 float left диву элементу не хватило места в контейнере эти здесь не остается места


[11:45 - 12:01] поэтому он был перенесен на новую строчку то есть элементы внутри своей серии ведут себя чем то похожа на строки а потом был элемент с классом цв


[12:01 - 12:18] он на любой высоты поскольку удивление содержимого а сам он не отображается как с элементами высоты элемента начали всплывать вправо то есть прижиматься вправо вот это 5 див


[12:18 - 12:36] 6 7 и 8 а таким образом с помощью флот можно располагать элементы то есть вот это все принятые такой прием


[12:36 - 12:52] для создания галереи чего то а в чем преимущество вы размещаете галерею например картинок снабжает текстиля float left они будут образовывать последовательности в зависимости от того


[12:52 - 13:08] от ширины контейнера а у вас будет разное количество этих элементов строчки то есть если пользователь нажимает браузер вас будет 2 строчки он растягивает будет 4 элементов строчки а следующие


[13:08 - 13:24] важный прием при работе слово элемента деления страница попала для того чтобы разделить страницу пополам нам достаточно создать контейнер и 2 float элементов а


[13:24 - 13:41] естественно они будут себя вести следующим образом то есть 1 и 2 если этим элементом задать ширину по 50% каждому а при этом гарантирует что у них нет никаких отступов


[13:41 - 13:58] а они раздельны страницу ровно пополам это довольно популярный подход соответственно вы можете менять эти цифры не 50 50 20 80 я сделать левую колонку узкой правую колонку срок


[13:58 - 14:13] а так ведет себя стиль флот а теперь перейдем к стилю position которая отвечает непосредственно за позиционирование элемент 1 значение position static position static это означает


Step 5 (S-44732) 6.png

[14:13 - 14:29] обычная размещение элементов при таком размещении а применяются правила про которой вы говорили выше то есть если элемент отмечен как position static а для него применяются всплывания стиль слот


[14:29 - 14:46] для него применяется режим отображения то есть то блочный элемент элемент а он формирует он располагается в тексте документа в потоки документов по обычным правилам а position static это стиль по умолчанию для


[14:46 - 15:01] всех элементов то есть по умолчанию если вы не указываете никакой position а будет использоваться position static далее а проще начать с вот этого варианта position fixed


[15:01 - 15:20] пасечник создает расположения элемента относительно окна браузера при этом высота ширина элемент должен быть блочный а у него должна быть задана ширина высота чтобы вы увидели как какой то блок на экране а


[15:20 - 15:38] а его расположения внутри окна браузера определяется стилями то то есть можно задать положение сверху сверху слева справа или снизу а важно здесь понимает что расположение сдать семена так набрался


[15:38 - 15:53] поэтому если вы будете прокручивать документ а с помощью скролла этот элемент останется висеть а с помощью таких элементов часто делают а разного рода модальные окна веб страничке о которой не двигается при прокрутке например


[15:53 - 16:08] подтвердите удаление а документа либо что то такое а в отличие от position fixed а есть позишн абсолют а ведет себя


[16:08 - 16:24] также но а позиционируются и относительно окна относительно документа то есть а с помощью этого вы можете задать абсолютная расположения а относительно начала вашего документ этот блог


[16:24 - 16:43] которого за памяти как позишн абсолют будет скролятся прокручиваться вместе с самим документов важный момент расположение создается либо относительно документа либо относительно ближайшего родители которой


[16:43 - 17:01] обладает позиционированием relative абсолютный пофигист а например представим а представим такую схему нам необходимо сделать а ну вот у нас есть окно браузера


[17:01 - 17:18] в окне браузера есть какой то диалог в диалоги есть кнопка закрыть сам диалог вот это вот вещь мы делаем position fixed чтобы он


[17:18 - 17:34] веселка по центру окна браузера то есть вот этот текст а вот эту кнопочку нам нужно разместить в правом верхнем углу для нее мы создаем стиль позишн абсолют


[17:34 - 17:49] но поскольку родитель а эта кнопочка родительский так это вот этот вот этот блог то position fixed будет сдаваться относительно него можем задать right 10 пикселей


[17:49 - 18:07] 10 пикселей таким образом мы можем позиционировать абсолютно то есть создавать абсолютное положение относительно либо ближайшего документа определяющего элемента relative fixed либо


[18:07 - 18:22] относительно начало документа если такого вот родители нет мы наконец position relative это смещение относительно исходного положения на страниц а здесь все просто представьте что вас


[18:22 - 18:41] обычно позиционирование как будто не static а у вас элемент расположился на странице занял свое место а потом вы просто сдвигается влево вправо а в какую сторону относительно начального местоположения причем а вместо которого занимала страница она так и останется там где она находилась


[18:41 - 18:59] а сам элемент сдвинется часто сдаются а мы с дают никакого смещения для того чтобы внутри этого элемента можно было променять position написали вот таким образом работает


[18:59 - 19:15] позиционирование он используется очень активно для создания современных интерфейсов например модальных окон у которых нужно в нижней части прикрепить а диалог и тому подобное