Блоково оформление на основния div

Съдържание

• Тагът DIV и свойството float
• Ясно свойство
• Отстъпи в блоково оформление

Всяка уеб страница се състои от елементи, разположени върху нея, а div оформлението на блока почти винаги отговаря за тяхното разположение. Разбира се, има и таблично оформление, използващо тагове

Факт е, че div оформлението на сайта ви позволява да зададете много css свойства, които не са налични за таблици. В допълнение, основният недостатък на табличната система е, че таблицата няма да се покаже на екрана, докато не бъде напълно заредена от браузъра. Ако целият сайт е направен в таблица, то той ще се появи на дисплея едва след пълното зареждане на целия html код на страницата.

Тагът DIV и свойството float

Основата на блоковата система е таг, който е контейнер за съдържание. Може да съдържа и други контейнери.

Използването на DIV таг не е по-сложно от редактирането на MP3 тагове. По правило стандартната структура на сайта се формира по следния начин: има основен контейнер (често му се присвоява клас, наречен wrapper, container, main и т.н.). Вътре в този контейнер са блоковете на менюто, тематичната част и страничната лента.

По подразбиране всеки нов блок се поставя на нов ред. За да поставите блок отляво или отдясно наelse (например за позициониране на страничната лента вдясно), се използва свойството float. По подразбиране има стойност „няма“, но можете също да зададете стойностите „ляво“ и „дясно“.

Разгледайте това свойство, като използвате пример с два блока.

Блок за съдържание Блок за страничната лента

Този код ще доведе до следния резултат:

Ясно свойство

Важно е да се има предвид, че свойството float се отнася не само за самия блок, в който е написано, но и за следващия елемент, който ще следва този блок. Тоест, ако към описаните по-горе два блока добавим още един блок, без да му задаваме никакви свойства, тогава той няма да се намира на нов ред, а ще започва отдясно на втория блок.

За да се избегне това, div оформлението на блока използва свойството clear, което трябва да бъде зададено за блока, който искаме да поставим от нов ред. Най-често за това се задава стойността "и двете", но можете също да зададете стойността "наляво" или "надясно", ако искаме не само да поставим блока на нов ред, но и да зададем неговото подравняване .

Нека добавим нов елемент към горния пример:

Блок за съдържание Блок за странична лента Нов блок, разположен отдолу

Резултат:

Отстъпи в блоково оформление

В допълнение към местоположението на блоковете е важно задаването на отстъпи както между блоковете, така и вътре в тях. За това се използват съответно свойствата на margin и padding.

Отстъпите се задават отделно за горната, дясната, долната и лявата част на елемента. Те могат да бъдат посочени в един ред чрез изброяване на четири стойности:

поле: 20px 10px 0 40px

Блок с такива параметри ще бъде разположен на 20 пиксела под най-високия елемент, на десет пиксела от стоящия елемент,ще има нулева подложка отдолу и ще има поле от 40px отляво.

Ако същите индикатори са посочени в свойството padding, то това ще бъдат вътрешните отстъпи на съдържанието спрямо границите на блока, в който се намира.

Можете също да зададете индивидуални свойства за отделни лица, като използвате margin-top margin-bottom, margin-left, margin-right (и подобно за подложка). В този случай, ако една от страните не е посочена, тогава отстъпът от нейната страна ще бъде нула или ще се определя от общите css свойства, посочени за блоковете на страницата.