freeCodeCamp/index.md at d03c71b9905a43c8a3a7ffe14c2a14bcc3e0b51f

Files

focuse 4bb1a6452c fixed russian translation for css units (#31031 )

This article seems to be translated via google translate or something similar.
Made the article more human-readable.
Fixed typos.
Fixed styles.

2019-08-07 10:26:51 -07:00

7.8 KiB

Raw Blame History

title, localeTitle

title	localeTitle
Units	Единицы измерения

Единицы измерения

Многие свойства CSS, такие как width , margin , padding , font-size и т.д., определяют размеры. У CSS есть способ выразить длину в нескольких единицах. Длина представляет собой комбинацию числа и единицы без пробелов. Например, 5px , 0.9em и т. Д.

Длина

Единицы общей длины

Для выражения длины используется CSS. Более старыми, поддерживаемыми всеми браузерами, являются:

rem - «r» означает «root»: «root em» -, который равен размеру шрифта, закрепленному на корневом элементе (почти всегда <html> ).
vh и vw - Многие техники отзывчивого веб-дизайна в значительной степени зависят от процентных правил. Тем не менее, процентные меры CSS не всегда являются лучшим решением для всех проблем. Мера vh равна 1/100 высоты окна просмотра. Так, например, если высота браузера равна 800px, 1vh равно 8px, и, аналогично, если ширина окна просмотра равна 650px, то 1vw эквивалентно 6.5px.
vmin и vmax. Эти единицы связаны с максимальным или минимальным значением vh и vw . Например, если браузер был установлен на 1200px в ширину, а высота 600px, 1vmin будет 6px и 1vmax будет 12px. Однако, если ширина была установлена равной 700px, а высота установлена равной 1080px, vmin будет равен 7px и vmax 10.8px.
ex и ch - эти единицы, аналогичные em и rem , полагаются на текущий шрифт и размер шрифта. Однако, в отличие от em и rem , эти единицы также полагаются на font-family поскольку они определяются на основе мер, специфичных для каждого шрифта. Блок ch («единица символа») определяется как ширина нулевого символа («0»). Единица ex определяется как «текущая x-высота текущего шрифта или половина 1em». Высота-x данного шрифта - это высота строчного «x» этого шрифта. Это часто средняя отметка шрифта.

Unit	Description
em	1 em - вычисленное значение размера шрифта для элемента, на котором он используется.
ex	1 ex - текущая высота x шрифта. Обычно x-height (но не всегда, например, если в шрифте нет «x»), равном высоте строчки «x»
ch	1 ch - это ширина глифа «0» (нуль) в текущем шрифте. «ch» означает знак (character).
rem	1 rem - вычисленное значение свойства font-size для корневого элемента документа.
vw	1vw составляет 1% от ширины окна просмотра. «vw» означает «ширина окна просмотра».
vh	1vh - 1% высоты окна просмотра. «vh» означает «высота окна просмотра».
vmin	равняется меньшему из «vw» или «vh»
vmax	равняется большему из «vw» или «vh»

Существует два общих типа единиц, используемых для длины и размера в CSS: относительный и абсолютный.

Относительные единицы

em
- Ширина заглавной буквы M font-size текущего элемента.
- Размер шрифта наследуется от родительских элементов.
- Пример:
```
div {
  font-size: 16px;
}
div h3 {
  font-size: 2rem;
}
```
Здесь <h3> будет равняться 32px так как font-size текущего или родительского элемента равен 16px.
rem
- em корневого элемента или ширина прописной буквы M базового font-size по умолчанию.
- Размер шрифта родителя не будет иметь эффекта.
- Пример:
```
body {
  font-size: 16px;
}
p {
  font-size: 1.5rem;
}
```
Здесь <p> будет равняться 24px так как основной font-size по умолчанию - 16px.
%
- размер в процентах относительно размера родителя.
- Пример:
```
div {
  width: 400px;
}
div p {
  width: 75%;
}
```
Поскольку ширина родителя составляет 400px , ширина внутреннего картографа будет 300px или 75% от 400px.
vw/vh
- ширина/высота экрана просмотра
- Пример:
```
body {
  width: 100vw;
}
```
body заполняет всю ширину окна просмотра, будь то 417px, 690px или любое дрегое значение.

Абсолютные единицы

Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Вот некоторые абсолютные единицы:

px
- пиксель
- количество пикселей зависит от качества экрана устройства просмотра
in, cm, mm
- дюйм, сантиметр, мм
- Дюйм остается дюймом на экране любого размера.
pt, pc
- точки (1/72 дюйма) и пики (12 точек) Пример


p { 
  font-size: 24px; 
 } 
 div { 
  width: 3in; 
  border-width: 3pt; 
 }

Абзац с font-size: 24px будет отображаться как 24px на экране телефона, планшета или рабочего стола.

div будет отображаться как 3 дюйма в ширину, а border на div будет иметь толщину 3/72 дюйма, независимо от размера экрана.

7.8 KiB Raw Blame History Unescape Escape