CSS мир основ внешнего интерфейса

CSS
CSS мир основ внешнего интерфейса

Я думаю, вам иногда больно писать код css каждый день: почему css этого макета так сложно реализовать! У меня также часто возникает ощущение, что, казалось бы, простой макет всегда требует много времени для реализации, и иногда могут возникать какие-то странные явления, не поддающиеся пониманию. Это потому, что мы только приблизительно знаем форму CSS и не видели сути CSS. По рекомендации коллеги я прочитал книгу Учителя Чжан Синьсюй «Мир CSS» и обнаружил, что CSS отличается от того, что я себе представлял. Эта статья представляет собой личное резюме заметок для "Мира CSS". Чтобы уменьшить объем, я отказался от излишнего юмора г-на Чжана и потерял несколько глав с низким содержанием золота. Поскольку IE был удален из игры, все аспекты, связанные с на совместимость с CSS также игнорируются.Я не помню, и я добавил некоторые свои собственные понимания и проверки в местах, которые я думаю, не легко понять, поэтому я надеюсь исправить ошибки. Кстати, порекомендуйте полезный онлайнинструмент для редактирования кода, домашнее зеркалосайт, чтобы вы могли протестировать примеры в этой статье. Кроме того, эта статья будет постепенно обновляться благодаря более глубокому пониманию автором CSS, и я надеюсь показать реальный мир CSS в качестве заголовка в конце.

Учитель Сяоган

основная концепция

Некоторые из этих базовых понятий могут быть трудными для понимания, но они очень важны. Если вы все еще не понимаете их после прочтения, вам нужно самостоятельно воспользоваться Google или Baidu. В Интернете есть много статей об этих понятиях.

поток

«Поток», также известный как поток документов, является основным механизмом позиционирования и макета CSS. Поток — это абстрактная концепция HTML, подразумевающая, что такое расположение является таким же естественным и автоматическим, как течение воды. «Гибкий макет» — это механизм макета HTML по умолчанию. Если вы пишете HTML без css, по умолчанию используется нисходящий (элементы блочного уровня, такие какdiv) слева направо (строчные элементы, такие какspan) компоновка с накоплением.

Блочные элементы и встроенные элементы

Это должен знать каждый.

Элемент блочного уровня относится к элементу, который сам по себе заполняет строку, напримерdiv、ul、li、table、p、h1и другие элементы. Отображаемое значение этих элементов по умолчанию равноblock、table、list-itemЖдать.

Встроенные элементы, также известные как встроенные элементы, относятся к элементам, которые занимают только пространство, содержащееся в границе соответствующей метки.Эти элементы отображаются рядом, если родительский элемент достаточно широк, напримерspan、a、em、i、img、tdЖдать. Отображаемое значение этих элементов по умолчанию равноinline、inline-block、inline-table、table-cellЖдать.

В реальной разработке мы частоdisplayРассчитано какinline inline-block inline-table table-cellэлементы называются встроенными элементами, аdisplayРассчитано какblockэлементы называются элементами блочного уровня.

ширина: авто и высота: авто

width,heightЗначения по умолчаниюauto.

Для элементов блочного уровня ниже гибкого макетаwidth: autoАдаптивно заполняет ширину родительского элемента. Полнота здесь не такая, какwidth: 100%фиксированная ширина, но как вода может бытьmarginРазличные и адаптивные к ширине родительского элемента.

Для встроенных элементовwidth: autoОн показывает обтекание, то есть определяется шириной дочернего элемента.

Независимо от встроенных или блочных элементов,height: autoВсе они завернуты, то есть высота растягивается дочерними элементами.

Обратите внимание на родительский элементheight: autoприведет к дочерним элементамheight: 100%процент отказа.

Свойства css очень интересны.При нормальном потоке, если элемент блочного уровня имеетwidthявляется фиксированным значением,marginдаauto,ноmarginБудет удерживать оставшееся место; еслиmarginявляется фиксированным значением,widthдаauto,ноwidthзаполнит оставшееся пространство. Вот что такое плавные макеты.

Внешняя коробка и внутренняя коробка

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

Внутренние блоки — это блоки, которые определяют, действуют ли некоторые свойства внутри элемента. Внутренний бокс отвечает за отображение контента.

Такие какdisplay: inline-table;Внешняя коробкаinline, внутренняя коробкаtable. Внешний блок определяет, что элементы должны отображаться рядом, как встроенные элементы, а внутренний блок определяет, что элемент может устанавливать такие атрибуты, как ширина, высота и вертикальное поле. Как показано ниже

Таблица справа и текст слева расположены в одну строку (характеристики производительности внешнего блока встроены) и имеют пользовательскую ширину 111 пикселей (внутренняя таблица блока может задавать ширину и высоту).

css веса и не только!important

Был вопрос интервью, который поставил меня в тупик:

// 假设下面样式都作用于同一个节点元素`span`，判断下面哪个样式会生效
body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}

Жаль, что я даже не знал, что CSS имеет вес после трех лет работы над фронтендом 😓

Список весов селектора css выглядит следующим образом:

Веса Селектор
1,0,0,0 Встроенный стиль: style=""
0,1,0,0 Селектор идентификатора:#idName{...}
0,0,1,0 Классы, псевдоклассы, селекторы атрибутов:.className{...} / :hover{...} / [type="text"] ={...}
0,0,0,1 Теги, селекторы псевдоэлементов:div{...} / :after{...}
0,0,0,0 Общий селектор (*), дочерний селектор (>), смежный селектор (+), родственный селектор (~)

Раньше я считал само собой разумеющимся, что вес десятичный, то есть десять селекторов классов равны одному селектору id, что неверно. Базовый вес CSS был 256 в IE6, а позже расширен до 65536, в то время как современные браузеры используют большие числа. Таким образом, мы можем игнорировать проблему основания и сравнивать значения веса от большего к меньшему.

Если веса сравниваются в десятичном формате, то одиннадцать селекторов классов имеют больший вес, чем один селектор ID. Но это не так, как проверено:адрес.

Видно, что стили одиннадцати селекторов классов не переопределяют стили одного селектора id, потому что:

При сравнении двух весов веса на уровне сравниваются пошагово от большего к меньшему, а не 1000число + 100число + 10номер + 1Сумма сравниваемых чисел, другими словами, количество селекторов нижнего уровня не будет превышать приоритет селекторов высокого уровня.

Правильное правило:

  1. Сначала сравните с высоким уровнем, когда высокий уровень такой же, затем сравните с низким уровнем и так далее;
  2. Если они совершенно одинаковы, принимается последний принцип;

Поэтому сравнение вопросов интервью выше должно заканчиваться сравнением селектора id второго уровня: (#god + #test = 0,2,0,0) > (#god = 0,1,0,0) ; и два веса в приведенном выше примере: (#test = 0,1,0,0) > (.test....test10 = 0,0,11,0), что также находится на втором уровне. сравнение селектора id заканчивается. Поэтому, чтобы в дальнейшем сравнивать веса, сначала сравните количество селекторов id, а если id одинаковое количество, то сравните количество селекторов классов. Ничего себе, я чувствую, что это может быть вопросом интервью для китайского сообщества.

В CSS,!importantвес довольно большой. если есть!important, то независимо от веса имеем!importantстоимость имущества. Однако есть исключения по ширине и высоте, потому что ширина и высота будутmax-width/min-widthкрышка, так!importantне удастся.

width: 100px!important;
min-width: 200px;

После того, как приведенный выше код будет рассчитан, он будет проанализирован движком в:

width: 200px;

Коробочная модель (размер коробки)

Внутреннее поле элемента определяетсяmargin box,border box,padding box,content boxЧетыре коробки образуют модель коробки снаружи внутрь.

IE модель:box-sizing: border-boxВ этом режиме ширина элемента рассчитывается какborder+padding+contentсумма ширин.

стандартная модель w3c):box-sizing: content-boxВ этом режиме ширина элемента рассчитывается какcontentширина.

из-заcontent-boxне учитывается при расчете шириныborder padingЭто раздражает, и это по умолчанию, и в отрасли обычно используется следующий стиль сброса кода:

:root {
  box-sizing: border-box;    
}
* {
  box-sizing: inherit;
}

встроенная блочная модель

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

  1. Область содержимого: По сути, поле персонажа. В браузерах фоновым цветом выделенного текста является область содержимого.
  2. Встроенный блок: встроенный блок означает, что внешний блок элемента является встроенным и будет выровнен с другими встроенными блоками.
  3. Линейный блок: Каждая строка, состоящая из встроенных элементов, является строковым блоком. Если в строке нет встроенных элементов, таких как пустойdivlabel, он не образует линейный блок. Блок строки состоит из встроенных блоков. Если строка переносится, это два блока строки. Например, новая строка, содержащая много символовpТеги, в каждой строке есть поле блока строк. Стоит отметить, что если элемент установлен вdisplay: inline-block, создается отдельный линейный блок.line-heightДействует на линейный блок и в конечном итоге определяет высоту.
  4. Содержащая коробка: это содержащий блок. Несколько строк текста образуют содержащий блок, а содержащий блок имеет несколько строковых полей.
  5. Призрачный пустой узел: перед каждым строковым полем встроенного элемента есть "пустой узел". Этот "пустой узел" не занимает никакой ширины и не может быть выбран для получения, но он существует и ведет себя как текстовый узел (этот article Многие примеры в этой статье будут использовать букву x для имитации призрачного пустого узла).

заменить элемент

Замещающий элемент — это элемент, содержимое которого может быть заменено.content box可以被替换的元素。 если естьsrc=""атрибут<img> <audio> <video> <iframe>элементы и текстовые<input> <select> <textarea>элементы и т.д.

Все замененные элементы являются встроенными элементами, по умолчаниюdisplayсобственностьinlineилиinline-block(Кромеinput[type="hidden"]По умолчаниюdisplay: none;).

Элементы замены имеют собственные стили, размеры по умолчанию (в зависимости от браузера) и ихvertical-alignПо умолчанию свойствоbottom(Значение по умолчанию для незаменяемых элементов равноbaseline).

css механизм наследования

видетьcss простое наследование.

шкатулка четыре бриллианта

content

Для незаменяемых элементов, таких какdiv,Этоcontentэто элемент внутри div. И для сменного элемента егоcontentЭто содержание сменной части.

в CSScontentАтрибуты в основном используются для псевдоэлементов:before/:afterПомимо создания библиотеки шрифтов или написания меньшего количества div, это бесполезно для общей разработки.

padding

paddingЭто самый стабильный из четырех великих бриллиантов, и редко имеет какие-либо отклонения. Тем не менее, есть несколько вещей, о которых следует знать:

  1. В большинстве случаев мы будем сбрасывать элемент наbox-sizing: border-box, расчет ширины и высоты включаетpaddingда, дайpaddingСлишкомcontent boxчасть чувства, как будтоline-heightсвойства также действуют наpaddingначальство. Но на самом деле ширина и высота фактического содержимого элемента толькоcontent boxширина и высота, аline-heightсвойства не действуют наpaddingиз.

  1. paddingНе может быть отрицательным, но может быть в процентах. по горизонтали и по вертикали в процентахpaddingОба рассчитываются относительно ширины родительского элемента. положитьdivустановить какpadding: 100%получить квадрат,padding: 10% 50%У вас получится прямоугольник с соотношением сторон 5:1.
body {
  width: 400px;
}
.box {
  padding: 10% 50%;
}

  1. paddingСотрудничатьbackground-clipсвойства, вы можете сделать некоторые специальные формы:
/*三道杠*/
.icon1 {
  box-sizing: border-box;
  display: inline-block;
  width: 12px;
  height: 10px;
  padding: 2px 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: currentColor; /*注意如果此处背景颜色属性用缩写的话，需要放到其他背景属性的前面，否则会覆盖前面的属性值（此处为background-clip）为默认值*/
  background-clip: content-box;
}
/*双层圆点*/
.icon2 {
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}

Предварительный просмотр выглядит следующим образом: (currentColor — одна из немногих переменных в css, которая относится к значению цвета текущего текста, очень проста в использовании)

margin

  1. как маржа,marginСвойство не участвует в расчете ширины бокса, но задаваяmarginОтрицательное значение, но оно может изменить размер элемента по горизонтали:
<div>asdf</div>
<style>
  div {
    margin: 0 -100px;
  }
</style>

В настоящее времяdivШирина элемента больше ширины родительского элемента200pxиз. Но это происходит только тогда, когда элемент находится в потоковом макете, т.е. элементwidthпо умолчаниюautoИ когда он может держать ряд. Если элемент имеет заданную ширину или элемент имеетfloat: left / position: absoluteТакие свойства изменяют компоновку жидкости, затемmarginОтрицательное значение не изменяет ширину элемента.

  1. Вертикальная ориентация элементов блочного уровня возникаетmarginСлияние, есть следующие три сценария:
  • между соседними одноуровневыми элементамиmarginсливаться;
  • родительский элементmargin-topИ подэлементыmargin-top, родительский элементmargin-bottomи дочерние элементыmargin-bottom;
  • Собственный пустой элемент уровня блокаmargin-topа такжеmargin-botomСлияние, примеры следующие.

предотвращатьmarginСлияние может быть: местами элементовbfc2. Установкаborderилиpaddingбарьерmargin3. Блок со встроенными элементами (например, текстом) 4. Установите высоту родительского элемента.

  1. marginПроцентное значениеpaddingто же, вертикальноmarginКак и в случае с горизонтальным направлением, оно рассчитывается относительно ширины родительского элемента.
<div class="box">
  <div></div>
</div>
<style>
  .box{
    overflow: hidden;
    background-color: lightblue;
  }
  .box > div{
    margin: 50%;
  }
</style>

На данный момент .box представляет собой прямоугольник с соотношением сторон 2:1, потому что вертикальное направление самого пустого элемента уровня блокаmarginПроизошло слияние.

Этот родительский элемент устанавливаетoverflow: hiddenэто использоватьbfcАтрибут предотвращает дочерний элементmarginОбъединить с родительским элементом и заменить другимbfcФункции или настройки1pxизborder / paddingВсе эффективны.

  1. margin: autoОн может автоматически заполнить оставшуюся ширину и высоту после установки ширины и высоты блочного элемента.margin: autoПредварительным условием для срабатывания автозаполнения является наличие у элемента функции автозаполнения в соответствующем горизонтальном или вертикальном направлении.Очевидно, что высота блочных элементов не имеет этого условия по умолчанию. Типичным применением является реализация в горизонтальном бюро блочных элементов:
display: block;
width: 200px;
margin: 0 auto;

autoСвойство состоит в том, что если обе стороныauto, то оставшаяся ширина делится поровну на обе стороны, если одна сторонаmarginФиксируется, другая сторонаautoЗатем эта сторонаautoэто оставшаяся ширина. Каштан:

Эта функция малоизвестна, но очень полезна.

Помимо горизонтального направления, вертикальноеmarginВертикальное центрирование также может быть достигнуто, но элемент должен иметь функцию автоматического заполнения в вертикальном направлении, и эту функцию можно использовать.positionвыполнить:

position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
width: 200px;
height: 200px;
margin: auto;

border

borderОсновная функция - сделать границу.border-styleЗначение атрибутаnone/solid/dashed/dotted/doubleПодождите, вы можете догадаться, что это такое, глядя на название:

border-widthЗначение свойства по умолчанию равно3px, чтобы заботиться о моем младшем братеborder-style: double,Тебе известно. Примечательно,border-colorПо умолчанию используется цвет шрифта, что эквивалентно настройке по умолчанию.border-color: currentColorТакой же.

borderДругой популярной функцией является построение графики, особенно для широко используемых треугольников Принцип можно увидеть на рисунке 1-3 ниже:

div{
  float: left;
  margin: 20px;
}
div:nth-child(1){
  width: 20px;
  height: 20px;
  border: 20px solid;
  border-color: blue red orange green;
}
div:nth-child(2){
  width: 20px;
  height: 20px;
  border: 20px solid;
  border-color: blue transparent transparent transparent;
}
div:nth-child(3){
  border: 20px solid;
  border-color: blue transparent transparent transparent;
}
div:nth-child(4){
  border-style: solid;
  border-width: 40px 20px;
  border-color: blue transparent transparent transparent;
}
div:nth-child(5){
  border-style: solid;
  border-width: 40px 20px;
  border-color: blue red transparent transparent;
}

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

хороший другline-heightа такжеvertical-align

line-heightа такжеvertical-alignЭто два свойства, управляющие вертикальным выравниванием элементов, и их также труднее всего понять.

роль буквы х

Базовая линия — наиболее важная концепция вертикального выравнивания встроенных элементов.line-heightОпределение - это расстояние между двумя базовыми линиями,vertical-alignЗначение по умолчанию — базовый уровень. Базовая линия определяется как нижний край буквы x.

В css есть понятиеx-height, который относится к высоте строчной буквы x.vertical-align: middleВыравнивание по базовой линии вверх на 1/2x-heightПод высотой можно понимать пересечение приблизительной буквы x.

кроме как в csspx/em/remПодождите, еще один блокex. Относится к высоте строчной буквы x, т.е.x-height. Это не очень полезно и больше не будет.

line-height

  • line-heightразличные значения атрибутов

normal: по умолчаниюnormalНа самом деле, это переменная значения типа, которое варьируется в зависимости от браузера и семейства шрифтов, обычно около 1.2.

Числовые значения и проценты: в конечном итоге будут рассчитываться как значение с единицами измерения, которое рассчитывается путем умножения на размер шрифта.font-size.

Значение длины: есть100pxЭто значение с единицами.

Характеристики наследования этих типов значений разные:line-heightДочерние элементы элемента, который является числовым значением, наследуют это числовое значение, а значение в процентах/длине наследует вычисленное значение с единицей измерения (px).

  • line-heightРоль:

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

Для элементов блочного уровняline-heightРешенныйполе строкиминимальная высота. Обратите внимание на минимальную высоту линейного блока, а не на фактическую высоту блочного элемента. (два на картинкеdivодинаковая высота,div.oneОбласть цвета фона – это высота поля строки, аdiv.twoФоновая область – это фактическая высота, а также высота строки иdiv.oneэто то же самое. )

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

  • line-heightСуть достижения вертикального центрирования: межстрочный интервал

Интерлиньяж — это расстояние между строкой текста и соседним текстом. межстрочный интервал =line-height—font-size. Межстрочный интервал имеет механизм равных делений вверх и вниз: это означает, что междустрочный интервал над и под текстом одинаковый, каждый с половиной, что такжеline-heightПричина вертикального центрирования встроенных элементов. На рисунке ниже верхнее и нижнее расстояния буквы х разделены пополам, что вместе поддерживаетdiv.

Единственная разница между картинкой ниже и картинкой выше в том, что их больше.display: inline-blockизspanэлемент, но здесьspanэлементы не действуютdivвысота элемента, но только наvertical-align: middleСвойство выравнивает свою центральную точку с пересечением буквы x для достижения вертикального центрирования.divВысота элемента точно такая же, как на изображении выше, поддерживается буквой x и межстрочным интервалом. В этот момент, если вы удалите букву x,divвысота не меняется, потому чтоspanПризрачные пустые узлы будут генерироваться перед рамкой строки элемента, а также могут поддерживаться призрачные пустые узлы + высота строки.div.

  • Функция большого значения для встроенных элементов
<div class="box">
  <span>asdf</span>
</div>

Стиль 1: Какова высота .box в этот момент?

.box {
  line-height: 100px;
  background: lightgreen;
}
.box span {
  line-height: 30px;
}

Стиль 2: Какова высота .box в этот момент?

.box {
  line-height: 30px;
  background: lightgreen;
}
.box span {
  line-height: 100px;
}

Давайте сначала поговорим о выводе: независимо от встроенного элементаline-heightКак установить высоту последнего родительского элемента с большим значениемline-heightрешенный.

В стиле 1,spanПеред строковым полем элемента есть призрачный пустой узел, а высота строки этого призрачного пустого узла составляет 100 пикселей; в стиле 2 высота строки призрачного пустого узла составляет 30 пикселей, но высота строки элемента span равна 100 пикселей. Эти два случая на самом деле одинаковы, просто возьмите большее значение.

vertical-align

  • vertical-alignстоимость имущества

Класс линии: напримерbaseline（默认值） top middle bottom(baselineвыравнивает базовую линию элемента с базовой линией родительского элемента,middleСделайте середину элемента выше базовой линии родительского элементаx-heightнаполовину выровнен.top bottomВыравнивает нижний край элемента и его потомков по нижнему краю всей строки или блока. )

Текстовый класс:text-top text-bottom(Выравнивает верхнюю часть элемента по верхней части родительского шрифта.)

Надстрочный индекс:sub super(Выравнивает базовую линию элемента с базовой линией нижнего индекса родительского элемента.)

Стоимость:20px 2em(По умолчаниюbaselineЭквивалентно числовому значению 0 . Выравнивает базовую линию элемента по заданной длине над базовой линией родительского элемента. Положительное значение смещает базовую линию вверх, а отрицательное значение — вниз. Это обеспечивает точное вертикальное выравнивание элементов. )

процент:20%(Выравнивает базовую линию элемента по заданному проценту выше базовой линии родителя, который является процентом свойства line-height.)

  • vertical-alignпредпосылка

Предпосылкой для работы свойства vertical-align должны быть встроенные элементы.которыйdisplayРассчитано какinline inline-block inline-table table-cellЭлементы. Итак, если элемент установленfloat: leftилиposition: absolute, то егоvertical-alignатрибут не может вступить в силу, потому что элементdisplayРассчитано какblock.

  • хороший другline-height,vertical-alignОтношения любви-ненависти со сторонним призрачным пустым узлом

Иногда вы столкнетесь со следующими ситуациями, когда высота и настройки несовместимы:

divФактическая высота строки выше установленной высоты строки, почему?

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

Базовая линия родительского элемента на самом деле является базовой линией призрачного пустого узла перед полем строки. Визуализируйте призрачные пустые узлы в виде буквxМожет быть проще понять:

из-заdivвысота строки30px, поэтому буквыxа такжеspanВысота элемента30px. но буква хfont-sizeменьше,spanэлементальfont-sizeбольше, а высота строки такая жеfont-sizeЧем больше базовая линия, тем ниже положение, поэтому две базовые линии не находятся на одной горизонтальной линии. Левая часть рисунка ниже:

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

  • display: inline-blockРазличия в базовых показателях

Сначала рассмотрим пример, на рисункеspanэлемент установленdisplay: inline-blockи ширина и высота, тем самым поддерживая родительский элементdivвысота, ноspanне сам по себеmarginсвойства, то почему дно иdivБудет ли зазор между нижними краями?адрес

это сказатьinline-blockразница. один установленdisplay: inline-blockЭлементы:

  1. Если внутри элемента нет встроенного элемента, базовая линия элемента является нижним краем элемента;
  2. Если элемент установленoverflowдляhidden auto scrollЗатем его базовый уровень - нижний край элемента;
  3. Если внутри элемента есть встроенный элемент, его базовая линия является базовой линией внутренних встроенных элементов последней строки.

Зная это, вернемся к примеру выше:

Оказалось, что это призрак стороннего пустого узла-призрака. В настоящее времяspanПеред полем строки также есть призрачный пустой узел. из-заspanЭлементы по умолчанию выравниваются по базовой линии, поэтомуspanБазовая линия элемента, то есть его нижний край, выравнивается с базовой линией фантомного пустого узла. В результате полустрочный интервал ниже базовой линии призрачного пустого узла увеличивается.divэлементы, вызывающие зазоры. Как показано ниже:

еслиspanКак насчет встроенных элементов в элементах?

Видно, что в это времяspanЗазор у нижнего края элемента исчез, т.к. в это времяspanБазовая линия элемента — это базовая линия последней строки встроенных элементов внутри.

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

  • Решать проблему

Генерация разрыва в основном вызвана несоосностью, вызванной выравниванием базовой линии, источникvertical-alignа такжеline-heightВызваны вместе, поэтому для решения этой проблемы вам нужно только прямо или косвенно преобразовать одно из двух свойств:

  1. Блокирует элементdisplay: blockСделатьvertical-alignотказ от имущества;
  2. попробуй разныеvertical-alignзначение, такое какbottom/middle/top;
  3. Изменить напрямуюline-heightстоимость;
  4. еслиline-heightкак относительное значение, например1.4,настраиватьfont-size: 0косвенное изменениеline-height.
  • всплывающее диалоговое окно

Ниже приведено использование, рекомендованное Чжан Синьсюй.vertical-alignРеализованная горизонтальная и вертикальная центровка всплывающего окна, если вы можете это понять, означает, что вы полностью освоили отношения между хорошими друзьями и третьими лицами.

<div class="container">
  <div class="dialog">自适应弹出层</div>
</div>
<style>
.container{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, .15);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}
.container:after{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.dialog{
  display: inline-block;
  width: 400px;
  height: 400px;
  vertical-align: middle;
  text-align: left;
  font-size: 14px;
  white-space: normal;
  background: white;
}
</style>

разрушение потока

Теперь, когда UI-фреймворки процветают, наш CSS пишется все меньше и меньше. Это хорошо для многих ветеранов, но не обязательно для новичков, которые плохо знакомы с интерфейсом. Поскольку меньше письменности, меньше возможностей попрактиковаться и обобщить, а понимание многих стилей не является полным. представлено в этой главеfloat,positionа такжеBFCЭто очень важно для макета страницы на передней части. Я надеюсь, что вы успокоитесь и внимательно изучите его.

floatсвойства свойств

floatАтрибуты должны быть самым удивительным атрибутом в мире CSS не из-за его производительности, а потому, что его первоначальный дизайн был предназначен только для достижения эффекта «обтекания текстом изображений». просто такfloatНекоторые характеристики атрибута привели к его повсеместному использованию, что привело к появлению многих страниц, не подходящих для обслуживания. Посмотрите нижеfloatСвойства недвижимости:

  1. Обертывание: то есть элемент в это времяwidthбудет, какheightТо же самое определяется дочерним элементом вместо заполнения родительского элемента по умолчанию.
  2. Блокировать и форматировать контекст. Это функция BFC, о которой мы поговорим позже. Блочный относится к настройкам элементаfloat: leftПосле этого егоdisplayРасчетное значение становитсяblock. Контекст форматирования означает, что будет создан BFC, который будет обсуждаться позже.
  3. не любойmarginсливаться;
  4. Вне документооборота:floatПервоначальный замысел дизайна заключается в эффекте "обтекания текстом". Чтобы текст обтекал изображение, необходимо выполнить два условия. Во-первых, высота элемента уменьшается, а во-вторых, линейный блок не может перекрывать плавающий элемент. Уменьшение высоты элемента приводит к тому, что неплавающие блочные элементы позади элемента перекрываются с ним, поэтому кажется, что он выпадает из потока документа.

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

clearРоль и недостатки

каждый знаетclear: bothВы можете очистить float от предыдущего плавающего элемента, но на самом деле это не очищает float.

clearОпределение таково: край блока элемента не может быть смежным с предыдущим плавающим элементом. То есть, хотя высота плавающего элемента схлопывается, она устанавливаетсяclear: both, но обрабатывает его высоту так, как будто он все еще занимает позицию.

clearРаботает только с элементами блочного уровня и не решает проблему переноса текста, которая может возникнуть в последующих элементах.

BFC: контекст форматирования на уровне блоков

  • концепция

BFC — это независимая область рендеринга, толькоBlock-level boxучастие, предусматривающее внутреннееBlock-level BoxТо, как он выложен и не имеет ничего общего с внешней стороной этой области. BFC похож на чары, вещи внутри чар не могут влиять на макет снаружи, то есть,Подэлементы BFC не будут влиять на внешние элементы.так:

  1. Самого BFC не бываетmarginперекрытие.
  2. BFC может полностью решить проблемы коллапса высоты и переноса текста, вызванные плавающими подэлементами.
  • Как создать БФЦ
  1. корневой элемент html
  2. Плавающий элемент, float не равно none
  3. Абсолютно позиционированные элементы, абсолютные и фиксированные
  4. Дисплей не является блочным блоком (inline-block, table-cell, table-caption)
  5. Элементы, значение переполнения которых не видно (скрытые, авто, прокрутка)
  6. Элементы с отображением flex, grid и flow-root (flow-root — это значение свойства, специально задающее BFC)

BFC содержит все дочерние элементы, которые создали этот элемент контекста, но не внутренние элементы, которые создали дочерний элемент нового BFC.

  • характеристика
  1. Внутренние блоки будут располагаться один за другим в вертикальном направлении (можно рассматривать как обычный поток в BFC);
  2. Расстояние по вертикали от ящика определяется выражениемmarginПринимать решение. двух соседних ящиков, принадлежащих одному и тому же BFCmargin
  6. float box

<html>div p

<html>marginmargindisplay: inline-block float: leftoverflow: hidden

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

margin boxborder box

position: absolutepositoinstatic

left edgeleft-borderleft edgecontent boxposition: relative float: leftpadding boxposition: absolute position: fixed

asidemargin boxfloat boxmainbody

margin-top: -10000px float: left

main

position: absolute

margin

positionstatic

white-space: nowrap

left/topposition: absolute

position: absolutedisplaypositionposition

left/top

  • overflow: hidden

overflow: hidden

<div style="overflow: hidden;">
  <img src="big.jpg" style="position: absolute;">
</div>
<div style="position: relative;">
  <div style="overflow: hidden;">
    <img src="big.jpg" style="position: absolute;">
  </div>    
</div>


<div style="overflow: hidden; position: relative;">
  <img src="big.jpg" style="position: absolute;">
</div>
<div style="overflow: hidden;">
  <div style="position: relative;">
    <img src="big.jpg" style="position: absolute;">
  </div>    
</div>
  • position: absolute

left/righttop/bottomwidth/heightdivwidthmarginauto

margin: automargin

position: fixed

position: fixedposition: relative

position: fixedtransformnone

position: sticky

#one { position: sticky; top: 10px; }

position: stickyoverflowvisibleposition: sticky

position: sticky

positionrelative/aboslute/fixedz-indexauto

  1. border/backgroundz-index

.dadposition: relativez-index: autoz-index: -1.son

.momz-index: 0.sonz-index: -1

  1. z-indexautospan

  1. opacity1
  2. transformnone
  3. filternone
  4. -webkit-overflow-scrolling: touch
  5. z-indexauto
  6. isolationisolate
  7. mix-blend-modenormal
  8. will-changeopacity/transform/filter/isolation/mix-blend-mode

z-indexz-index: auto

display: flexz-indexz-indexz-index: 0

::first-letter

::first-letter

text-transform

  input {
    text-transform: uppercase;
  }

word-spacing

word-spacing20px20px

<p>我有空 格，我该死......</p>
<style>
  p {
    word-spacing: 20px;
  }
</style>

white-space

html

text-align: justify

text-align: justify

text-align: justifyivertical-alignline-heightioutline

ispani

i

i

i

vertical-align: topvertical-align: middlemiddlee-height

vertical-alignline-height

  1. display: none
  2. visibility: hidden
  3. transition 
div{
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s linear;
  background: cyan;
}
div.active{
  visibility: visible;
  opacity: 1;
}

visibility: hiddendisplay: nonedisplay: nonetransitiondisplay: noneanimation

  1. opacity: 0
  2. opacity: 0; position: absolute;
  3. position: relative; z-index: -1;
  4. position: absolute ; z-index: -1;

display: nonevisibility: hidden

  1. display: nonevisibility: hidden
  2. display: nonetransitionvisibility: hidden
  3. display: nonevisibility: hidden
  4. display: nonevisibility: hiddenvisibility: visiblevisibility: hiddenhiddenvisibility: visible

display: flexdisplay: inline-flexfloat、clear、vertical-align

.containeri

  • css权重和超越!important
  • 弹性布局实现两端对齐尾行左对齐
  • text-align: justify
  • 固定定位 position: fixed
  • 粘性定位 position: sticky
  • 默认最大宽度为包含块的宽度
  • BFC的创建方法
Категории