greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/russian/css/units/index.md

8.0 KiB
Raw Blame History

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» этого шрифта. Это часто средняя отметка шрифта.

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

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

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

Относительные единицы изменяются относительно текущего размера шрифта или других параметров. Некоторые относительные единицы

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

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

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

  • 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 дюйма, независимо от размера экрана.

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