Новости

Розміри елементів CSS

  1. Розміри елементів CSS Доброго дня! від кордонів елемента переходимо до розмірів елемента. Розміри...

Розміри елементів CSS

Доброго дня Доброго дня! від кордонів елемента переходимо до розмірів елемента. Розміри елементів задаються за допомогою властивостей width (ширина) і height (висота).

Значення за замовчуванням для цих властивостей - auto, тобто браузер сам визначає ширину і висоту елемента. Можна також явно задати розміри за допомогою одиниць виміру (пікселів, em) або за допомогою відсотків:

width: 150px; width: 75%; height: 15em;

Пікселі визначають точні ширину і висоту. Одиниця виміру em залежить від висоти шрифту в елементі. Якщо розмір шрифту елемента, наприклад, дорівнює 16 пікселів, то 1 em для цього елемента буде дорівнює 16 пікселям. Тобто якщо у елемента встановити ширину в 15em, то фактично вона складе 15 * 16 = 230 пікселів. Якщо ж у елемента не визначений розмір шрифту, то він буде взятий з успадкованих параметрів або значень за замовчуванням.

Якщо ж у елемента не визначений розмір шрифту, то він буде взятий з успадкованих параметрів або значень за замовчуванням

Процентні значення для властивості width обчислюються на підставі ширини елемента-контейнера. Якщо, наприклад, ширина елемента body на веб-сторінці становить 1000 пікселів, а вкладений в нього елемент <div> має ширину 75%, то фактична ширина цього блоку <div> становить 1000 * 0.75 = 750 пікселів. Якщо користувач змінить розмір вікна браузера, то ширина елемента body і відповідно ширина вкладеного в нього блоку div теж зміниться.

Процентні значення для властивості height працюють аналогічно властивості width, тільки тепер висота обчислюється по висоті елемента-контейнера.

наприклад:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Розміри в CSS3 </ title> <style> div.outer {width: 75%; height: 200px; margin: 10px; border: 1px solid #ccc; background-color: #eee; } Div.inner {width: 80%; height: 80%; margin: auto; border: 1px solid red; background-color: blue; } </ Style> </ head> <body> <div class = "outer"> <div class = "inner"> </ div> </ div> </ body> </ html>

переглянути приклад

У той же час фактичні розміри елемента можуть в результаті відрізнятися від тих, які встановлені у властивостях width і height. наприклад:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Розміри в CSS3 </ title> <style> div.outer {width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; } </ Style> </ head> <body> <div class = "outer"> Визначення фактичного розміру в CSS 3 </ div> </ body> </ html>

переглянути приклад

Як видно на скріншоті, в реальності значення властивості width - 200px - визначає тільки ширину внутрішнього вмісту елемента, а під блок самого елемента буде виділятися простір, ширина якого дорівнює ширині внутрішнього вмісту (властивість width) + внутрішні відступи (властивість padding) + ширина кордону ( властивість border-width) + зовнішні відступи (властивість margin). Тобто елемент матиме ширину в 230 пікселів, а ширина блоку елемента з урахуванням зовнішніх відступів складе 250 пікселів.

Подібні розрахунки слід враховувати при визначенні розмірів елементів.

За допомогою додаткового набору властивостей можна встановити мінімальні і максимальні розміри:

  • min-width: мінімальна ширина
  • max-width: максимальна ширина
  • min-height: мінімальна висота
  • max-height: максимальна висота

min-width: 200px; width: 50%; max-width: 300px;

В даному випадку ширина елемента дорівнює 50% ширини елемента-контейнера, однак при цьому не може бути менше 200 пікселів і більше 300 пікселів.

Перевизначення ширини блоку

Властивість box-sizing дозволяє перевизначити встановлені розміри елементів. Воно може приймати одне з наступних значень:

  • content-box: значення властивості за замовчуванням, при якому браузер для визначення реальних ширини і висоти елементів додає до значень властивостей width і height ширину кордону і внутрішні відступи
  • padding-box: вказує веб-браузеру, що ширина і висота елемента повинні включати внутрішні відступи як частину свого значення. Наприклад, УПСТ у нас є наступний стиль: width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: padding-box;

    Тут реальна ширина внутрішнього вмісту блоку буде дорівнює 200px (width) - 10px (padding-left) - 10px (padding-right) = 180px.

  • border-box: вказує веб-браузеру, що ширина і висота елемента повинні включати внутрішні відступи і межі як частину свого значення. Наприклад, нехай у нас є наступний стиль: width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: border-box;

    Тут реальна ширина внутрішнього вмісту блоку буде дорівнює 200px (width) - 10px (padding-left) - 10px (padding-right) - 5px (border-left-width) - 5px (border-right-width) = 170px.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

також читайте

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: