Оразмеряване в CSS: изчисляване на размерите на блоковете

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

CSS блок модел

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

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

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

Всички изброени полета може да липсват или празни.

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

Определяне на реалните размери на даден елемент

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

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

.блок {ширина: 200px; височина: 100px; подложка покрив: 20px; подложка дъно: 20px; подложка ляв: 10px; подложка десен: 10px; граница: 5px в твърдо}

Въпреки факта, че блоковият елемент получава ширина от 200 пиксела, той всъщност ще заема 230 пиксела на страницата, като се вземат предвид рамката и страничните падове. По подобен начин се изчислява височината: вместо приетите 100 пиксела, блокът ще заема вертикално 150.

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

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

Управление на изчислителния алгоритъм

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

За характеристиката за оразмеряване на CSS клетка, по подразбиране е предвидимо поле за съдържание. Но има още една стойност за избор.

.блок {размер на кутията: border-box-width: 100px; border: 5px; padding: 10px;}

Стойността на оразмеряването в кутийката: кутийката за полета в CSS инструктира браузъра да започне от размерите на елемента като цяло заедно с границата и вътрешните вдлъбнатини в областта на съдържанието. Действителният размер на блоковия елемент ще бъде точно 100 пиксела, но съдържанието му ще трябва да бъде ужасено до 70 пиксела хоризонтално.

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

block1 {ширина: 500px; граница: 5px; подложка: 30px; кутия оразмеряване: границите box-} блок2 {ширина: 500px; граница: 5px; подложка: 30px; кутия оразмеряване: съдържание box-}

Забележка за оразмеряване на кутията: Ограничителната кутия ви позволява да зададете фиксирани размери, които няма да зависят от вдлъбнатината и дебелината на рамката.

// Действителната ширината на блок е 300 pikseley.block {ширина: 300px; кутия оразмеряване: границите кутия подложка: 10px;} // размер подложка е променило, но размерът на блок бяха prezhnimi.block {ширина: 300px; кутия оразмеряване: разделителна рамка: 15px;}

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