Здравейте, днес ще разгледаме такъв важен елемент на сайта като блок и тази статия е неразривно свързана със статия за блоков дизайн, в която разгледахме как можете да създадете както блок контейнери, така и вградени елементи за нашия сайт на сайт. След като проучих тази статия, съм сигурен, че ще ни стане много по-ясно как да работим с блокове и това ще бъде много значима стъпка към създаването на собствен уебсайт.

Височината и ширината на блока в CSS.

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

Височината на блока в CSS се задава с помощта на командата за височина: auto |<высота в единицах измерения>| наследете и както вече разбрахте, можем да зададем височината на блока с помощта на командата auto, даваме командата на браузъра, че той може сам да определи размера на блока и по този начин блокът ще бъде с такъв размер че ще пасне на всички елементи и не повече.

Командата inherit ще ви позволи да заемате параметри от родителския елемент и тези стойности ще бъдат видими само ако са зададени параметри за родителския елемент. Но най-често трябва да зададете размера на блока конкретно, просто посочете размера в една от приетите стойности (най-често това са пиксели).

Можем също да зададем размера спрямо родителския елемент и за това трябва да използваме проценти. Нека видим как изглежда на практика.

Тази команда дава да се разбере на браузъра, че за конкретен елемент на страницата трябва да зададете размера на десет процента от размера на родителския блок.

Ширината на блока в CSS се задава с помощта на ширината: auto |<ширина>| наследи всички параметри са еднакви както за височината, така и за ширината на блока и мисля, че не си струва да се повтаря отново. Искам само да кажа, че не е необходимо да задавате специално както височината, така и ширината на блока, можете да зададете, например, ширината и височината ще се увеличават в зависимост от съдържанието и което е много удобно, ако не го направите знаете какво съдържание ще бъде конкретна страница.

Минималната и максималната ширина на блока.

Също така за всеки блок можем да зададем не специфични параметрино минималният и максималният параметър за всеки блок в сайта. Благодарение на това можете да попълните блоковете без страх, че ще излязат извън прозореца на браузъра.

За да зададете това е много просто, трябва да регистрираме следните параметри, за да зададем минималната ширина и височина:

мин. ширина:<ширина>

мин. височина:<высота>

И за максимума са необходими два параметъра:

максимална ширина:<ширина>
максимална височина:<высота>

Сега можем да зададем както максимума, така и минимален размерза блок или изцяло за целия сайт, а това е важно за сайт с гумен дизайн; ако е фиксиран, този параметър няма да работи.

Опции за разполагане с плаваща сила в css.

Във всички предишни примери, където създавахме контейнери и елементите се поставят един след друг в ред, но това не е достатъчно, за да създадем дизайн, имаме нужда от възможността да поставяме елементи по наша преценка и свойството ще ни помогне за това float към cssи сега ще анализираме приложението от този имотна практика.

Параметърът float може да приеме няколко стойности и сега ще разберем какви са тези параметри:

float: ляво | дясно | няма | наследи

Сега нека разгледаме всеки пример поотделно.

Командата float: left означава, че полето трябва да бъде подравнено вляво и всички други елементи ще се движат около него вдясно.

float: вдясно е точно обратното на предишната команда и съответно блокът ще бъде подравнен вдясно и всички елементи ще се движат около него вляво.

float: няма стандартно поведение за всеки блок, поставяйки блоковете един след друг. Използването на този параметър сега не е актуално и се използва много рядко и по-скоро просто поради неграмотност.

Параметърът clear в css.

Много често, когато създавате дизайн върху блокове с помощта на командата float, трябва да дадете команда на някои блокове, така че те да не се движат около блока, а да се държат както обикновено, като се поставят под всички останали. Този проблем преди беше решен с помощта на командата float: none за необходимия блокно дисплеят във всеки браузър може да бъде различен и затова в такива случаи е много по-рационално да се използва командата clear и сега ще видим как може да стане това.

ясно: ляво | дясно | и двете | няма | наследи

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

Командата clear: left означава, че елементът се поставя под всички елементи с параметър float: left.

Командата clear: right поставя полето под всички елементи float: right.

Ясният: и двата параметъра поставя елемента под всички блокове с двата параметра float: left и float: right.

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

Прилагаме всички знания на практика.

И така стигаме до заключението на статията, в която трябва да видим как можем да приложим всичко това на практика и първото нещо, което правим, е да създадем прост скелет за сайта. Ето как ще изглежда нашата телена рамка.

Както можем да видим за телената рамка, трябва да създадем четири DIV и към тях ще трябва да приложим както размера, така и параметрите за разположение.

Създадохме четири блока и сега трябва да ги напълним с информация и да зададем фон за всеки блок, за да можем да видим кой блок е поставен и къде. Можете да разберете за настройката на фона. И това е какъв код трябва да имаме.

След това трябва да влезем в таблицата със стилове и да регистрираме всички команди, от които се нуждаем. Командите са еднакви за всички блокове, само че всеки има свои собствени параметри.

Заглавие (ширина: 500px; ширина на блока
височина: 100px; височина на блока
фон-цвят: # 33CCFF;) цвят на блока

Съдържание (ширина: 400px; ширина на блока
височина: 400px; височина на блока
цвят на фона: # 33FF33; блоков цвят
float: ляво;) блок позиция

Странична лента (ширина: 100px; ширина на блока
височина: 400px; височина на блока
цвят на фона: #CCCCCC; блоков цвят
float: ляво;) блок позиция

Долен колонтитул (ширина: 500px; ширина на блока
височина: 100px; височина на блока
цвят на фона: # 0000FF; блоков цвят
ясно: и двете;) стандартна блокова позиция

И след като напишем всички тези команди, ще получим такъв скелет за сайта.

Преди да говоря за работата с размерите на елементите, тяхното подреждане, полета и отстъпи, ще ви разкажа малко за самите елементи, по-точно за техните видове.

Всички елементи (тагове) могат да бъдат разделени на две категории: Block и Inline.

Каква е разликата?

Мисля, че самите имена вече говорят за разликите. Елементите на блок или кутия са контейнери, правоъгълни зонина компютърен монитор, на който без затруднения и изобретение за велосипед може да се присвои определена позиция, размер, да се поставят други блокове в тях и да се определи местоположението един спрямо друг. А низови елементиса разположени в една и съща времева линия, подравнени с основната й линия и като правило се използват за форматиране и редактиране на текст.

Да блокирам ( блок) елементите включват: