Дислокация встроенного элемента заставляет задуматься о высоте строки

внешний интерфейс CSS

Автор: Ли Ируи

line-height Для фронтенд-милашки это должен быть старый друг, который будет часто встречаться. Но однажды я вдруг осознал, что, кажется, не так хорошо его знаю, и он не так прост, как кажется.

Вот что случилось……

На работе случайно написал такой шаблон:

<div>
    <span class="name">重大疾病险</span>
    <span class="tip">保额每月可累计</span>
</div>

div{
    font-family: "PingFang SC";
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}

Два смежных встроенных элемента, шрифт один большой и один маленький, высота строки одинаковая, так как во втором абзаце текста должно быть больше слов, он автоматически переместится на следующую строку.spanдаinline-blockРезультат, который я себе представлял, состоит в том, что высота обоих промежутков составляет 20 пикселей, а высота div также равна 20 пикселей, что идеально. Но результаты часто неудовлетворительны...

Какова высота div 28 ??

Снова смотрим на дочерние элементы, 28 и 20??

  • Вопрос 1: Дело в том, что высота строки не влияет на встроенные элементы? ?

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

  • вопрос 2: Раз он действует, то почему элемент обзора выглядит как 28 вместо 20?

    Для текста есть область содержимого. Под ним можно понимать область с фоном, когда строка текста выделена курсором. На него влияет как семейство шрифтов, так и размер шрифта. Даже если размер шрифта тот же, если шрифт другой, высота «того, что вы видите», будет разной. Учащиеся могут попробовать это сами. Здесь подчеркивается, что то, что вы видите, то есть 28 пикселей, на самом деле является высотой области текстового содержимого, а высота области содержимого не является реальной высотой, то есть она не повлияет на реальный размер этот элемент, он также не поддерживает высоту родительского элемента, так что это просто высота, как вы ее видите. Что действительно влияет на высоту строчных элементов, так этоline-height.

    Здесь мы можем подтвердить, изменив их семейство шрифтов.

      div{
      font-family: "HelveticaNeue";
  }
  .name{
      line-height: 20px;
      font-size: 20px;
  }
  .tip{
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
  }

    Как видите, после смены шрифта.nameРост изменился с 28 на 24,.tipТак как этоinline-blockТаким образом, высота не меняется, но родительdivВысота по-прежнему составляет 28 пикселей, что указывает на то, что область содержимого не влияет на истинную высоту родительского элемента.

  • Вопрос 3: Как тогда увидеть его истинную высоту?

    Как вы могли заметить, второй пролетinline-block, его высота 20px, то мы сначалаspanтакже установлен наinline-blockПосмотри.

    Конечно же, его высота, наконец, стала 20 пикселей, как мы ожидали.
    Затем давайте снова посмотрим на родительский элементdivвысота:

    ! ! Почему он все еще 28px? ?

  • Вопрос 4: Оба дочерних элемента уже имеют размер 20 пикселей, почему родительский элемент по-прежнему имеет размер 28 пикселей?

    Сначала два вопроса:

    1. Это доказывает правильность того, что было сказано выше в вопросе 2. Область содержимого не повлияет на фактический размер. Теперь все наши элементы имеют размер 20 пикселей, но родительский элемент по-прежнему имеет размер 28 пикселей.
    2. Мы устанавливаем первый интервал равнымinline-blockПосле этого вы можете увидеть, что его размер стал 20 пикселей, но это не означает, что у него нет области содержимого или что его область содержимого стала 20 пикселей. Вы можете понять, что у нас коробка снаружи, вы видите реальный размер коробки, а область содержимого находится внутри нее, просто вы ее не видите. Более того, это то, что никого не касается.

    Затем вернитесь к нашему вопросу, посмотрите внимательно на картинку выше, вы можете обнаружить, что два подэлемента имеют высоту 20 пикселей, а между верхом и низом есть определенный зазор; если вы внимательно посмотрите, то обнаружите, что они не выровнены, красный фон находится сверху, а розовый фон в нижней части, между ними есть небольшое смещение. Вот и все, пусть наш родительский элемент растянется до 28px. Так откуда они взялись?

    Поскольку именно смещение приводит к поднятию родительского элемента, мы можем легко подумать о соответствующих свойствах выравнивания в CSS.vertical-align, Это призрак? Тогда попробуем их изменитьvertical-align:

    vertical-align:top, верх смещен
     

    vertical-align:middle, кажется, не сильно отличается от того, что было раньше...

    Хотя эти значения атрибута не удалось их выровнять, можно обнаружить, что это действительно связано с ним.Может быть, мы использовали его неправильно и повлияли на этот атрибут? Тогда давайте узнаемvertical-alignКак он выравнивается?Если мы не установим его сначала, он примет значение по умолчанию:baseline- Базовое выравнивание.

    Строчные элементы по умолчанию выравниваются по базовой линии, а базовая линия — это нижний край буквы «x» в поле строки:

    А? ?Внимательно посмотрите на картинку, которую мы раньше смещали, и вы обнаружите, что хотя элементы не выровнены, низ текста выровнен.Разве это не нормальное базовое выравнивание! Это имеет смысл.

    Фокус! !

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

    Вот изображение великого бога Синьсюя:

  • Вопрос 5: Означает ли это, что мы можем установить разную высоту строки двух элементов, чтобы родительский элемент мог быть поднят в нужном месте?

    Здесь мы даем дваspanУстановите высоту строки такой же, как ваш собственный размер шрифта: 20 пикселей и 14 пикселей, вы можете видеть, что они не смещены наружу, но высота родительского элемента не такая, как ожидалось, по-прежнему 28 пикселей. что случилось? Может еще что-то влияет?

    Вы догадались, но мы этого не видим. Цитирование имени великого бога Чжан Синьсюй - призрачный пустой узел.

    «Призрачный пустой узел» — очень важная концепция в модели встроенного блока, которая конкретно относится к: в объявлении документа HTML5 весь синтаксический анализ и рендеринг встроенных элементов ведут себя так, как если бы перед каждым строковым блоком стоял «пустой» коробка. узел". Этот «пустой узел» всегда прозрачен, не занимает никакой ширины, невидим и не может быть получен с помощью скриптов, как призрак, но он существует и ведет себя как текстовый узел, поэтому я называю его «призрачный пустой узел».

    Поскольку он невидим, мы можем притвориться, что это видимый символ x.

      <div>
      <em>x</em>
      <span class="name">重大疾病险</span>
      <span class="tip">保额每月可累计</span>
  </div>

      div{
      font-family: "PingFang SC";
  }
  em{
      display:inline-block; /*为了审查元素看到的不是content area*/
      font-style:normal;
  }
  .name{
      line-height: 20px;
      font-size: 20px;
  }
  .tip{
      display: inline-block;
      line-height: 20px;
      font-size: 14px;
  }

    Этот размер шрифта 'x' и высота строки не установлены, размер шрифта унаследован 20px, высота строки элемента по умолчанию равна 1.x (в 1.x раз больше размера шрифта), конкретное значение еще необходимо изучить, но это определенно >1 , как видно из рисунка, когда ничего не установлено, высота этого 'x' составляет 28 пикселей, что означает, что высота призрачного пустого узла составляет 28 пикселей.

    Так почему бы нам не уменьшить высоту строки призрачного пустого узла? Но этот узел-призрак нельзя увидеть или потрогать, как его настроить? не забудьте,line-heigtнаследуется, мы даем родителюdivнастраиватьline-heigt, узел-призрак естественно унаследует.

Как решить

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

решить один

мы можем дать Отцуdivизline-heightустановить небольшое значение

div{
    line-height: 5px;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /*为了审查元素看到的不是content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}

Таким образом, высота строки узла-призрака составляет всего 5 пикселей, а высота строки родительского элемента — 20 пикселей, без проблем. Но этот метод не идеален, потому что вам нужно подумать об этом маленьком значении...

Решение второе

Когда для высоты строки задано безразмерное значение, это означает, что оно кратно размеру шрифта.

div{
    line-height: 1;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /*为了审查元素看到的不是content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}

установить родительский элементline-heightравно 1, так что высота дочерних элементов является их собственнойfont-size, включая призрачные пустые узлы. Таким образом, никто больше не будет непреднамеренно поддерживать родительский элемент. Если, конечно, ваш призрачный пробельный узел не наследует большой размер шрифта, что вам нужно понимать.

Решение третье

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

div{
    font-size: 0px;
    font-family: "PingFang SC";
}
em{
    display:inline-block; /*为了审查元素看到的不是content area*/
    font-style:normal;
}
.name{
    line-height: 20px;
    font-size: 20px;
}
.tip{
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
}

Как видите, фантомный узел, который мы имитировали, исчез, ширина и высота равны 0, а высота родительского элемента естественным образом возвращается к 20px.

Суммировать

Можно сказать, что вышеизложенное является кратким изложением некоторых моих мыслей о выравнивании встроенных элементов. Если у вас все еще есть сомнения, вы можете прочитать ее еще несколько раз, попробовать сами и продолжить обдумывать. Я также много раз думал над этим вопросом, и вы можете комментировать и задавать вопросы, мы можем обсудить вместе~

Интерфейс Xiaobai, в объяснении есть ошибки или неполнота, я надеюсь, что большие ребята будут милосердны, добро пожаловать, чтобы исправить их ~

Категории