Говоря о Line-Height и Vertical-Align

Оригинальная статья: liruifang

Как фронтенд я часто бываю в реках и озёрах, где картинки и тексты смешиваются друг с другом, и меня одурачит небольшая небрежность.Эта статья в основном начинается с высоты строки и вертикального выравнивания, и анализируется "странное" явление в проекте.Взгляните на суть через явление, чтобы превратить врага в друга для моего использования.

содержание

проблемное явление
Введение атрибута
Анализ проблемы
Простое приложение
использованная литература

Сводящее с ума явление

1. Высота, занимаемая одной строкой текста

<style type="text/css">
    .demo1 {
        line-height: 100px;
        background-color: pink;
    }
    .demo1 span {
        font-size: 40px;
        background-color: grey;
    }
</style>
<div class="demo1">
    <span>xxJD-BG-FExx</span>
</div>

Почему видимая высота одной строки текста составляет 109 пикселей, а не 100 пикселей?

2. Пространство под картинкой

<style type="text/css">
    .demo2 {
        border: 1px solid black;
        width: 1080px;
    }
    .img {
        display: inline-block;
        height: 296px;
    }
    .text {
        background: pink;  
    }
</style>
<div class="demo2">
    <img  class="img" src="img/konan.jpg">
</div>

Почему в нижней части картинки пробелы?

3. Проблема выравнивания изображения и текста

<style type="text/css">
    .demo3 {
        font-size: 40px;
    }
    .icon {
        width: 1em;
        vertical-align: middle;
    }
    .gap {
        display: inline-block;
    }
    .gap span {
        /*vertical-align: middle;*/
    }
</style>
<div class="demo3">
    <p class="gap"><img class="icon" src="img/unpaid.png">待支付：</p>
</div>

Очевидно, вертикальное выравнивание: используется среднее, почему положение изображения ниже?

4. Исключение выравнивания блока прямоугольника

