Форматиране на абзац в HTML. Теория и практика

Описание

Задава ширината на блока или сменяеми елементи (например етикетът ). Ширината не включва дебелината на границите около елемента, подложките и полетата.

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

Синтаксис

ширина: стойност | лихва | авто | наследявам

Стойностите

Всички единици дължина, приети в CSS, се приемат като стойности - например пиксели (px), инчове (in), точки (pt) и др. Когато се използва процентно обозначение, ширината на елемента се изчислява в зависимост от ширината на родителския елемент. Ако родителят не е изрично посочен, тогава прозорецът на браузъра служи като негов родител.

Auto Задава ширината въз основа на вида и съдържанието на елемента. наследява Наследява стойността от родителя.

HTML5 CSS2.1 IE Cr Op Sa Sa Fx

Резултатът от този пример, както е показан в браузъра Safari, е показан на фиг. един.

Фигура: 1. Ширина на блока

Обектен модел

document.getElementById ("elementID") .style.width

Браузъри

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

Internet Explorer 7.0 или по-нова версия не поддържа наследствената стойност.

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

Докато изследвахме модела на CSS кутия, разбрахме, че свойствата за ширина и височина задават ширината и височината на вътрешната област на елемент ( област на съдържанието), който може да съдържа текст, изображения и други елементи.

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

Общата ширина на елемента се изчислява по формулата:

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

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

Стойността на свойството content-box е по подразбиране и изчислява общата ширина и височина на елемента съгласно класическата схема. Например ширина:

150 пиксела (персонализирана ширина) + 10 пиксела (лява подложка) + 10 пиксела (дясна подложка) + 10 пиксела (лява граница) + 10 пиксела (дясна граница) \u003d 190 пиксела.

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

Резултатът от нашия пример:

Контрол на преливане на блокови елементи

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

Нека да разгледаме следния пример:

В този пример сме поставили четири блокове с фиксирана ширина и височина, за които са посочени различни стойности на свойството CSS overflow:

• Първи блок (видима стойност) - съдържанието е извън границите на елемента (стойност по подразбиране).
• Втори блок (скрита стойност) - Съдържанието, което препълва елемента, се изрязва.
• Трети блок (стойност на превъртане) - Преливането се изрязва, но лентата за превъртане се добавя.
• Четвърти блок (автоматична стойност) - както при стойността на превъртане, само лентата за превъртане ще бъде добавена автоматично, ако блок прелива по определена ос ( х - хоризонтално, или у - вертикално), вместо постоянно да се показва на страницата.

Резултатът от нашия пример.

Описание

Атрибутите височина и ширина са предоставени за преоразмеряване на изображения с помощта на HTML. Разрешени са стойности в пиксели или проценти. Ако е зададен процент, тогава размерите на изображението се изчисляват спрямо родителския елемент - контейнера, в който се намира маркерът ... При липса на родителски контейнер това е прозорецът на браузъра. С други думи, width \u003d "100%" означава, че картината ще бъде разтегната до пълната ширина на уеб страницата. Добавянето само на един атрибут за ширина или височина запазва пропорциите и пропорциите на изображението. След това браузърът чака изображението да се зареди напълно, за да определи първоначалната му височина и ширина.

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

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

Синтаксис

Html
XHTML

Стойностите

Всяко положително цяло число в пиксели или проценти.

Стойност по подразбиране

Оригиналната ширина на изображението.

HTML5 IE Cr Op Sa Sa Fx

Описание

Задава височината на блока или сменяеми елементи (например етикетът ). Височината не включва дебелината на границите около елемента, подложките и полетата.

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

Синтаксис

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

Стойностите

Всички единици дължина, приети в CSS, се приемат като стойности - например пиксели (px), инчове (in), точки (pt) и др. Когато се използва процентно обозначение, височината на елемент се изчислява в зависимост от височината на родителския елемент. Ако родителят не е изрично посочен, тогава прозорецът на браузъра служи като негов родител. автоматично задава височината въз основа на съдържанието на елемента

HTML5 CSS2.1 IE Cr Op Sa Sa Fx

Резултатът от този пример е показан на фиг. един.

Фигура: 1. Прилагане на свойството височина

Обектен модел

document.getElementById ("elementID") .style.height

Браузъри

Internet Explorer 6 не определя правилно височината като минимална височина.

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

Internet Explorer 7.0 или по-нова версия не поддържа наследствената стойност.

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

CSS свойството width ви позволява да зададете ширината на областта на съдържанието на елемента, а свойството height височината на областта на съдържанието:

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

За този параграф ще зададем само ширината и височината.

Този параграф съдържа, освен ширината и височината, подложка, граница и подложка.

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

т.е. 180x130 пиксела.

Преливане на елементи

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

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