SovaWiki

Инструменты пользователя

Инструменты сайта

Вы посетили:
css:units_of_measurement

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
css:units_of_measurement [2022/10/27 21:00] – [Percent] so_v_acss:units_of_measurement [2026/09/09 08:43] (текущий) – so_v_a
Строка 1: Строка 1:
 +<!DOCTYPE markdown>
 +
 # CSS: Единицы измерения # CSS: Единицы измерения
  
-## Применительно к тексту +## Pixels
-### Pixels+
  
-Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.+Пиксель **px** – это самая базовая, абсолютная и окончательная единица измерения.
  
 Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. //Все значения браузер в итоге пересчитает в пиксели//. Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. //Все значения браузер в итоге пересчитает в пиксели//.
  
 Пиксели могут быть дробными, это совершенно нормально,  Пиксели могут быть дробными, это совершенно нормально, 
-. 
-### Percent 
  
-Процент - %. Проценты – относительные единицы. Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.+> Давно на свалке: mm, cm, pt, pc 
 + 
 +Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории. 
 +Вот, если интересно, их значения: 
 + 
 + - 1mm (мм) = 3.8px 
 + - 1cm (см) = 38px 
 + - 1pt (типографский пункт) = 4/3 px 
 + - 1pc (типографская пика) = 16px 
 + 
 +Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет. 
 + 
 + 
 +## Percent 
 + 
 +Процент - **%**. Проценты – относительные единицы. Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
  
 Шрифтов значение процентов высчитывается относительно значения свойства родительского тега. Это значит, что если текст будет вложенным, то его значение будет меняться в зависимости от того тега, в который он вложен. Шрифтов значение процентов высчитывается относительно значения свойства родительского тега. Это значит, что если текст будет вложенным, то его значение будет меняться в зависимости от того тега, в который он вложен.
  
-```html+```
 <p>Lorem  <p>Lorem 
   <span>Lorem   <span>Lorem
Строка 38: Строка 52:
 Учитывая что по-умолчанию браузер использует значение в 16px здесь получим: 16px, 8px и 32px Учитывая что по-умолчанию браузер использует значение в 16px здесь получим: 16px, 8px и 32px
  
-##### Примеры-исключения, в которых % берётся не так:+### Примеры-исключения, в которых % берётся не так:
  
- - **margin-left** - При установке свойства margin-left в %, процент берётся **_от ширины родительского блока_**, а вовсе **_не от его margin-left_**.+ - **margin-left** - При установке свойства margin-left в %, процент берётся **_от ширины родительского блока_**, а **_не от его margin-left_**.
 line-height line-height
- - **line-height** - При установке свойства line-height в %, процент берётся **_от текущего размера шрифта_**, а вовсе **_не от line-height родителя_**. (Детали по line-height и размеру шрифта можно найти в статье [Свойства font-size и line-height](https://learn.javascript.ru/font-size-line-height) ).+ - **line-height** - При установке свойства line-height в %, процент берётся **_от текущего размера шрифта_**, а **_не от line-height родителя_**. (Детали по line-height и размеру шрифта можно найти в статье [Свойства font-size и line-height](https://learn.javascript.ru/font-size-line-height) ).
 width/height width/height
  - **width/height** - Для width/height **обычно процент от ширины/высоты родителя**, но **//при position:fixed//**, процент берётся **//от ширины/высоты окна//** (а не родителя и не документа). (Кроме того, иногда % требует соблюдения дополнительных условий: [Особенности свойства height в %](https://learn.javascript.ru/height-percent) ).   - **width/height** - Для width/height **обычно процент от ширины/высоты родителя**, но **//при position:fixed//**, процент берётся **//от ширины/высоты окна//** (а не родителя и не документа). (Кроме того, иногда % требует соблюдения дополнительных условий: [Особенности свойства height в %](https://learn.javascript.ru/height-percent) ). 
  
  
-### em+## em
  
-1em – текущий размер шрифта.+1em – текущий размер шрифта. Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.
  
-Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.+**Размеры в em – относительные, они определяются по текущему контексту.**
  
-Размеры в em – относительные, они определяются по текущему контексту.+Пример с em вместо px: 
 +```css 
 +<div style="font-size:1.5em"> 
 +  Страусы 
 +  <div style="font-size:1.5em">Живут также в Африке</div> 
 +</div> 
 +```
  
 +Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
 +
 +Соответственно, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом.  
 +С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
  
  > Что такое размер шрифта? Это вовсе не «размер самой большой буквы в нём». Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.  > Что такое размер шрифта? Это вовсе не «размер самой большой буквы в нём». Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Строка 60: Строка 84:
  
  
-### VW / VH+## rem 
 + 
 +**Единица rem задаёт размер относительно размера шрифта элемента <html>.** 
 + 
 +Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html> - и Этим похожи на em. 
 + 
 + 
 +## vw, vh, vmin, vmax
  
 Это единицы измерения которые относятся к размеру экрана устройства. Все те значения, которые начинаются с буквы V, имеют в себе сокращение слова с английского «viewport» («область просмотра»).   Это единицы измерения которые относятся к размеру экрана устройства. Все те значения, которые начинаются с буквы V, имеют в себе сокращение слова с английского «viewport» («область просмотра»).  
-Итак: 
  
 +Итого:
  * vh = 1/100 высоты области просмотра  * vh = 1/100 высоты области просмотра
  * vw = 1/100 ширины области просмотра  * vw = 1/100 ширины области просмотра
Строка 81: Строка 112:
 значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда берется это значение? Это 2% от 1200px, то есть 1200px * 0.02 = 24px. При этом если взять, например, планшет, который в среднем составляет ширину 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px. значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда берется это значение? Это 2% от 1200px, то есть 1200px * 0.02 = 24px. При этом если взять, например, планшет, который в среднем составляет ширину 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.
  
-(!) _Значения vmin и vmax не применимы к font-size_ +(**!**)**Note**: _Значения vmin и vmax не применимы к font-size_
- +
-https://tpverstak.ru/css-units-part-1/+
  
-https://tpverstak.ru/css-units-part-2/ 
/var/www/html/dokuwiki/data/attic/css/units_of_measurement.1666904459.txt.gz · Последнее изменение: (внешнее изменение)