CSS - Единицы измерения: Путеводитель для начинающих
Здравствуйте, будущие маги CSS! ? Добро пожаловать в нашу магическую旅程 в мир единиц измерения CSS. Как ваш доброжелательный соседский компьютерный учитель, я рад помочь вам освоить этот важный аспект веб-дизайна. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - мы начнем с нуля и будем вместе строить наши знания!
Единицы длины: Основы единиц измерения CSS
Давайте начнем с азов. В CSS мы используем различные единицы для указания размера элементов, отступов, отступов и многого другого. Представьте эти единицы как линейки и рулетки цифрового мира. Они помогают нам создавать веб-сайты, которые выглядят прекрасно на всех устройствах, от крошечных смартфонов до гигантских мониторов настольных компьютеров.
Вот таблица最常见的 единиц длины в CSS:
| Единица | Описание | Пример |
|---|---|---|
| px | Пиксели | 16px |
| em | Относительно размера шрифта элемента | 1.5em |
| rem | Относительно размера шрифта корневого элемента | 2rem |
| % | Процент | 50% |
| vw | Ширина viewport | 100vw |
| vh | Высота viewport | 50vh |
Теперь давайте подробнее рассмотрим каждую из этих единиц и посмотрим, как они работают в действии!
Единицы измерения CSS - единица em
Единица 'em' похожа на хамелеона - она адаптируется к своим условиям. Один 'em' равен размеру шрифта текущего элемента. Это делает ее super полезной для создания масштабируемых дизайнов.
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* Это будет 24px */
margin-bottom: 1em; /* Это также будет 24px */
}В этом примере размер шрифта элемента .child будет 24px (1.5 * 16px), и его нижний отступ также будет 24px. Это как будто .child говорит: "Я хочу быть в 1.5 раза больше, чем мой родитель!"
Единицы измерения CSS - единица ch
Единица 'ch' немного resembles typography nerd. Она основана на ширине символа '0' (ноль) в текущем шрифте. Это может быть super полезно для создания последовательных макетов, особенно с моноширинными шрифтами.
.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* Ширина 40 символов '0' */
}Это создаст ящик, который будет exact 40 символов в ширину - perfect для отображения фрагментов кода!
Единицы измерения CSS - единица rem
Единица 'rem' похожа на мудрого старца семьи CSS. Она всегда ссылается на размер шрифта корневого элемента (обычно тег <html>), игнорируя размер шрифта родительских элементов.
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* Это будет 24px, основываясь на размере шрифта html */
}В этом случае, даже несмотря на то, что у .container есть другой размер шрифта, абзац внутри нее все равно будет 24px (1.5 * 16px от корня).
Единицы измерения CSS - единицы lh и rlh
Единица 'lh' основана на размере вертикной линии элемента, а 'rlh' - на размере вертикной линии корневого элемента. Это новые единицы и они великолепны для создания вертикного ритма в ваших дизайнах.
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* Это будет равняться вертикной линии */
}Это создает nice, последовательное расстояние между абзацами, основываясь на вертикной линии.
Единицы измерения CSS - единицы vh и vw
Теперь мы переходим к единицам viewport - это мои любимые! 'vh' означает высоту viewport, а 'vw' - ширину viewport. Они represent percentages of the total viewport size.
.hero-section {
height: 100vh; /* Полная высота viewport */
width: 100vw; /* Полная ширина viewport */
}
.half-width {
width: 50vw; /* Полshalve ширины viewport */
}Эти единицы великолепны для создания адаптивных дизайнов, которые подстраиваются под любой размер экрана. Я когда-то использовал их для создания полноэкранной целевой страницы, которая выглядела прекрасно на всех устройствах, от телефонов до гигантских телевизионных экранов!
Единицы измерения CSS - единицы vmin и vmax
'vmin' и 'vmax' являются динамической парой единиц viewport. 'vmin' использует меньшую величину viewport, а 'vmax' - большую.
.square {
width: 50vmin;
height: 50vmin;
}Это создает perfect square, который всегда составляет 50% меньшей величины viewport - это great для поддержания пропорций!
Единицы измерения CSS - единица vb
Единица 'vb' основана на размере viewport в block direction (обычно высота в горизонтальных режимах письма). Она похожа на 'vh', но адаптируется к различным режимам письма.
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* Полная высота в вертикном режиме письма */
}Это особенно полезно для создания макетов, которые работают хорошо как в горизонтальных, так и в вертикных системах письма.
Единицы измерения CSS - единица vi
Единица 'vi' является вертикной версией 'vb'. Она основана на размере viewport в inline direction (обычно ширина в горизонтальных режимах письма).
.horizontal-scroll {
width: 200vi; /* В два раза больше ширины viewport */
overflow-x: scroll;
}Это создает вертикальный элемент прокрутки, который всегда в два раза шире viewport.
Пример - Проценты
Проценты в CSS всегда relative к чему-то. Для ширин они usually relative к ширине родительского элемента.
.parent {
width: 300px;
}
.child {
width: 50%; /* Это будет 150px */
}Здесь элемент .child всегда будет составлять половину ширины своего родителя. Это как будто说你 своему элементу: "Ты можешь взять половину того, что имеет твой родитель!"
Пример - Числа
Иногда вы видите CSS свойства без единиц - просто числа. Эти значения usually используются для безразмерных свойств, таких как line-height или opacity.
p {
line-height: 1.5; /* 1.5 раза размер шрифта */
opacity: 0.8; /* 80% непрозрачный */
}В этом случае вертикальная линия будет в 1.5 раза больше размера шрифта, создавая nice отступы между строками текста, а непрозрачность сделает текст слегка прозрачным.
И вот мы и добрались до конца,朋友们! Мы прошли через страну единиц измерения CSS. Помните, ключ к maîtrisage этих единиц - это практика. Попробуйте использовать эти единицы в своих проектах, и вы вскоре разовьете интуицию для их использования.
Счастливого кодирования, и пусть ваши макеты всегда будут pixel-perfect! ?✨
Credits: Image by storyset