<style type="text/css">
    .demo4 {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    .align {
        /*line-height: 0;*/
        /*font-size: 0;*/
    /*    vertical-align: top;*/
    }
</style>
<div class="demo4"></div>
<div class="demo4"></div>
<div class="demo4">x见证奇迹x</div>

Почему прямоугольные блоки не расположены в ряд?

5. Странная реакция вертикального выравнивания

<style type="text/css">
    .ctn-block{
        background-color: #bbb;
    }
    .ctn-block .child {
        display: inline-block;
        width: 100px;
        background-color: aliceblue;
    }
    .ctn-block .child-1 {
        height: 100px;
        vertical-align: middle;
    }
    .ctn-block .child-2 {
        height: 200px;
    }
    .ctn-block .child-3 {
        height: 300px;
    }
</style>
<div class="ctn-block">
    <div class="child child-1"></div>
    <div class="child child-2"></div>
    <div class="child child-3"></div>
</div>

Самый маленький прямоугольный блок четко установлен с вертикальным выравниванием: средний; почему он не выровнен по центру, но кажется «опущенным»?

2. Видеть суть через явление

(1) высота строки

Содержание этой страницы взято из W3C:

Woohoo. Я 3school.com. могу /CSS ref/ лжи_'s…

Определение и использование

Свойство line-height устанавливает расстояние между строками (высоту строки).

Примечания

Отрицательные значения не допускаются

иллюстрировать

А. Это свойство влияет на макет поля строки. Применительно к элементу уровня блока он определяет минимальное расстояние, а не максимальное расстояние между базовыми линиями в этом элементе. Разница между рассчитанным значением b.line-height и font-size (известная как «межстрочный интервал» в CSS) делится на две половины, которые добавляются к верхней и нижней части строки текста соответственно. Наименьший блок, который может их содержать, — это линейный блок.

стоимость

стоимость	описывать
normal	По умолчанию. Установите разумный межстрочный интервал.
number	Установите число, которое будет умножено на текущий размер шрифта, чтобы задать межстрочный интервал.
length	Установить фиксированный межстрочный интервал.
%	Межстрочный интервал в процентах на основе текущего размера шрифта.
inherit	Указывает, что значение свойства line-height должно быть унаследовано от родительского элемента.

фокус

А. Разделите на две половины и добавьте их вверху и внизу текстовой строки. б. Относительное значение: рассчитывается относительно размера шрифта

font-size: 14px;
line-height: 1.5;（21px）
line-height: 150%;
line-height: 1.5em;

Все 21px, все три точно такие же?

<head>
	<title>line-height相对值</title>
	<style type="text/css">
		body,h3,p {
			margin: 0;
		}
		body {
			font-size: 14px;
			line-height: 1.5;
			/*line-height: 150%;*/
			/*line-height: 1.5em;*/
		}
		h3 {
			font-size: 32px;
		}
		p {
			font-size: 20px;
		}
	</style>
</head>
<body>
	<h3>标题</h3>
	<p>内容</p>
</body>

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

Анализ: разница наследования, когда высота строки является числовым значением, все дочерние элементы наследуют это значение, а для двух других относительных значений дочерние элементы наследуют окончательное вычисленное значение.

1. 对于块级元素，line-height指定了元素内部行框盒子（line-boxes）的最小高度,对块级元素本身没有任何作用
2. 对于非替代纯内联元素，可视高度完全由line-height决定（对，是完全），line-height指定了用来计算行框盒子高度的基础高度
3. 对于替代行内元素，例如img、input、button，line-height没有影响

Пример 1

<div class="demo">
    <img src="img/konan.jpg">
</div>
.demo {
    line-height: 256px;
}
.demo img {
    height:128px;
}

Анализ: в соответствии с приведенными выше правилами, высота строки не влияет на сам блочный элемент. Она определяет минимальную высоту внутреннего блока строки. В этом примере внутренняя часть является альтернативным встроенным элементом, а высота строки имеет никакого влияния на это.Тогда самое то, какова видимая высота внешнего div?128px?неправильно! да256px.

стойка (буквальный перевод: опора)

предпосылка существования: должно быть объявление html5
Определения в спецификации: Каждый строковый блок начинается со встроенного блока нулевой ширины со свойствами шрифта и высоты строки элемента.Мы называем этот воображаемый блок «структурой».
объяснять: Каждый линейный блок начинается со встроенного блока с такой же высотой строки, размером шрифта и нулевой шириной. ===> Перед полем строки есть нулевой символ шириной 0 ===> Призрачный пустой узел (названный мастером Чжан Синьсюем)

Пример 2

<div class="demo">
    <span>此处是一行文字</span>
</div>
case1
    .demo {
        line-height: 96px;
    }
    .demo span {
        line-height: 20px;
    }

case2
    .demo {
        line-height: 20px;
    }
    .demo span {
        line-height: 96px;
    }

В приведенных выше двух случаях какова видимая высота внешней дивы?оба 96px

Суммировать

Высота линейного блока определяется высотой самого высокого встроенного блока.
Обратите внимание на «призрачный пустой узел»

Тогда возникает вопрос, а еслиСмешанное изображение и текстПоле со смешанной строкой, как ведет себя высота?

Можно определить только минимальную высоту, окончательная высота не учитывается

why?

1. Альтернативные встроенные элементы не контролируются 2. Влияние вертикального выравнивания

(2) вертикальное выравнивание

Содержание этой страницы взято из W3C

Woohoo. Я 3school.com. can /CSS ref/ лгать_ боюсь…

Определение и использование

Вертикальный атрибут выравнивания элемента вертикального выравнивания.

иллюстрировать

1. Это свойство определяет вертикальное выравнивание базовой линии встроенного элемента относительно базовой линии строки, в которой расположен элемент. 2. Позволяет указать отрицательные значения длины и процентные значения. Это опускает элемент, а не поднимает его. 3. В ячейках таблицы это свойство устанавливает выравнивание содержимого ячейки в поле ячейки.

стоимость

стоимость	описывать
baseline	По умолчанию. Элемент размещается на базовой линии родительского элемента
sub	Вертикально выравнивает нижний индекс текста
super	Вертикальное выравнивание верхнего индекса текста
top	Совместите верхнюю часть элемента с верхней частью самого высокого элемента в строке.
text-top	Выровняйте верх элемента с верхом родительского шрифта
middle	Поместите этот элемент в середину родительского элемента
bottom	Совместите верхнюю часть элемента с верхней частью самого нижнего элемента в строке
text-bottom	Выровняйте нижнюю часть элемента по нижней части шрифта родительского элемента.
length
%	Организовать использование процентных значений высоты линии, отрицательные значения допускаются
inherit	Положение должно наследовать значение свойства vertical-align от родительского элемента.

фокус

a. помещение: применяется только к встроенным элементам и элементам с display: table-cell; например, float и position:absolution заблокируют элемент, и нет причин появляться одновременно с выравниванием по вертикали. б.относительное значение: вычисляется относительно высоты строки в.Базовый уровеньВ чем дело? д.середина родительского элементаОтносится?

Вопрос 1: Исходный уровень

Нижний край буквы x является нашей базовой линией:

'x' в нижнем регистре получается "x-height«Концепция относится к высоте строчной буквы x, которая представлена ex в css для этой относительной единицы.
правило определения базовой линии:

1. элемент inline-table: базовая линия первой строки таблицы 2. Блок строки родительского элемента: базовая линия последнего встроенного блока. 3. Встроенный элемент обычного текста: нижний край символа x 4. Заменить элемент: заменить нижний край элемента 5. встроенный блок: (1) Внутри нет встроенного элемента или переполнение не видно, тогда: базовая линия — это нижний край поля элемента (2) Внутри есть встроенные элементы, базовая линия — это базовая линия последней строки встроенных элементов в элементе.

Вопрос 2: Середина родительского элемента

вертикальное выравнивание: посередине; поместите этот элемент в середину родительского элемента

Встроенный элемент: вертикальная центральная точка элемента и базовая линия линейного блока выровнены на 1/2 x высоты вверх, что является центральной точкой пересечения символа x. table-cell: поле ячейки центрировано относительно строки внешней таблицы.

3. Есть только одна истина (решить исходную задачу)

Подозреваемые: высота строки, выравнивание по вертикали, призрачный пустой узел
Прорвать: Базовая линия строки-коробки, где она? Базовая линия для элементов встроенного уровня, где? Введите строчную букву «x» до и после строки и посмотрите

Феномен 1: высота, занимаемая одной строкой текста

анализировать: Для символов чем больше размер шрифта, тем ниже базовая позиция, поскольку по умолчанию весь текст выравнивается по базовой линии, а тексты с несовместимыми размерами шрифта будут смещены вверх и вниз.

Решение: Шрифт «призрачного пустого узла» имеет тот же размер, что и шрифт следующего диапазона. Измените вертикальное выравнивание, например: vertical-align: top и т. д.

Явление 2: Проблема разрыва изображения (горизонтальные и вертикальные разрывы встроенных элементов, распространенные: img, li и т. д.)

Горизонтальный разрыв вызван новой строкой, которая становится пустой, которая анализируется как текстовый узел в DOM.
Вертикальные пустоты: три виновника

анализировать:

Значение по умолчанию для вертикального выравнивания — базовая линия, то есть базовое выравнивание. Высота «призрачного пустого узла» определяется высотой строки.

Решение:

Превратите img встроенного уровня в блок через display или position, float и т. д. и убейте трех виновников одним махом. Используйте другие значения вертикального выравнивания Измените значение высоты строки напрямую: высота промежутка ниже на самом деле является расстоянием между рассчитанным значением высоты строки текста и нижним краем буквы x. Таким образом, пока высота строки достаточно мала, нижняя часть высоты, которую занимает фактический текст, будет выше x, без поддержки области высоты ниже высота строки является относительной единицей, а размер шрифта контролируется косвенно

Феномен 3: производительность графического выравнивания

анализировать:

Для необработанного текста его базовая линия совпадает с базовой линией строки, а для изображения задано значение vertical-align: middle, а его центр выравнивается по центру x родительского элемента; Но центр буквы x не является центром текстового поля, где он расположен, а центр текстового поля находится немного ниже

Решение:

Оборачиваем "center" и ставим также vertical-align: middle, базовая линия "center" больше не совпадает с базовой линией line-box, а немного смещается вниз, а графика и текст выравниваются Обработка с нижним полем Используйте выравнивание по вертикали: длина (отрицательное значение), установите значение для выравнивания Если размер подходит, вы можете использовать метод 1ex (эмпирическое значение основано на значке 20px).

Явление 4: Аномальное выравнивание прямоугольных блоков

анализировать:

Согласно правилам определения базовой линии, если в боксе нет встроенных элементов, базовой линией является нижний край поля контейнера, а если в боксе есть текст, базовой линией является базовая линия текста: нижняя край буквы х, поэтому: нижний край левого поля и правого поля х нижний край символов

Решение:

line-height: 0; или font-size: 0; (интервал больше, почему? Подсказка: line-height равен 0, позиция, занимаемая символом, также равна 0, и начальная позиция высоты становится центром по вертикали положение поля содержимого персонажа [Имеется опускание персонажа], персонаж перемещается вверх, а базовая линия также перемещается вверх) Для другого выравнивания вертикальному выравниванию присваивается другое значение.

Феномен 5: vertical-align: middle заставляет элемент двигаться вниз, не центрируясь

анализировать:

Эталонным стандартом для выравнивания по середине является выравнивание вертикальной средней точки блока дочернего элемента с базовой линией родительского блока плюс половина x-высоты родительского блока.

Решение:

Один из способов — установить для самого высокого элемента значение vertical-align:middle, а затем установить vertical-align:middle на тот, который вы хотите центрировать. Пояснение их базовые линии. Он должен быть выше базовой линии самого высокого элемента, поэтому он вынужден двигаться вниз и центрироваться.

4. Превратите врагов в друзей (простое приложение)

(1) Эффект выравнивания встроенных элементов, на которые не влияет размер шрифта шрифта:

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

<div>
    liruifang<i class="icon-arrow"></i>
    京东前端<i class="icon-arrow"></i>
</div>
<style type="text/css">
    .icon-arrow {
        display: inline-block;
        width: 20px;
        height: 1ex;
        background: url(img/arrow.png) no-repeat center;
    }
</style>

(2) Вертикальное центрирование

однострочный текст:line-height может быть установлен на требуемую высоту, нет необходимости устанавливать высоту, если она установлена, они должны оставаться одинаковыми.
Мтекст: Высота фиксированная, текст однострочный или многострочный, шрифт крупный или мелкий, как центрировать? (подсказка: используйте призрачные пустые узлы, похожие на центрирование изображения)
картина: используйте призрачный пустой узел, чтобы реагировать на высоту строки, чтобы сформировать высоту.В это время изображение можно выровнять по вертикали с призрачным пустым узлом (приблизительно), поддерживаемым высотой строки, добавив вертикальное выравнивание: посередине.

Причина приближения: позиция символа x чуть ниже

Полностью по центру: размер шрифта: 0, абсолютная центральная линия и центральная линия совпадают.

(3) Использование взаимосвязи между линейным блоком и базовой изменчивостью: обработка изображения и выравнивание текста.

Например, реализация значка удаления (delete.html)

<i class="icon-delete"></i>删除
<i class="icon-delete">删除</i>（为了使得文字不可见，设置overflow：hidden）

анализировать: Пустая метка или переполнение: скрыто. Базовая линия — это нижний край, который по умолчанию не выровнен с текстом.
идеи: Значок и текст имеют одинаковую высоту + одинаковую базовую линию = выравнивание!

И иконка, и текущая высота 20px: если вам нужно объединить фоновые иконки, автор рекомендует объединить исходные изображения иконок в одну спецификацию, а затем объединить

Всегда иметь текст в тегах значков: сгенерируйте символ пробела с помощью псевдоэлементов :before или :after

Скрытые символы невидимы, но переполнение: скрытый не используется для обеспечения того, чтобы базовая линия была базовой линией символов внутри

<style type="text/css">
    .box {
        line-height: 20px;
    }
    .icon {
        display: inline-block; 
        width:20px; 
        height:20px; 
        white-space: nowrap; 
        letter-spacing: -1em; 
        text-indent: -999em;
    }
    .icon:before {
        content:'\3000';
    }
    /* 具体图标 */
    .icon-xxx {
        background: url(img/delete.png) no-repeat center;
    }
</style>
<div class="box">
    <h4>1. 空标签后面跟随文本</h4>
    <p><i class="icon icon-delete"></i>删除</p>
    <h4>2. 标签里面有“删除”文本</h4>
    <p><i class="icon icon-delete">删除</i>看一眼时间</p>
</div>

Преимущество:

Вертикальное смещение не требуется для полей и вертикального выравнивания.

Маленькие значки и выравнивание текста полностью не зависят от размера шрифта.

Проблему мелких иконок и выравнивания текста во всем проекте можно решить, сэкономив код CSS и снизив затраты на разработку и обслуживание.

Примечание: 20 пикселей является эмпирическим значением. Например, если дизайн проекта очень атмосферный, размер шрифта по умолчанию равен 16 пикселям, но его можно изменить на 24 пикселя (подробности см. в разделе "Мир CSS").

Феноменальная проблема(сумасшедший) -->Введение атрибута(Видеть суть через явление) ——>Анализ проблемы(Есть только одна правда) ——>Простое приложение(превратить врага в друга)