Css - Урок 11
че е необходимо да настроите позицията имота с относително позициониране блок: относителното преместване и свойства. Преместването в този случай няма да се случи на елемента "майка" (като абсолютна позициониране) и по отношение на блок в нормалното протичане. Това ще бъде по-ясно с един пример. Нека да има HTML-страница с три DIV-а:
Да попитаме размера на стилове и границите на тези блокове:
Сега нашата страница в браузъра изглежда така:
Сега нека да промените позицията на втория блок на тази страница добави правило за стил:
Сега нашата страница ще изглежда така:
Втората ни блок изместен надолу и в дясно по отношение на мястото, където той е бил в нормалния поток. Останалата част от единиците останали на местата си. Почти относително позициониране се използва много често, така че ние няма да обръща повече внимание на това и да обмислят плаващи блокове.
Тези блокове не могат да бъдат позиционирани с точност до един пиксел, както и в предишните схеми, но това е позиционирането на веригата е много чести. Без да плава управлява рядко сайт, камо ли да се направи "каучук" оформление на сайта, без дори невъзможно.
Тези блокове могат да се движат свободно из страницата, по този начин се държат снимки в HTML, съобразени с параметър pomoschyu подравняване.
Плаващи единици се определят от поплавък имота. който определя дали плаващ блок и в каква посока ще се движи. Има три възможности:- лявата - блок натискане на ляво, другите елементи текат около него в дясно.
- Точно така - блок е натиснат в дясно, другите елементи текат около него от лявата страна.
- никой - единица не се премества и позициониран съгласно собственост позиция.
Нека разгледаме един пример. Нека да има HTML-страница със следния код:
Просто някои елементи на страницата. Това може да бъде обикновен текст, линкове, списъци, снимки и т.н.
И страница style.css със следния код:
Сега нашата страница в браузъра изглежда така:
Нека да направим нашата плаваща единица, и го натиснете към левия ръб:
Сега нашата страница в браузъра изглежда така:
Сега нека Стиснете блок в дясно:
Сега нашата страница в браузъра изглежда така:
А какво ще стане, ако плува на няколко страници на блоковете? Нека добавим нашия HTML страници друг блок:
Просто някои елементи на страницата. Това може да бъде обикновен текст, линкове, списъци, снимки и т.н.
И да ги помолите да различни стойности на свойствата на плувка.
Сега нашата страница в браузъра изглежда така:
И ако те имат една и съща стойност? Например:
След втория блок притиска десния край на първото устройство:
Подобна е ситуацията и ще бъдат едни и същи ценности прав.
Моля, обърнете внимание: първо до десния край ще натиснете единица 1, и го е притиска към блок 2.
И какво да правим, ако искаме да сме на блоковете бяха повдигнати в дясно, но трябва да бъдат разположени един над друг. За да направите това, там е ясно имота. който определя коя страна на плаващ блок не може да съществува съвместно с други плаващи единици. В etog свойства на един от четирите стойности може да се зададе:- лявата - блок трябва да се намира по-долу всички лявата страна на блокове.
- Точно така - блок трябва да се намира по-долу всички правилни блокове.
- и двете - блок трябва да се намира по-долу всички плаващи блокове.
- няма - няма граници, това е по подразбиране.
Сега това се е случило, тъй като той искаше: на една пресечка от друга:
В предишния урок, ние използваме абсолютно позициониране направи точно такава страница:
Нека да видим как може да се направи с помощта на плаващи блокове. Така че, най-кода на страницата, както следва: