Блоков модел на документ втори тест 16. Управление на блоковия CSS модел. Минимална и максимална височина на елемента

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

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

Много е лесно да избегнете това - просто не задавайте височината на съдържанието (височина). Понякога обаче трябва стриктно да определите височината на блока. В този случай можете да използвате свойството overflow със стойност auto. Това свойство ще създаде лента за превъртане в блока, ако размерът на съдържанието надвишава размера на блока.

Нека добавим свойството overflow към стила на пример № 9 със стойност auto и резултатът ще бъде такъв:

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

Минимална и максимална ширина на елемента

В тази статия също е уместно да си припомним свойствата min-width и max-width, които задават съответно минималната и максималната ширина на елемента.

Свойството min-width работи по следния начин: ако потребителят промени размера на прозореца на браузъра, ширината на блока не става по-малка от минимума и в този случай се появява лента за превъртане. Ширината на елемента ще зависи от стойностите на свойствата width, max-width и min-width.

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

свойство max-width - задава максималната ширина на елемента. Пример за използване на свойството max-width:

Минимална и максимална височина на елемента

По същия начин има свойства за задаване на минималната и максималната височина на елемент: min-height и max-height.

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

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

Казано по-просто, таговете в една страница се преобразуват в правоъгълници, когато се показват на екрана.

Структура на блоков елемент

Структурата на модела кутия не е особено сложна.

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

За да илюстрирате този проблем по-ясно, вижте фигурата по-долу:

Размерът на всеки компонент се коригира с помощта на подходящия CSS стил: марж– външни полета, граница– границите на самия елемент, и подплата– величина на вътрешните полета.

Също така си струва да се отбележи, че размерът на полетата и границите може да се контролира независимо за всяка страна, което е ясно илюстрирано на фигурата по-долу:

Фундаментални разлики между margin и padding

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

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

Друга отличителна черта на тези елементи се основава на изчисляването на общата ширина на блоковия компонент. По подразбиране подложката е включена в тази ширина, но полето не е. Това обстоятелство зависи от използвания модел на документен блок.

Видове блокови модели

Днес има само 2 различни модела блокови системи: традиционен, базиран на операционните характеристики на Internet Explorer 6 и общ, базиран на основните принципи на постулатите на W3C. Последният се използва от всички съвременни браузъри.

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

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

Според традиционната структура на системата от блокови елементи, съгласно правилата на Internet Explorer, свойствата за височина и ширина включват размерите не само на съдържанието, но и на неговите граници и подложки.

Въпреки това, по-модерната блокова система, която се регулира от постулатите на W3C, взема предвид само съдържанието при присвояване на свойства за ширина и височина. Ясна разлика е показана на фигурата по-долу:

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

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

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

Блок (ширина: 200px; подложка: 20px;)

Това означава, че елемент с клас блок ще бъде с ширина 200px, като се вземе предвид факта, че самото съдържание ще заема 180px, а останалите 20px ще се използват като padding.

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

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

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

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

Ето защо опитни уеб администратори се опитват да използват процентното обозначение на ширината възможно най-малко за блоково оформление според правилата на W3C.

Обобщаване

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

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

Моделът на кутията е една от основните концепции на оформлението.

Спецификацията на W3C дефинира тази концепция, както следва:

Моделът CSS кутия описва правоъгълна кутия, която се генерира за елемент в дървото на документа и се изобразява според модел на визуално форматиране.

На руски това означава, че елемент в HTML документ се показва в собствен отделен правоъгълен блок.

Елементна структура в блоков модел

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

За да контролирате всяка от съставните части на блока, има съответните CSS свойства: padding - , borders - , padding - . Ако желаете, тези свойства могат да бъдат зададени за всяка страна на блока поотделно (вижте фигурата):

Каква е разликата между вътрешна и външна подплата

И така, за даден елемент можете да зададете граници (рамка) и два вида отстъпи. С какво се различават?

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

Това води до втората разлика - ако зададете фон () за елемент, тогава както съдържанието, така и вътрешната подложка ще бъдат запълнени с този фон. Маржът, който е отвън, винаги остава прозрачен.

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

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

Какви са блоковите модели?

В момента има два основни блокови модела: модел от W3C, който се поддържа от всички основни браузъри и се нарича традиционен— поддържа се от IE6 в режим на обратна съвместимост.

Каква е разликата между различните модели блокове

Блоковата структура на елемента е абсолютно същата. Единствената разлика между различните модели е правила за оразмеряванеелемент.

В традиционния модел на кутия, който IE6 поддържа в режим на съвместимост, размерите на елемента, определени от свойствата и , включват съдържанието на елемента, подложката и рамката.

В кутийния модел на W3C размерите на елемент, определени от свойствата за ширина и височина, включват само частта със съдържанието. Това означава, че ширината и височината не включват нито размерите на подложката, нито размерите на границите (вижте фигурата).

Действителната ширина на елемента съответно ще бъде равна на: + + + + .

Съответно, същият пример „ширина на елемента 100px и подложка 10px от всяка страна“ вече ще даде блок с обща ширина 120px! Тъй като width:100px означава точно 100px за областта на съдържанието. Всички подложки и граници се добавят към тази фиксирана стойност.

Логиката също е ясна: основното в един блок е неговото съдържание. И ако казах сто пиксела, това означава сто и никакви подложки или граници няма да променят нищо за мен!

На пръв поглед всичко е лесно и просто! Но го нямаше…

Какво да направите, например, в ситуация, в която ширината на елемента е 100%, но подложката и/или рамката не са равни на 0? Тогава действителната ширина на елемента ще бъде по-голяма от 100%, а това не винаги е желателно.

Това е най-голямата трудност на блоковия модел на W3C: когато ширината е посочена в проценти, а подложката и рамката са в пиксели. Тази ситуация трябва, ако не да се избягва, то поне да се използва по-рядко и с разбиране на проблема.

Блоково управление на модела

Както е описано по-горе, кутийният модел на W3C може да причини много проблеми в някои случаи, така че мъдрите хора от същия W3C са включили в CSS3 възможността за превключване между модела на кутия на W3C и традиционния модел на кутия, използвайки свойството CSS3. Повече подробности за това къде и как може да се използва това са описани в статията.

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

Дали кутията е създадена или не, както и типът на тази кутия зависи от езика за маркиране. CSS е проектиран като начин за стилизиране на HTML документи, така че моделът за визуално изобразяване на CSS до голяма степен се корени в разликите между блоковите и вградените елементи в HTML. По подразбиране елементите p и section създават полета на ниво блок, а таговете a, span и em създават вградени полета. SVG изобщо не използва модел на кутия, така че повечето свойства на оформлението на CSS не работят с SVG.

Кутиите на ниво блок създават нови блокове от съдържание, както се вижда на фигура 4.1. Блоковите кутии се изобразяват вертикално в първоначалния им ред и запълват (с изключение на таблиците) цялата ширина на контейнера. Това е нормалното показване на блок, елемент от списък, таблица и други таблици-* стойности (напр. клетка-таблица).

Фигура 4.1. полета на ниво блок в тагове h1, p, ul и table вътре в контейнера (сива зона)

Кутиите на вградено ниво не образуват нови блокове със съдържание. Тези кутии създават линии вътре в блокова кутия. Те се показват хоризонтално и запълват ширината на контейнерната кутия, като прескачат на нови редове, ако е необходимо, както е показано на Фигура 4.2. Кутиите на вградено ниво включват стойности на свойствата за показване inline, inline-block, inline-table и ruby.

Фигура 4.2. пример за вградено поле с margin: 1em и padding: 5px

Но как се изчисляват размерите на кутията? Тук нещата стават малко по-сложни. На Фигура 4.3 можете да видите, че размерите на кутията са сумата от областта на съдържанието, подложката и ширината плюс ширината на рамката, както е дефинирано в CSS2. Ширината на полето създава поле за поле на елемента и засяга други елементи в документа, но по никакъв начин не влияе на размера на самото поле.

Фигура 4.3. блоков модел по CSS 2.1

Например p таг с ширина: 300px, padding: 20px и border: 10px ще има изчислена ширина от 360px. Ширината се състои от ширината на абзаца, лявата и дясната подложка, както и ширината на лявата и дясната граница. За да направите общата ширина на елемента 300px, като същевременно поддържате 20px подложка и 10px рамка, трябва да зададете ширина: 240px. Повечето браузъри изчисляват ширината по този начин. Но това не важи за IE 5.5.

IE 5.5 използва свойството width като крайна стойност за размерите на кутията, принуждавайки подложката и рамката вътре в кутията, както е показано на Фигура 4.4. И двете стойности се изваждат от ширината, намалявайки размера на областта на съдържанието. Много програмисти смятат този подход за по-разумен, въпреки че не работи според спецификацията.

Фигура 4.4 Модел на кутия в CSS 2.1 и модел на кутия в стария IE 5.5

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

Избор на модел на кутия с помощта на свойството box-sizing

Свойството box-sizing е дефинирано в спецификацията CSS Basic User Interface Module Level 3 и приема две възможни стойности: content-box и border-box.

По подразбиране е content-box. С тази стойност свойствата за ширина и височина влияят върху размера на областта на съдържанието, което е същото поведение, както е описано в спецификацията на CSS 2.1. Това поведение е по подразбиране в съвременните браузъри (както е показано на фигура 4.4).

Стойността на border-box добавя малко магия. Свойствата за ширина и височина започват да се прилагат към външната граница на рамката, а не към областта на съдържанието. Контурът и подложката се изчертават вътре в полето на елемента, което е същото като старото поведение в IE 5.5. Нека да разгледаме пример, в който ширината в проценти се комбинира с px върху подложката и рамката:

CSS кодът по-долу се прилага към етикетите article и aside, което ни дава оформлението, показано на фигура 4.5, където първият елемент е 60% широк, а вторият е 40% широк:

статия, отстрани (фон: #FFEB3B; граница: 10px плътен #9C27B0; плаващ: отляво; подложка: 10px;) статия (ширина: 60%;) отстрани (ширина: 40%;)

Фигура 4.5. елементи с оразмеряване на кутия: content-box

По подразбиране, aside и article имат свойството box-sizing, зададено на content-box. Стойностите за ширина на границата и подложка добавят 40 пиксела към ширината на елементите, което променя съотношението на 60%/40%. Нека добавим свойство box-sizing: border-box към статията и странични тагове:

статия, настрана ( box-sizing: border-box; )

Промените са показани на Фигура 4.6: ширината на елементите е запазена, но поради оразмеряването на кутията: border-box, ширината вече също се състои от граница и подложка. Ширината вече се прилага към външния ръб на рамката, а не към областта на съдържанието, така че нашите елементи са плътно опаковани и не се преместват на нов ред.

Фигура 4.6 елементи с оразмеряване на кутия: border-box

Бих предложил да използвате свойството box-sizing: border-box. Това прави живота по-лесен; не е необходимо да изчислявате ширината, за да коригирате ширината за подложка и рамка.

Най-добре е да използвате box-sizing: border-box с правила за нулиране. Примерът по-долу е взет от статията на Chris Coyier в CSS-Tricks "