Каково значение блока css 'ex'?

(Не путать с Xunit, популярная библиотека модульного тестирования .Net.)

сегодня в приступе скуки я начал осматривать Gmails DOM (да, мне было очень скучно).

все выглядело довольно просто, пока я не заметил интересную спецификацию по ширине некоторых элементов. Знаменитый Googlites был указан номер таблицы столбцов, используя блок редкие 'экс'.

width: 22ex;

сначала я был в тупике ("что такое "экс"?"), затем он вернулся ко мне: я, кажется, помню что-то из лет назад, когда впервые узнал о CSS. из спецификации CSS3:

[The ex unit is] равно используемой x-высоте первый доступный шрифт. X-высота называется так потому, что она часто равна высоте строчной буквы "x". Однако " ex "определяется даже для шрифтов, которые не содержат"x".

5 72
css specifications units-of-measurement

5 ответов:

Это полезно, когда вы хотите что-то по отношению к высоте строчных букв текста. Например, представьте, что вы работаете над таким дизайном:

alt text


В типографском измерении дизайна высота букв имеет важные пространственные отношения к остальным элементам. Строки в исходном изображении выше предназначены для указания x-высоты текста, но они также показывают, где будут использоваться руководящие принципы быть, если проектирование вокруг этого текста.

Как отметил Джонатан в комментариях, ex-это просто версия высоты em (width).

100

чтобы ответить на вопрос, одно использование-с надстрочным и подстрочным индексом. Пример:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
14

еще одна вещь, чтобы рассмотреть здесь, как ваша страница масштабируется, когда пользователь поднимает или опускает свой размер шрифта (возможно, с помощью ctrl+колесо мыши (windows)).

Я использовал их.. обивка-слева: 2 ЭМ; обивка-справа: 2 em;

и ex с прокладка-дно: 2 ex; padding-top: 2 ex;

таким образом, используя вертикальную единицу измерения для свойства вертикального масштабирования и горизонтальную единицу измерения для свойства горизонтального масштабирования.

2

значение в спецификации CSS, если это то, что вы действительно спрашиваете, точно так же, как значение наличия единицы em.

Это позволяет установить шрифты в относительные размеров.

вы не знаете, что мой базовый размер шрифта. Поэтому одна хорошая стратегия для веб-дизайна-установить размеры шрифтов, которые являются относительными, а не абсолютными; эквивалент "удвоить ваш нормальный размер "или" немного меньше вашего нормального размера", а не a фиксированный размер, как "десять пикселей".

0

обратите внимание, что такие термины, как" одинарный/двойной межстрочный интервал", фактически означают смещение между двумя соседними линиями, измеренное ЭМ. Так что "двойной межстрочный интервал" означает, что каждая строка имеет высоту 2 ЭМ.

поэтому, если вы хотите указать вертикальное расстояние, пропорциональное "линиям", используйте em. Используйте только ex, если вам нужна фактическая высота строчной буквы, которая, смею сказать, гораздо более редкий экземпляр.

0