Единицы размера в CSS
Существует много свойств CSS, которые требуют размер в качестве единицы:
- font-size определяет размер текста;
- border-width определяет толщину границ элементов;
- margin определяет пространство между элементами;
- left / right / top / bottom позволяют позиционировать и перемещать элементы.
Наиболее часто используемые единицы:
- px для пикселей;
- % для процентов;
- em для определения размера относительно родительского значения font-size .
Пиксели
Поскольку компьютерные экраны используют пиксели для отображения содержимого, это самая распространённая единица размера в CSS.
Пиксель может быть использован для задания фиксированной ширины элемента:
body
Или установить размер текста:
body
Пиксели в CSS являются простыми, поскольку они определяют абсолютные значения и не зависят от других наследуемых свойств CSS.
Они также широко используются для позиционирования и расстояния.
Проценты
Проценты — это относительные единицы: они полагаются на родителя и/или предка элемента.
К примеру, блочные элементы, такие как абзацы, естественным образом занимают всю доступную ширину. Следующее правило CSS изменит их размер до половины доступной ширины.
Проценты могут помочь задать другие свойства CSS, такие как размер текста.
strong
Есть важные проблемы, стоящие перед нами.
em
em является относительной единицей и зависит от значения font-size элемента.
Например, если у родителя font-size задан как 20px и вы применяете font-size: 0.8em к дочернему элементу, то этот дочерний элемент будет отображать font-size как 16px.
Не следует путать размер em с селектором em , который ориентирован на элемент .
Единица em интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши были вдвое больше, чем основной текст, ваши в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:
body < font-size: 16px; >h1 < font-size: 2em; >/* = 32px */ h2 < font-size: 1.5em; >/* = 24px */ aside < font-size: 0.75em; >/* = 12px */Если вы решите изменить размер текста , относительные размеры заголовков и боковой панели изменятся соответственно и ваша веб-страница останется визуально сбалансированной.
Только изменив одно значение, поменяются и все остальные значения:
body < font-size: 20px; >h1 < font-size: 2em; >/* = 40px */ h2 < font-size: 1.5em; >/* = 30px */ aside < font-size: 0.75em; >/* = 15px */rem
Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент .
html < font-size: 18px; >body < font-size: 1rem; >/* = 18px */ h1 < font-size: 2rem; >/* = 36px */ h2 < font-size: 1.5rem; >/* = 27px */Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.
Если вы установили html < font-size: 18px; >:
- 2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
- 2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.
Быстрый пример, где 2em отличается от 2rem:
html < font-size: 20px; >p < font-size: 0.8rem; >/* = 16px */ p span < font-size: 2em; >/* = 16px * 2 = 32px */ p strong < font-size: 2rem; >/* = 20px * 2 = 40px */полагается на значение font-size у , в то время как полагается на значение font-size у .
Какую единицу использовать?
Я бы рекомендовал начать с пикселей: поскольку это абсолютная величина, они не зависят от контекста элемента. Пиксели простые, позволяют установить размер текста, ширину и высоту изображения, толщину границы, координаты положения и др.
Проценты и значения em могут быть использованы наряду с пикселями, особенно для относительных размеров текста.
resize
Можно ли увеличить или уменьшить поле ввода? Управляем этим через стили.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 29 сентября 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство resize указывает, может ли пользователь изменять размеры элемента, и в каком направлении. В случае, если изменение размеров элемента возможно, в одном из его углов появится специальная иконка, похожая на треугольник, зажав которую пользователь сможет изменить размер элемента в одном, или нескольких, направлениях.
- строчных ( inline ) элементов;
- блочных ( block ), для которых задано свойство overflow со значением visible (является значением по умолчанию для большинства элементов).
По умолчанию поле ввода может изменять свой размер, если потянуть за нижний правый угол. Если вы хотите запретить изменение размеров текстовой области, вы должны явно указать значение свойства resize как none .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- none — размеры изменить нельзя (значение по умолчанию).
- both — размеры можно изменять по горизонтали и вертикали.
- horizontal — размер можно изменять по горизонтали.
- vertical — размер можно изменять по вертикали.
- block — размер можно изменять в блочном измерении элемента.
- inline — размер можно изменять в строковом измерении элемента.
Блочное или строчное измерение элемента зависит от направления текста, задаваемого свойствами writing — mode и direction .
По умолчанию поддерживается в Firefox и Safari. В браузерах Chrome и Edge необходимо включить флаг Experimental Web Platform features . Более подробную информацию можно узнать на caniuse .
Пример
Скопировать ссылку «Пример» Скопировано
Когда пользователь изменяет размеры элемента, браузер устанавливает значения свойств width и height как инлайн стили на элемент. Если размер элемента изменяется только в одном из направлений, то устанавливается только одно из свойств. Об этом важно знать, так как могут возникнуть ситуации, в которых пользователь не сможет изменить размер элемента, например если какой-либо из селекторов установил значение свойств width или height с использованием !important .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если после применения свойства resize вы не можете изменить размер элемента, проверьте, что для свойства overflow задано одно из следующих значений: scroll , auto или hidden .
�� Можно ограничить минимальную и максимальную ширину и высоту с помощью свойств max — width , min — width , max — height , min — height .
�� В WebKit браузерах иконку растяжения элемента можно стилизовать с помощью специального псевдо класса : : — webkit — resizer .
CSS свойство resize
Свойство resize дает возможность изменить размер элемента.
Свойство resize контролирует отображение и функции механизма изменения размера. Механизм изменения размера обычно представляет собой кнопку в виде треугольника, которая находится в нижнем правом углу элемента.
Свойство имеет четыре значения: «none», «both», «horizontal» и «vertical». Есть еще две значения «block» и «inline», которые находятся в экспериментальной стадии.
Свойство resize не применяется к строчным и блочным элементам, у которых свойство overflow установлено в значение «visible». Resize принимает свойство overflow только со значениями «auto», «scroll» и «hidden».
| Значение по умолчанию | none |
| Применяется | К элементам, у которых свойство overflow имеет значение отличное от visible, к выборочно заменяемым элементам, которые отображают изображения или видео, а также к строчным фреймам. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS3 |
| DOM синтаксис | Object.style.resize = «horizontal»; |
Синтаксис
resize: none | both | horizontal | vertical | block | inline | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> div < border: 1px solid #1c87c9; background-color: #eee; padding: 10px; width: 300px; resize: both; overflow: auto; > style> head> body> h2>Пример свойства resize h2> div> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> div> body> html>В вышеприведенном примере размеры высоты и ширины элемента изменяются.
Рассмотрим другой пример, где размеры элемента изменяются только по вертикали:
Пример
html> html> head> title>Заголовок документа title> style> div < border: 2px solid #ccc; background-color: #eee; padding: 10px; width: 300px; resize: vertical; overflow: auto; > style> head> body> h2>Пример свойства resize h2> div> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> div> body> html>Пример, где можно изменить размер элемента только по горизонтали:
Пример
html> html> head> title>Заголовок документа title> style> div < border: 1px solid #8ebf42; background-color: #eee; padding: 10px; width: 300px; height: 200px; resize: horizontal; overflow: auto; > style> head> body> h2>Пример свойства resize h2> div> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> div> body> html>Значения
| Значение | Описание |
|---|---|
| none | Размеры элемента не изменяются. Значение по умолчанию. |
| both | Размеры элемента изменяются по горизонтали и по вертикали. |
| horizontal | Размеры элемента изменяются только по горизонтали. |
| vertical | Размеры элемента изменяются только по вертикали. |
| block | Элемент отображает механизм, разрешающий пользователю изменить размеры элемента по блочной оси (по горизонтали или по вертикали, в зависимости от значений writing-mode и direction). Это значение находится в экспериментальной стадии. |
| inline | Элемент отображает механизм, разрешающий пользователю изменить размеры элемента по строчной оси (по горизонтали или по вертикали, в зависимости от значений writing-mode и direction). Это значение находится в экспериментальной стадии. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 4.0+ | ✕ | 5.0+ 4.0 -moz- |
4.0+ | 15.0+ |
CSS text-justify Property
Set the justification method to «inter-word» when text-align is set to «justify»:
div <
text-align: justify;
text-justify: inter-word;
>
Definition and Usage
The text-justify property specifies the justification method of text when text-align is set to «justify».
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textJustify=»inter-word» |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-justify | Yes* | 11.0 | 55.0 | 10.0.3 | Yes* |
*This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to Enabled). To change preferences in Chrome: type in «chrome://flags» in the Chrome browser. To change preferences in Opera: type in «flags» in the Opera browser.
CSS Syntax
text-justify: auto|inter-word|inter-character|none|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| auto | The browser determines the justification algorithm | Play it » |
| inter-word | Increases/Decreases the space between words | Play it » |
| inter-character | Increases/Decreases the space between characters | Play it » |
| none | Disables justification methods | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |