Полностью решить вертикальное выравнивание, вертикальное центрирование не работает, неразрешимые проблемы

Первоначально название моей статьи былоУглубленное обсуждение трудноразрешимых проблем высоты строки и вертикального выравнивания., но это, похоже, не вызывает целенаправленного вопроса, поэтому оно изменено на "Полностью решить вертикальное выравнивание, вертикальное центрирование не работает, неразрешимые проблемы"Поэтому эта статья должна объяснитьline-heightа такжеvertical-align. Что касается различных методов вертикального центрирования, то в Интернете есть много статей, в том числе и о Наггетсах, в этой статье только объясняетсяvertical-alignспособ выровнять.

Анализ явлений и идеи решения всех примеров в этой статье взяты из блога Чжан Синьсюй.«Углубленное понимание CSS взаимосвязи между выравниванием по вертикали и высотой строки». Статья интегрирована с помощью этого сообщения в блоге с моим собственным пониманием, некоторыми концептуальными описаниями и вспомогательными диаграммами, которые полезны для понимания. .

Следующая часть представляет собой текст:

В реальных проектахline-heightа такжеvertical-alignЭто два свойства CSS, которые используются очень часто. вline-heightИспользуется для указания высоты строки текста,vertical-alignИспользуется для указания вертикального выравнивания элемента. Однако мы часто сталкиваемся со многими неожиданными результатами в процессе применения двух свойств, таких как использованиеvertical-align:middileВертикальное центрирование невозможно (вертикальное выравнивание недействительноЭтот вопрос часто задают). Эти два атрибута очень тесно связаны между собой, и результаты их совместного действия существуют всегда и везде.Для правильного использования этих двух атрибутов только глубокое понимание механизма их действия может разрешить различные сомнения, возникающие в процессе фактического использования.

1. Несколько концепций

1. высота строки: расстояние между базовыми линиями двух строк текста.
2. исходный уровень: Понятие в английском алфавите относится к положению нижней части буквы x при написании английского алфавита, то есть к предпоследней строке в сетке сверху вниз, когда мы пишем английским алфавитом. В CSS это базовое значение. На следующих графиках показаны высота строки, базовый уровень иvertical-alignИмущество,baseline,bottom,middle,topотношение нескольких значений.

Исправление: среднее описание на изображении выше неверно, правильным должно быть положение, в котором высота x находится на полпути к базовой линии., где x-height относится к высоте буквы x, примерно x-height, конкретно выможете нажать здесьК пониманию

3. Четыре встроенных блока

   В CSS есть четыре типа встроенных блоков:containing box, inline boxes, line box, content area. Они следующие:

(1) containing box: Модель внешнего блока, которая содержит другие блоки.

(2) line boxes: он состоит из встроенных блоков один за другим, строка является строковым блоком, а высота одиночного блока строки определяется тем, который имеет наибольшую высоту среди всех встроенных блоков, которые он содержит (поline-heightРаботает, объяснено позже), и высота одного строкового блока складывается, чтобы стать высотой содержащего его блока.

(3) inline boxes: блоки не будут отображаться блоками, а будут отображаться рядом друг с другом, например,span,a,emРавные теги и анонимные встроенные блоки (т. е. без открытого текста тега).

(4) content area: невидимая рамка вокруг текста, ее размер связан с размером шрифта, а ее высота может рассматриваться как высота цвета фона, когда текст выделяется мышью (поясняется позже). Ниже приведены отношения нескольких полей (на рисунке розовым цветом обозначена часть текста, выделенная мышью)

<div>
 这里是一个div，里面包含了独立的文字，
 <span>span标签</span>
 <em>em标签</em>，
 以及其他的一些文字。
</div>

Очень важно понимать четыре вида коробок. Обычное использование плавающего, позиционирования и автоматического расширения высоты родительского роста имеет много, чтобы сделать с ролью коробок.

2. Глубокое понимание высоты строки

1. Соотношение высоты между line-height и line box

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

<div class="div div1">我是一行文字大小为100px,但是line-height为0的文字</div>
<div class="div div2">我是一行文字大小为0,但是line-height为100px的文字</div>
<div class="div div3">我是一行文字大小和line-height都为100px的文字</div>

.div {
  background: #f0f0f0;
  border:  1px solid #e0e0e0;
  margin: 10px;
}
.div1 {
  font-size: 16px;
  line-height: 0;
}
.div2 {
  font-size: 0;
  line-height: 100px;
}
.div3{
  font-size: 16px;
  line-height: 100px;
}

结果表现为：

Результат очевиден, когда высота строки текста равна 0, даже если его размер шрифта большой, высота строки строки равна 0. И наоборот, даже если размер шрифта равен 0, если высота строки не равна 0, высота метки будет растягиваться. В то же время мы обнаружили, что еще одной особенностью высоты строки является центрирование по вертикали.Независимо от высоты блоков строки, текст в них разделяет центрирующая линия по вертикали.Используя эту особенность, мы также можем добиться некоторого приблизительного центрирования по вертикали. , Эффект. (Почему приблизительно, объясним позже).

2. текстовый интервал

   Интервал между двумя строками текста - это интервал текста.В CSS интервал над и под текстом составляет половину интервала текста, то есть после установки высоты строки разница между высотой строки и размером шрифта будет поровну между верхней и нижней частью текста. Пусть интервал между верхом и низом текста равен x, высота строки — y, а размер шрифта — z, тогда:2x + z = y.iex = (y - z) / 2Вот почему иногда, когда мы устанавливаем стиль, размер текста больше, чем высота строки, что приводит к перекрытию нескольких строк текста.

3. Значение высоты строки равно1.5,150%а также1.5emразница

   Когда мы присваиваем значение высоте строки, мы часто устанавливаем что-то вроде1.5,1.5em,150%ценность . Но очень важно понимать разницу между несколькими значениями свойств. Значение атрибута line-height наследуется, то есть значение атрибута, установленное вышестоящим, будет унаследовано дочерним. Разница между несколькими свойствами заключается в том, что 1.5 будет пересчитывать значение высоты строки в соответствии с собственным размером шрифта после того, как его унаследует дочерний элемент, а 1.5em и 150% будут использоваться без изменений после того, как родитель вычислит значение высоты строки дочернего элемента. См. следующий пример, чтобы наглядно проиллюстрировать эту функцию.

Как вы можете видеть на изображении выше, когда родительский элемент имеет размер шрифта 16 пикселей и высоту строки 150%（即16x150%=24px）, окончательная высота строки 24 пикселя будет унаследована дочерним элементом. Поскольку размер шрифта дочернего элемента составляет 40 пикселей, высота строки меньше размера шрифта. Согласно формуле в пункте 2 выше, мы можем получить, что расстояние между двумя строками текста2x = 24 - 40 = -16px, поэтому две строки текста перекрываются; когда высота строки равна 1,5, высота строки будет пересчитана в соответствии с размером собственного шрифта, то есть2x = (40 * 1.5) - 40 = 20px, расстояние между двумя строками текста 20 пикселей, текст не будет перекрываться. 1.5em соответствует 150%. Поэтому в процессе фактического использования большинство сцен должны использовать в качестве значения line-height меньше em и процентных значений, а вместо них использовать 1,5, 2 и другие значения без единиц измерения.

3. Глубокое понимание вертикального выравнивания

Новички используютvertical-alignПри выборе атрибутов часто обнаруживается, что окончательные результаты производительности не соответствуют ожидаемым, а «вертикальное выравнивание недопустимо» также является одной из наиболее часто запрашиваемых проблем CSS. Большинство из них вызвано недостаточным пониманием атрибута, пониманием только характеристик атрибута, поведения производительности и отношений с другими атрибутами (如line-height) механизма и эффекта совместного действия, может решить некоторые проблемы, связанные с вертикальным выравниванием, и эффективно использовать его.

1. помещение

   Предпосылка, что вертикальное выравнивание работает, заключается в том, что элемент является встроенным горизонтальным элементом или элементом ячейки таблицы, включаяspan, img,input, button, tdИ элементы, уровень отображения которых изменен на встроенный уровень или табличную ячейку путем отображения. Это также означает, что по умолчаниюdiv, pТакие элементы, как вертикальное выравнивание, недействительны.

2. стоимость

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

   (1) Ключевые слова:Такие какtop, middle, baseline(默认值), bottom, super, sub, text-bottom, text-top

   (2) Значение длины:Например, 10px, -10px (оба смещены относительно базовой линии)

   (3) Процентное значение:например 10%, согласноline-heightВ расчете на базу (важный) после значения.

3. Форма выражения после установки различных свойств

   Обычно то, что мы используем больше всего, должно бытьtop,bottom,middle,baselineИ несколько других ключевых слов. И тому подобное с меньше, чем значение длины. Следующие примеры показывают, как через различные формы ценности и разрешены.

Высота строки всех вышеперечисленных внешних меток составляет 50 пикселей, фон серый, все выравнивания установлены для изображения, а текст на красном фоне — это диапазон меток одного уровня с изображением.Полный исходный код см. здесь. Наблюдая, мы можем видеть, что производительность каждого значения атрибута выглядит следующим образом:

(1)исходный уровень:Выравнивание по умолчанию, базовое выравнивание, выравнивается по базовой линии родительского элемента;

(2)верх:Выравнивание по верхнему краю самого высокого элемента в строке, обычно по верхнему краю родительского элемента;

(3)середина:Выровнять по центральной линии родительского элемента (примерно по центру по вертикали);

(4)Нижний:а такжеtopВместо этого выровняйте по нижнему краю родительского элемента;

(5)текст сверху:с родительским элементомcontent area, на который не влияет высота строки или другие окружающие элементы. (Как показано на рисунке, поскольку высота строки равна 50, но для обеспеченияcontent areaВерх выровнен, поэтому над картинкой есть зазор, который можно совместить сtopсравнение);

(6)текст внизу:а такжеtext-topВместо этого всегда сопоставляйте родительский элементcontent areaнизкоуровневое выравнивание. То же самое можно сделать сbottomСравните и отличите. Обратите внимание, что, как вы можете видеть на рисунке, кажется, что поведение этого значения такое же, как и уbaselineПоследовательно, но при ближайшем рассмотрении видно, что на самом делеtext-bottomЛиния, гдеbaselineнемного ниже.

(7)Значения и проценты:Когда значение положительное, выравнивание будет основано на базовой линии, смещенной вверх на размер ответа, а когда отрицательное, смещено вниз. Процент основывается на размере высоты строки, вычисляет значение ответа, а затем смещает его в виде числового представления. (Важно, что процент вычисляет значение смещения на основе высоты строки и может объяснить и найти решения для некоторых странных явлений, которые будут объяснены позже).

(8)супер и саб:Оба этих значения должны найти подходящую базовую линию в качестве выровненной базовой линии для выравнивания, аналогичноsuperэтикетки иsubМетки, но не масштабируйте размер шрифта.

4. Тесная связь и применение line-height и vertical-align

На первый взгляд трудно увидеть взаимосвязь между этими двумя свойствами, но на самом деле эти два свойства очень тесно связаны и присутствуют повсюду. Цитируя Чжан Синьсюй, это «возмутительно разбитая дружба». Мы имеем дело с выравниванием, расположением и т. д. встроенных элементов.Многие непредсказуемые странные явления имеют непосредственное отношение к вертикальному выравниванию и высоте строки.В принципе, мы можем найти причины и решения от них.

1. несколько определений

   Прежде чем говорить о взаимосвязи и применении между двумя свойствами, давайте разберемся с несколькими определениями.

(1) базовый уровень встроенного блока:В документе модели визуального формата CSS2 указано, что базовая линия встроенного блока является базовой линией последнего блока строки в обычном потоке.Однако, если в этом блоке строки нет встроенных блоков или значение его свойства переполнения не виден, то его базовой линией является нижняя граница края. Что это значит? Проиллюстрируем картинкой:

Исправление: В тексте описания над картинкой "красная линия предназначена для установки середины" на "желтая линия предназначена для установки середины"

(2) выравнивание по середине:Относится к вертикальной осевой линии элемента, выровненной с линией, где базовая линия родителя находится на половине X вверх. Это небольшой поворот, посмотрите на картинку ниже:

(3) Особенности погружения персонажа:Текст имеет характеристику опускания, то есть вертикальная центральная точка текста немного опускается в средней линии области, где расположен текст, и степень погружения текста у разных шрифтов различна. чем больше размер текста, тем очевиднее опускание. Как показано на рисунке выше, точка средней линии X опускается относительно белой средней линии.

2. несколько явлений

   Давайте рассмотрим несколько явлений на примерах.

<div class="wrap">
  <img src="xxx.png" />
</div>
<div class="wrap">
  <span></span>
  <span>我有内容</span>
</div>
<div class="wrap" style="height:200px;">
  <img src="xxx.png" class="middle" />
</div>

.wrap {
  background: #249ff1;
}
span {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
}
img {
  width: 100px;
}
.middle {
  vertical-align: middle;
}

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

Мы обнаружили, что изображение, помещенное в div, будет иметь немного больше пустого пространства внизу, а во втором примере два промежутка с одинаковым стилем, один с текстом и один без текста, наше намерение состоит в том, чтобы отобразить две стороны промежутка стороны, Но результаты были очень несогласованными. Что касается третьего примера, изображение выравнивается по центру, но, похоже, это не действует. Так откуда берется пустое место? Почему два пролета неуместны? Действительно ли изображение не выровнено по центру? Чтобы объяснить это явление, мы должны прояснить связь между выравниванием по вертикали и высотой строки. Начнем с первого примера, пошагового анализа.

Прежде всего, благодаря анализу характеристик производительности первых двух атрибутов мы знаем, что выравнивание элементов по умолчанию — это выравнивание по базовой линии, то есть по базовой линии. В браузерах есть размеры шрифта по умолчанию, и этот разрыв является производным от этих двух. Чтобы облегчить наше наблюдение, мы установили высоту линии переноса на относительно большое значение, здесь мы установили ее на 50 пикселей. После настройки производительность следующая:

Как видите, пустое пространство внизу картинки в это время становится больше. На самом деле, хотя в обертке только один тег img, на самом деле есть пустой узел, который мы не можем видеть. Этот специальный пустой узел имеет тот же размер текста и высоту строки, что и обычный текстовый узел. Поэтому мы можем использовать обычный текст вместо этого узла для наблюдения за явлением. Вводим строку XXX после картинки. следующим образом:

Затем мы оборачиваем текст тегом span с встроенной блокировкой и устанавливаем цвет фона текста. следующим образом:

После вышеуказанных двухшаговых изменений мы обнаружили, что положение картинки не изменилось, и размер зазора внизу не изменился. На данный момент достаточно объяснить, почему в нижней части изображения есть пробел, когда есть только один тег img: из-за наличия пустых узлов изображение эквивалентно тому, что за ним следует текстовый узел. По умолчанию выравнивание изображения основано на базовой линии родительского элемента.Чтобы сохранить выравнивание с базовой линией, внизу изображения должен быть оставлен зазор, размер которого равен половине интервала между текстом, указанного выше. [то есть ((line-height - font-size) / 2]. И чем больше значение line-height, тем больше будет зазор. До сих пор, в сочетании с некоторым нашим анализом характеристик значений атрибутов, становится довольно просто найти решение проблемы. Чтобы убрать пробел в нижней части изображения, просто добавьтеline-heightа такжеvetical-alignОдин из атрибутов можно убить. Есть несколько способов:

（1）将图片设置为display:block（利用vertical-align的生效前提）；

（2）将vertical-align设置为top，bottom，或者middle等值（利用属性值的表现行为）；

（3）将line-height设置为0（利用line-height为0时，基线上移）；

（4）将font-size设置为0 （如果line-height的值为相对值，如1.5）；

（5）将img设置浮动或者绝对定位（如果布局允许的话）

Теперь, используя второй метод, установите вертикальное выравнивание по моему низу, и результат после настройки будет следующим:

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

Что касается третьего примера, он немного сбивает с толку, и это явление, о котором чаще всего спрашивают о недействительности вертикального выравнивания. По условиям для того, чтобы выравнивание по вертикали вступило в силу, после установки выравнивания по середине для img оно должно быть по центру по идее, но почему это не работает? Это действительно не работает? Ответ: это работает. Фактически, vertical-align:middle работает, но что касается того, почему окончательное изображение не центрировано по вертикали в родительском элементе, это связано с тем, что высота пустых узлов позади недостаточна, в результате чего базовая линия находится на верхней стороне. Согласно определению средней линии, средняя линия также находится на верхней стороне. Мы можем использовать букву x, чтобы заменить пустой узел позади, чтобы наблюдать за явлением.

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

На данный момент мы видим, что изображение «приблизительно» вертикально центрировано относительно родительского элемента. Это связано с тем, что после установки высоты строки согласно предыдущему анализуline-heightравныйfont-size+2倍的文字上下间距Видно, что родительская базовая линия опущена. Средняя линия составляет половину высоты над базовой линией.В это время средняя линия изображения совмещена с точкой средней линии x спины, благодаря чему достигается эффект приблизительно вертикального центрирования.

3. заявление

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

   (1) добиться вертикального центрирования

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

<div class="wrap">
  <img src="./images/xx.png" class="middle"/>
</div>

.wrap {
  background: #249ff1;
  margin: 10px;
}
.wrap1 {
  line-height: 200px;
  text-align: center;
}
.middle {
  vertical-align:  middle;
}

(2) Вертикальное центрирование любой родительской высоты

Среди трех упомянутых выше явлений, в третьем примере мы устанавливаем значение line-height для родителя равным значению height, добиваясь эффекта приблизительного вертикального центрирования. Что делать, если высота родителя изменяется вместе с содержимым? На данный момент нет возможности установить конкретное значение для родителя или использовать проценты, потому что высота строки рассчитывается на основе размера шрифта. Если подумать об этом под другим углом, мы не можем увидеть пустой узел, но если вы можете установить для него высоту и сделать ее такой же, как высота родителя, эта проблема будет решена. Как придать высоту? Ответ заключается в том, что с помощью вспомогательных элементов мы можем добавить встроенный тег span в конце родителя с высотой 100% и размером шрифта 0, а затем выровнять центрированный элемент по центру.

<div class="wrap" style="height:200px;text-align:center;">
  <img src="../../images/zhuyin.png" alt="" class="middle">
  <span style="display:inline-block;height:100%;vertical-align:middle;font-size:0;"></span>
</div>

Конечно, этот тег span также может быть реализован через псевдоэлементы.

(3) Выровняйте оба конца списка с несколькими изображениями

При создании макета, похожего на список продуктов, нам часто нужно выровнять концы каждой строки списка. Есть много способов достижения, здесь мы используемdisplay:inline-block+辅助元素реализовать. следующим образом:

<ul>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <span class="fix"></span>
  <span class="fix"></span>
  <span class="fix"></span>
</ul>

li{
  list-style-type: none;
  border:  1px solid red;
  display: inline-block;
  width: 28%;
  text-align: center;
}
.fix {
  display: inline-block;
  width: 28%;
  text-align: center;
}
ul {
  width:  720px;
  border:  1px solid #a7a7a7;
  text-align: justify;
  margin: 20px auto;
}
li img {
  width: 95%;
}

Результат выглядит следующим образом:

Под каждым изображением будет пробел. Источник пробела был объяснен ранее. Мы можем решить эту проблему, установив высоту строки: от 0 до ul. Эффект следующий:

После удаления заготовок я обнаружил, что внизу последней картинки есть относительно большая заготовка, почему? Откуда это взялось? Для удобства наблюдения мы добавляем рамку к каждому span.fix и добавляем несколько букв к последнему span.fix. Результат выглядит следующим образом:

Как видно из результатов, последний диапазон выровнен с базовой линией текстового узла. Помните пример дислокации двух инлайн-блоков, упомянутый ранее? Это тот же принцип, что и этот. Поскольку предыдущий диапазон представляет собой узел без встроенных блоков, его базовая линия является нижней частью элемента, и по умолчанию базовая линия выровнена, поэтому пустой диапазон будет падать вниз. тогда что нам делать? Один способ — изменить положение базовой линии, другой — изменить выравнивание. Чтобы изменить базовую линию, добавьте содержимое, например пробелы, в пустой диапазон. Мы переместили xxxx в диапазон, и результат выглядит следующим образом:

Выяснилось, что в это время заготовка чудесным образом исчезла. Причина в том, что мы изменили положение базовой линии. В то же время, поскольку для высоты строки установлено значение 0, она выравнивается. Другой способ - изменить выравнивание, ставим на верх, и убираем все вспомогательные строки и символы, результат такой:

На этом наше приложение готово.

4. Почему это примерно вертикально по центру

Мы уже много раз упоминали об этом»примерно по вертикали«Слово. Почему приблизительное, а не абсолютное? Вопрос должен вернуться к этой картине.

При установке выравнивания элемента по середине это означает:Вертикальная осевая линия элемента выравнивается по линии, в которой базовая линия родительского элемента расположена вверх на 1/2 высоты.. Другими словами, желтая линия на рисунке совмещена с центром красной буквы x. Но у текста есть функция опускания, центральная точка исходного x должна быть выровнена с белой линией на рисунке, но особенность опускания текста заставляет буквы немного опускаться. В результате желтая линия не может быть абсолютно совмещена с белой линией. Размер этой капли связан с размером и шрифтом текста. Когда размер текста достаточно мал, мы можем его игнорировать.Приблизительно белая линия выравнивается с желтой линией для достижения эффекта центрирования. Однако, когда размер текста большой, это не может быть хорошо реализовано. Возьмем пример выше:

<div class="wrap" style="height:200px;line-height:200px">
  <img src="../../images/zhuyin.png" class="middle">x
</div>

img {
  width:  100px;
}
.wrap {
  background: #249ff1;
  margin: 10px;
}
.middle {
  vertical-align:  middle;
}

Когда мы устанавливаем line-height и height равными, достигается эффект вертикального центрирования. Мы используем инструмент рисования, чтобы сделать некоторые вспомогательные линии на рисунке.

Результат показывает, что центральная линия (красная) изображения не совсем совпадает с центральной линией (оранжевая) родительского элемента. Поскольку размер выпадающего символа связан с размером текста, мы устанавливаем размер шрифта родителя равным 100px, и результат выглядит следующим образом:

В этот момент можно четко заметить, что верхняя заготовка изображения больше, чем нижняя. Отклонение как раз и есть отклонение опускания текста. С помощью инструмента «Рисунок» начертите вспомогательные линии и обратите внимание на следующее:

Корень проблемы найден, так есть ли способ добиться абсолютного центрирования? Ответ положительный. Решение очевидно, если мы позволим различным строкам родительского элемента перекрываться, то есть установим размер шрифта равным 0, мы сможем добиться абсолютного центрирования. установить родительский элементfont-size:0, результат следующий:

V. Резюме

досконально освоитьline-heightа такжеvertical-alignЕсть много деталей двух атрибутов, которые необходимо проанализировать и найти, что немного сложно. Но если мы выясним несколько общих черт и моделей поведения, то сможем избежать некоторых подводных камней, встречающихся в процессе практики. Тем самым повышая эффективность работы. Из вышеприведенного анализа можно сделать следующие выводы:

1. разбиратьсяline-heightа такжеheightпредыдущие отношения;
2. разбиратьсяvertical-alignповедение различных значений;
3. Понять взаимосвязь четырех встроенных блоков;
4. понять определение базовой линии, в том числеinline-blockбазовое определение;
5. Понять определение средней линии, уточнитьmiddleистинное выражение;
6. Знайте, что у персонажей есть свойство тонуть
7. Всестороннее мастерствоvertical-alignа такжеline-heightОтношение между.

Содержание этой части сначала пишется здесь.Если у меня есть новые дополнения или у других людей есть вопросы, вы можете дать мне обратную связь, и я улучшу статью после завершения. Кроме того, мои статьи о Nuggets будут синхронизированы с моим github, а контент будет постоянно обновляться. Если вы считаете, что это полезно для вас, спасибо за то, что поставили звезду. Если у вас есть какие-либо вопросы, добро пожаловать в общение. Ниже приведены несколько адресов синхронизированных статей.

1. Подробное объяснение некоторых свойств и приемов CSS.

2. Связанный с Javscript и некоторые идеи разработки инструментов/библиотек и интерпретация исходного кода

Расширенное чтение этой статьи:Роль и история подзаголовка «х» в мире CSS (Чжан Синьсюй)