Css от чего считаются проценты

Единицы измерения: px, em, rem и другие

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

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

• Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

• 1mm (мм) = 3.8px
• 1cm (см) = 38px
• 1pt (типографский пункт) = 4/3 px
• 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

 
Страусы 
Живут также в Африке
 

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с em вместо px :

 
Страусы 
Живут также в Африке
 

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

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

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

 
Страусы 
Живут также в Африке
 

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

• px – абсолютные, чёткие, понятные, не зависящие ни от чего.
• em – относительно размера шрифта.
• % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

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

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

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

Протестируем на таком списке:

Источник

Css от чего считаются проценты

CSS тип данных представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width , height , margin , padding , и font-size .

Примечание: Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных ) будет доступно в унаследованном свойстве, а не значение в процентах.

Синтаксис

Интерполяция

При анимировании значения типа данных интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.

Примеры

Ширина и левый отступ

div style="background-color:blue;"> div style="width:50%; margin-left:20%; background-color:lime;"> Width: 50%, Left margin: 20% div> div style="width:30%; margin-left:60%; background-color:pink;"> Width: 30%, Left margin: 60% div> div> 

HTML код выше будет выглядеть так:

Размер шрифта

div style="font-size:18px;"> p>Full-size text (18px)p> p>span style="font-size:50%;">50%span>p> p>span style="font-size:200%;">200%span>p> div> 

HTML код выше будет выглядеть так:

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

doctor Brain

Полученые ответы были несколько обескураживающими: 70% разработчиков не смогли ответить на вопрос, 30% — предположили, что это процент от свойства родительского элемента.

И для этих тридцати процентов у меня был заготовлен еще один вопрос: “Какое именно свойство родительского элемента является определяющим: width, height, margin, padding, border?”

Эти вопросы вызывают затруднения, не так ли? Не беспокойтесь, только 1% разработчиков знает правильный ответ. Итак, Вы будете удивлены, узнав что:

Свойства margin и padding вложенного элемента, установленные в процентах, являются процентами от ширины родительского элемента.

Установленный для вложенного элемента padding: 10%; рассчитывается следующим образом:

Child Padding = (Parent Width)*x% 

В данном случае результатом будет 10px, что подтверждается и блочной моделью вложенного элемента:

Итак, Вы узнали как правильно рассчитать margin и padding элемента в процентах.

Остается еще один вопрос: “Как вычислить высоту вложенного элемента? Зависит ли она от ширины родителя, так же как margin и padding?”

Получается не совсем то, что Вы ожидали: высота вложенного элемента пропорциональна высоте родителя.

Child Height = (Parent Height)*x% 

Итак, мы определились с двумя основными правилами:

1. margin и padding в процентах рассчитываются по ширине родительского элемента,
2. высота (height) в процентах рассчитывается по высоте родительского элемента.

Эксперимент

Попробуем сделать адаптивный виджет в виде окружности?

.card < height: 300px; background-color: #ffffff; box-shadow: 0 20px 57px 0 rgba(51, 51, 51, 0.1); border: none; margin: 4%; >.outer-circle < width: 100px; height: 100px; background: linear-gradient(to right, rgba(237, 114, 152, 0.4), rgba(236, 136, 113, 0.4)); margin: 0 auto; border-radius: 50%; >.inner-circle

Что получилось?

Получилось неплохо. Однако, спустя некоторое время Вы заметите, что виджет не изменяет свои размеры относительно родителя — карточки. В данном случае виджет, вообще, не является адаптивным.

Что должно получиться

Виджет внутри карточки должен менять ширину и высоту пропорционально изменениям ширины родителя.

Вы ошибетесь, решив что проблема решается заменой единиц измерения: пикселей на проценты.

Вспомните два правила, написанные выше: если Вы зададите высоту виджета в процентах, она будет изменяться пропорционально изменениям высоты родителя (карточки).

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

Волшебство

Оказывается, у нас есть “волшебная палочка” — padding

Что произойдет, если Вы уберете свойство height у родительского элемента (карточки) и создадите padding-bottom в процентах?

Нижний внутренний отступ (padding-bottom) пересчитывается пропорционально ширине карточки .col-md-6 . Это означает, что свойство карточки padding-bottom ведет себя так же, как и width .

Великолепно! Теперь Вы можете задать высоту и ширину элементов виджета .outer-cirlce и .inner-circle в процентах. Свойство height внешнего круга .outer-circle будет зависеть от padding-bottom родителя (а значит высота будет изменяться пропорционально изменению ширины карточки).

.card < background-color: #ffffff; box-shadow: 0 20px 57px 0 rgba(51, 51, 51, 0.1); border: none; padding-bottom: 100%; >.outer-circle < width: 20%; height: 20%; background: linear-gradient(to right, rgba(237, 114, 152, 0.4), rgba(236, 136, 113, 0.4)); margin: 0 auto; border-radius: 50%; position: absolute; left: 40%; >.inner-circle

В данном случае padding-bottom работает как “виртуальная” высота и следовательно создает действительно адаптивный блок.

Надеюсь эта статья помогла разобраться с магией отступов в CSS.

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник