Височина и ширина на елементаса изчислени стойности. Всеки елемент на уеб страница образува правоъгълна област, която от своя страна се състои от няколко области - област на съдържанието (съдържание), зони за подплата, рамкови зонии полеви зониелемент.
Между съдържанието на елемента и неговата граница са вдлъбнатинаподплата, извън границата на елемента - полетамарж. Всеки елемент има област на съдържание, други области са по избор.
Ориз. 1. Блоков модел на елемент 1. Височина на елемента
Свойството height задава височината на съдържанието на блоковия елемент и няма ефект върху показването на вградените елементи: inline; ... Височината на вградените елементи е равна на височината на тяхното съдържание. Не се допускат отрицателни стойности. Имотът не се наследява.
Синтаксис
P (височина: 100px;)
2. Ширина на артикула
Свойството width задава ширината на съдържанието на блоковия елемент и няма ефект върху показването на вградените елементи: inline; ... Вградените елементи имат същата ширина като тяхното съдържание. Отрицателните стойности не се допускат. Имотът не се наследява.
Синтаксис
P (ширина: 100px;)
3. Височина и ширина на абсолютно позициониран елемент
Задайте ширината и височината на абсолютно позициониран елемент позиция: абсолютна; не винаги е необходимо, тъй като в този случай височината и ширината имплицитно се определят от изместването на елемента. Ако за даден елемент са посочени граници и полета, те намаляват размера на областта на съдържанието със съответните стойности.
Div (фон: # 6A7690; позиция: абсолютна; отгоре: 0; отдолу: 0; отляво: 50%; отдясно: 0;) / * в този случай височината на елемента е 100%, ширината е 50%от родителския блок * / 
Ориз. 2. Височина и ширина на абсолютно позициониран елемент
4. Отстъпи на елементите
Използвайки свойството padding, можете да зададете padding за няколко страни на елемент едновременно в следния ред :. Ако елементът има фон, той ще се разшири и до подложката. Не се допускат отрицателни стойности. Имотът не се наследява.
Ако са дадени три стойности, например div (padding: 10px 20px 30px;), те ще бъдат разпределени в следния ред: първата стойност е горната подложка, втората е дясната и лявата подложка, а трето е долната подложка.
Ако са дадени две стойности, например div (padding: 10px 20px;), тогава първата ще зададе горната и долната подложка, втората ще зададе дясната и лявата.
Единична стойност като div (padding: 10px;) ще зададе една и съща подложка от всички страни на елемента.
Синтаксис
P (подложка: 5px 10px 15px 10px;)
4.1. Отстъп от едната страна на елемент
За да зададете подложката само от едната страна на елемент, трябва да използвате едно от свойствата на padding-top, padding-right, padding-bottom, padding-left, например:
P (подложка отляво: 10px;)
5. Елементни полета
Повечето елементи са разделени един от друг с полета. Свойството margin е стенографска форма за писане на полетата на елемент в следния ред: отгоре, надясно, отдолу, отляво... Използва се, когато трябва да посочите полета от няколко страни, но не непременно от четири страни. Вертикално съседните полета на блоковите елементи се сриват, а горните и долните граници нямат ефект върху вградените елементи. Допускат се отрицателни стойности. Имотът не се наследява.
Ако са дадени три стойности, например div (margin: 10px 20px 30px;), те ще бъдат разпределени в следния ред: първата стойност е горната граница, втората е дясната и лявата граница, а трето е долният марж.
Ако са дадени две стойности, например div (margin: 10px 20px;), тогава първата ще зададе горните и долните полета, втората ще зададе дясната и лявата страна.
Единична стойност като div (margin: 10px;) ще зададе еднакви полета от всички страни на елемента.
(margin: 0 auto;) ще работи само ако ширината на елемента е изрично зададена.
Ориз. 3. марж: авто; за абсолютно позициониран елемент Синтаксис
Div (поле: 5px 10px 2px 5px;)
5.1. Полетата от едната страна на елемента
Свойствата margin-top, margin-right, margin-bottom, margin-left контролират съответните полета от всяка страна на елемента, например:
P (поле вляво: 10px;)
6. Ограничаване на ширината и височината
CSS поддържа и няколко други свойства, свързани с настройката на височината и ширината на елементите на уеб страницата: min-height, min-width, max-height и max-width. Тези свойства ви позволяват да зададете минималните и максималните стойности за ширината или височината на даден елемент, давайки на елемента възможност да запълни наличното пространство. Свойствата често се използват за адаптивен дизайн на уеб страници. Прилага се за всички елементи, освен вградените и табличните елементи. Те винаги следват основното правило, т.е. след като даде на елемента височина или ширина. Не се наследява.
Можете да зададете обикновени размери, като използвате някои мерни единици, и ограничения на размера, като използвате други единици, например:
Div (ширина: 400px; макс. Ширина: 50%;)
Елементът ще има ширина 400px само ако тази стойност не надвишава 50% от ширината на контейнерния блок, в противен случай ширината му ще бъде намалена.
В тази статия ще разгледаме как можете да зададете височина на блок като процент от ширината му в CSS. Нека разгледаме приложението на тази технология, като използваме примера за създаване на Bootstrap въртележка (плъзгач) от изображения с различни размери.
Създаване на блок с височина, която има определен процент от ширината му
- Създайте HTML структура от 2 блока:
Първият блок има 2 класа. Използвайки класа, отговарящ на елементите, ще зададем относителното позициониране на блока. Това трябва да се направи така, че 2 блокът (който ще има абсолютно позициониране) се намира спрямо него. В допълнение, този клас се използва и за добавяне на псевдоелемента: before преди съдържанието на съответните елементи (реагиращ на елемент). Този елемент ще зададе желаната височина на полето спрямо ширината му, като използва CSS свойството padding-top. Номерът на този метод е, че ако свойството padding е настроено на не в пиксели, а в проценти, тогава той ще бъде изчислен от браузъра спрямо неговата ширина... По този начин е възможно да се получи блок с необходимата височина. Следващата стъпка е да дадете на блок 2 абсолютно позициониране и да го подравните с първия блок.
- Добавете следния CSS към страницата: .item-responsive (position: relative; / * relative positioning * /) .item-responsive: before (display: block; / * визуализира елемента като блок * / content: ""; / * съдържание псевдоелемент * / ширина: 100%; / * ширина на елемента * /) .item-16by9 (подложка отгоре: 56.25%; / * (9:16) * 100% * /). .content (позиция: абсолютна; / * абсолютна позиция на елемента * / / * позиция на елемента * / отгоре: 0; отляво: 0; отдясно: 0; отдолу: 0;) / * Ако е необходимо (за блокове с тези класове) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (padding-top: 50%; / * (1: 2) * 100 % * /) .item -1by1 (подложка: 100%; / * (1: 1) * 100% * /)
Прилагане на горната технология за създаване на Bootstrap въртележка
Ако не сте запознати с Bootstrap и искате да знаете какво представлява, можете да разгледате нашето Въведение в Bootstrap.
Нека разгледаме пример, където горната HTML структура и CSS код ще бъдат използвани за показване на слайдове с въртележка на Bootstrap.
Ще използваме следните файлове като изображения:
- carousel_1.jpg (ширина = 736px, височина = 552px, съотношение на страните (височина към ширина) = 1,33);
- carousel_2.jpg (ширина = 1155px, височина = 1280px, съотношение на страните (височина към ширина) = 0,9);
- carousel_3.jpg (ширина = 1846px, височина = 1028px, съотношение (височина към ширина) = 1,8);
- carousel_4.jpg (ширина = 1140px, височина = 550px, съотношение на страните (височина към ширина) = 2.07);
- carousel_5.jpg (ширина = 800px, височина = 600px, съотношение (височина към ширина) = 1,33);
Ще зададем изображенията като фон. Това ще позволи да се използват изображения с различни пропорции в въртележка Bootstrap 3.
HTML маркировка на въртележката:
CSS код на въртележка:
Отговарящ на елемент (позиция: относително; / * относително позициониране * /). Отзивчив за елемент: преди (дисплей: блок; / * рендиращ елемент като блок * / съдържание: ""; / * съдържание на псевдо елемент * / ширина: 100 %; / * ширина на елемента * /) .item-16by9 (padding-top: 56.25%; / * (9:16) * 100% * /) .tem-responsive> .content (позиция: абсолютна; / * абсолютна позиция на елемента * / / * позиция на елемента * / отгоре: 0; отляво: 0; отдясно: 0; отдолу: 0; размер на фона: корица! важно;)
По подразбиране autowidth се използва за блокови елементи. Това означава, че елементът ще бъде опънат хоризонтално точно толкова, колкото има свободно пространство. Височината по подразбиране на блоковите елементи се задава автоматично, т.е. браузърът разтяга зоната на съдържанието вертикално, за да покаже цялото съдържание. За да зададете персонализирани размери за областта на съдържанието на елемент, можете да използвате свойствата за ширина и височина.
CSS свойството width ви позволява да зададете ширината на областта на съдържанието на елемент, а свойството height ви позволява да зададете височината на областта на съдържанието:
Обърнете внимание, че свойствата за ширина и височина определят само размера на областта на съдържанието; за да се изчисли общата ширина на блоков елемент, добавете ширината на областта на съдържанието, лявата и дясната подложка и ширината на лявата и дясната граница. Същото важи и за общата височина на елемента, само всички стойности се изчисляват вертикално:
За този параграф ще зададем само ширината и височината.
Този параграф, освен ширината и височината, съдържа подложки, рамки и подложки.
Опитвам "Примерът ясно показва, че вторият елемент заема повече място от първия. Ако изчислявате по нашата формула, тогава размерите на първия параграф са 150x100 пиксела, а размерите на втория абзац са:
| Обща височина: | 5 пиксела | + | 10 пиксела | + | 100 пиксела | + | 10 пиксела | + | 5 пиксела | = 130 пиксела |
| горен кадър | горен отстъп | височина | нисък отстъп | дъно кадър |
тоест 180x130 пиксела.
Препълване на елементи
След като сте определили ширината и височината на елемента, си струва да обърнете внимание на една важна точка - съдържанието, разположено вътре в елемента, може да надвишава определения размер на блока. В този случай част от съдържанието ще излезе извън границите на елемента, за да избегнете този неприятен момент, можете да използвате свойството CSS overflow. Свойството overflow казва на браузъра какво да прави, ако съдържанието на блока надвишава неговия размер. Това свойство може да приема една от четирите стойности:
- visible е стойността по подразбиране, използвана от браузъра. Задаването на тази стойност ще има същия ефект като не задаване на свойството за препълване.
- превъртане - добавя вертикални и хоризонтални ленти за превъртане към елемента.
- auto - добавя ленти за превъртане, ако е необходимо.
- скрито - скрива част от съдържанието, което излиза извън границите на блоковия елемент.
Описание
Задава височината на блок или сменяеми елементи (например етикетът ). Височината не включва дебелината на границите около елемента, подложките и полетата.
Ако съдържанието на блока надвишава определената височина, тогава височината на елемента ще остане непроменена и съдържанието ще се покаже отгоре. Тази функция може да доведе до припокриване на съдържанието на елементите, когато елементите в HTML кода са последователни. За да предотвратите това, добавете overflow: auto към стила на елемента.
Синтаксис
височина: стойност | лихви | авто | наследявам
Стойностите
Всички стойности, приети в CSS, се приемат като стойности- например пиксели (px), инчове (in), точки (pt) и т.н. родителския елемент. Ако родителят не е изрично посочен, тогава прозорецът на браузъра се използва като негов родител. auto задава височината въз основа на съдържанието на елемента
HTML5 CSS2.1 IE Cr Op Sa Fx
Резултатът от този пример е показан на фиг. 1.
Ориз. 1. Прилагане на свойството height
Обектен модел
document.getElementById ("elementID") .style.height
Браузъри
Internet Explorer 6 неправилно определя височината като минимална височина.
В режим на прищявка Internet Explorer до и включително 8.0 неправилно изчислява височината на елемент, без да добавя към него стойности за подложка, поле и граница.
Internet Explorer до и включително версия 7.0 не поддържа стойността за наследяване.
The височина CSS свойството определя височината на елемент. По подразбиране свойството определя височината на областта със съдържанието. Ако размерът на кутията е зададен на border-box, той вместо това определя височината на граничната област.
Източникът за този интерактивен пример се съхранява в хранилище на GitHub. Ако искате да допринесете за проекта за интерактивни примери, моля, клонирайте https://github.com/mdn/interactive-examples и ни изпратете заявка за изтегляне.
Свойствата за минимална височина и максимална височина отменят височината.
Синтаксис
/ * Стойност на ключовата дума * / височина: автоматично; / *Стойности
CSS тип данни представлява стойност на разстояние. Дължините могат да се използват в многобройни CSS свойства, като ширина, височина, поле, подплънки, ширина на границата, размер на шрифта и сянка на текст. ">Официален синтаксис
Пример
Html
CSS
div (ширина: 250px; поле на дъното: 5px; граница: 2px плътно синьо;) #taller (височина: 50px;) #по-късо (височина: 25px;) #прозрачно (височина: 100px;) #дете (височина: 50% ; ширина: 75%;)Резултат
Съображения за достъпност
Уверете се, че елементите, зададени с височина, не са отсечени и / или не скриват друго съдържание, когато страницата е увеличена, за да се увеличи размерът на текста.
Спецификации
| Спецификация | Състояние | Коментирайте |
|---|---|---|
| CSS Вътрешен и външен модул за оразмеряване Ниво 4 |
Чернова на редактора | |
| CSS Вътрешен и външен модул за оразмеряване Ниво 3 Определението за „височина“ в тази спецификация. |
Работен вариант | Добавени са ключови думи за максимално съдържание, минимално съдържание и подходящо съдържание. |
| CSS преходи Определението за „височина“ в тази спецификация. |
Работен вариант | Изброява височината като анимация. |
| CSS ниво 2 (ревизия 1) Определението за „височина“ в тази спецификация. |
Препоръка | Добавя поддръжка за типа данни CSS, представлява стойност на разстояние. Дължините могат да се използват в многобройни CSS свойства, като ширина, височина, поле, подплънки, ширина на границата, размер на шрифта и сянка на текст. "> |
| CSS ниво 1 Определението за „височина“ в тази спецификация. |
Препоръка | Първоначално определение. |
| Начална стойност | Автоматичен |
|---|---|
| Отнася се за | всички елементи, освен незаменени вградени елементи, колони в таблици и групи колони |
| Наследени | не |
| Проценти | Процентът се изчислява по отношение на височината на генерирания блок, съдържащ блок. Ако височината на съдържащия блок не е посочена изрично (т.е. зависи от височината на съдържанието) и този елемент не е абсолютно позициониран, стойността се изчислява Процентна височина на основния елемент е спрямо първоначалния съдържащ блок. |
| Медиите | визуално |
| Изчислена стойност | процент или автоматично или абсолютната дължина |
| Тип анимация | CSS тип данни се интерполират като реални числа с плаваща запетая. "> дължина, CSS тип данни се интерполират като реални числа с плаваща запетая."> процент или calc (); |
| Каноничен ред | уникалният недвусмислен ред, определен от официалната граматика |
Съвместимост на браузъра
Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако искате да допринесете за данните, моля, разгледайте https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.
Актуализирайте данните за съвместимостта на GitHub
| работен плот | Подвижен | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Ръб, край | Firefox | Internet Explorer | Опера | Сафари | Уеб изглед за Android | Chrome за Android | Firefox за Android | Opera за Android | Safari на iOS | Интернет на Samsung | |
| височина | Chrome Пълна поддръжка 1 | Edge Пълна поддръжка 12 | Пълна поддръжка на Firefox 1 | IE Пълна поддръжка 4 | Opera Пълна поддръжка 7 | Safari Пълна поддръжка 1 | WebView Android Пълна поддръжка 1 | Chrome Android Пълна поддръжка 18 | Firefox Android Пълна поддръжка 4 | Opera Android Пълна поддръжка 10.1 | Safari iOS Пълна поддръжка 1 | Samsung Internet Android Пълна поддръжка 1.0 |
| fit-content | Chrome Пълна поддръжка 46 | Edge Няма поддръжка No | Firefox Няма поддръжка Не | IE Няма поддръжка Не | Opera Пълна поддръжка 33 | Safari Пълна поддръжка 11 Пълна поддръжка 11 Пълна поддръжка 9 Префикс Префикс | Opera Android? | Safari iOS Пълна поддръжка 11 Пълна поддръжка 11 Пълна поддръжка 9 Префикс Префикс Изпълнено с префикса на доставчика: -webkit- | ||||
| максимално съдържание | Chrome Пълна поддръжка 46 | Edge Няма поддръжка No | Префикс Префикс | IE Няма поддръжка Не | Opera Пълна поддръжка 44 | Пълна поддръжка на Safari 11 | WebView Android Пълна поддръжка 46 | Chrome Android Пълна поддръжка 46 | Префикс Префикс Изпълнено с префикса на доставчика: -moz- | Samsung Интернет Android Пълна поддръжка 5.0 | ||
| min-съдържание | Chrome Пълна поддръжка 46 | Edge Няма поддръжка No | Firefox Пълна поддръжка 66 Пълна поддръжка 66 Пълна поддръжка 3 Префикс Префикс Изпълнено с префикса на доставчика: -moz- | IE Няма поддръжка Не | Opera Пълна поддръжка 44 | Пълна поддръжка на Safari 11 | WebView Android Пълна поддръжка 46 | Chrome Android Пълна поддръжка 46 | Firefox Android Пълна поддръжка 66 Пълна поддръжка 66 Пълна поддръжка 4 Префикс Префикс Изпълнено с префикса на доставчика: -moz- | Opera Android Пълна поддръжка 43 | Safari iOS Пълна поддръжка 11 | Samsung Интернет Android Пълна поддръжка 5.0 |
| опъвам, разтягам | Chrome Пълна поддръжка 28 Webkit-fill-available"> Алтернативно име Пълна поддръжка 28Webkit-fill-available"> Алтернативно име Webkit-fill-available"> Алтернативно име | Edge Няма поддръжка No | Firefox Няма поддръжка Не | IE Няма поддръжка Не | Opera Пълна поддръжка 15 Webkit-fill-available"> Алтернативно име Пълна поддръжка 15Webkit-fill-available"> Алтернативно име Webkit-fill-available"> Алтернативно име Използва нестандартното име: -webkit-fill-available | Пълна поддръжка на Safari 9 Webkit-fill-available"> Алтернативно име Пълна поддръжка 9Webkit-fill-available"> Алтернативно име Webkit-fill-available"> Алтернативно име Използва нестандартното име: -webkit-fill-available | WebView Android Пълна поддръжка 4.4 Webkit-fill-available"> Алтернативно име Пълна поддръжка 4.4Webkit-fill-available"> Алтернативно име Webkit-fill-available"> Алтернативно име Използва нестандартното име: -webkit-fill-available | Chrome Android Пълна поддръжка 28 Webkit-fill-available"> Алтернативно име Пълна поддръжка 28Webkit-fill-available"> Алтернативно име Webkit-fill-available"> Алтернативно име Използва нестандартното име: -webkit-fill-available | Firefox Android Няма поддръжка Не | Opera Android? | Safari iOS Пълна поддръжка 9 Webkit-fill-available"> Алтернативно име Пълна поддръжка 9Webkit-fill-available"> Алтернативно име Webkit-fill-available"> Алтернативно име Използва нестандартното име: -webkit-fill-available | Samsung Интернет Android Пълна поддръжка 5.0 Webkit-fill-available"> Алтернативно име Пълна поддръжка 5.0Webkit-fill-available"> Алтернативно име Webkit-fill-available"> Алтернативно име Използва нестандартното име: -webkit-fill-available |
