CSS на самом деле намного сложнее, чем мы думаем, любая его часть может быть использована для написания длинной статьи, и вы часто можете увидеть небольшое количество знаний. Таким образом, CSS не ограничивается только своим названием «Каскадные таблицы стилей», а больше похож на мир, важный и важный компонент веб-страницы.
Применительно к вышеописанной системе CSS приведенная выше диаграмма, конечно, может быть недостаточно полной, но она также может иллюстрировать основные компоненты CSS. Кратко расскажем о некоторых неизвестных «скрытых атрибутах», сначала оставим общее впечатление и расширим нашу систему изучения CSS, а потом уже можно потихоньку углубляться в них.
Эта статья также является комбинацией статей «Мир CSS», «Авторитетное руководство по CSS» и «Демистификация CSS» и обобщает некоторые вещи, которые я обычно игнорирую или вообще не понимаю.
Эта статья также является частью построения системы знаний переднего плана.Подробности см.github
макет текста
Первый пришел первым, утверждение простое,font-familyОбъявление выполнено, но иногда мы можем увидеть такое объявление:
h1 {
font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;
}
Что на самом деле означает такая большая строка, если вы это знаетеfont-faimlyМожно понять, что атрибут содержит два типа значений, одно — имя шрифта, а другое — семейство шрифтов. Как следует из названия, семейство шрифтов — это классификация всех шрифтов.В мире CSS обычно существуют следующие семейства шрифтов:
- Шрифт с засечками. Это означает, что в начале и в конце штриха есть дополнительные украшения, а толщина штриха разная.
- Шрифт без засечек. Орнамента нет, мазки одинаковой толщины.
- Моноширинный шрифт. Все глифы одинаковой ширины.
- Курсивный шрифт. Шрифты, имитирующие человеческий почерк.
- Фэнтезийный шрифт. Других шрифтов, подпадающих под четыре вышеуказанные категории, нет.
Итак, что-то вроде приведенного выше утвержденияsans-serif,HelveticaОтносится к семейству шрифтов, первый — шрифт с засечками, второй — шрифт без засечек. Тогда смысл этого очень ясен.Если в системе есть предыдущий шрифт, то используйте предыдущий шрифт.Если нет, попробуйте использовать следующий шрифт с засечками.Если нет, то продолжайте искать доступные шрифты в следующем заявлении. .
наследовать
Свойства общего текстового класса могут быть унаследованы, напримерcolor,font-size,font-familyЖдать.
Он соответствует некоторым свойствам, которые не могут быть унаследованы, напримерborder,padding,margin,backgroundЖдать. На самом деле, также легко понять, почему эти свойства нельзя наследовать, потому что, как только эти свойства могут быть унаследованы, это повлияет на весь макет, например, мы добавляем рамку к родительскому элементу, но его дочерние элементы и элементы-потомки наследовать границу, то необходимость писать больше кода для устранения эффектов наследования — это определенно не то, для чего был разработан CSS.
line-height
Первое, что должно быть ясно, это то, чтоline-heightОн действует на встроенные элементы или встроенные элементы уровня блока Мы объявляем блок уровня блока.line-heightНа самом деле он действует на содержимое блока на уровне блока, поэтому вы можете часто видеть, как он используется следующим образом:
div {
line-height: 100px;
font-size: 20px;
}
Итак, я увидел этот эффект:
Может быть, подсознательноline-heightОн работает на блоках блочного уровня. На самом деле он действует на текст в блочном блоке.Если вы уберете текст в div, то увидите, что его высота не 100px, а текст тоже встроенный элемент, который должен быть четким.
Кроме того,line-heightЗначение может быть числом, процентом и значением длины. Значение длины также включает, например,emтакие относительные единицы. Когда значение не является конкретным значением длины, то есть числовым значением или процентным значением, относительный расчет является егоfont-sizeсобственность, еслиfont-sizeценность16px,ноline-height: 1.5Значение16 * 1.5,то есть24px, процентное значение также рассчитывается таким же образом, но следует отметить, что при наследовании процентного значения оно будет относительно текущего.font-sizeдля вычисления, то есть, если родительский и дочерний элементыfont-sizeразные значения, тоline-heightРасчетные значения также отличаются. Если есть числовое значение, такой проблемы нет, и оно всегда рассчитывается относительно числового значения.
Кроме того, вы часто видите это использование для вертикального центрирования текста:
div {
line-height: 100px;
height: 100px;
}
На самом деле просто нужноline-heightМожно добиться вертикального центрирования, которое не имеет никакого отношения к высоте снизу, и почему с этой настройкой возможно вертикальное центрирование? это чтобы увидетьline-heightКак работают установленные свойства. Еще посмотрите на картинку выше, при настройкеline-height, высота div устанавливается равной100px, но значение присваивается так, с100px - 1emПолученное значение делится на две части, которые соответственно добавляются к верхней и нижней частям шрифта, так что шрифт поровну делится на верхнюю и нижнюю области, образуя ситуацию вертикального центрирования,1emэто размер шрифта. Конечно, на самом деле это приблизительная вертикаль, потому что разные шрифты на самом деле занимают1emРазмер разный, поэтому при выделении высоты верхнего и нижнего рядов будут отклонения, кроме того, на эту ситуацию повлияет одно из свойств, указанных ниже.
Стойка (столб)
Это невидимо в CSS, но это повсеместно, и некоторые книги относятся к нему как узел пробела. Он является позвоночником, который лежит в основе существования встроенного текста. Вы можете увидеть его таким образом:
.line1 {
line-height: 0;
border: 1px solid red;
font-size: 20px;
}
Согласно тому, что было известно выше оline-heightЗнание , когда он установлен в 0, высота текстовой строки равна 0, то внешний содержащий блок, то есть родительский элемент, должен быть теоретически 0, но мы обнаружили, что высота здесь равна 2, на самом деле это существование так называемого столба. Он существует перед каждым встроенным полем, сначала запомните его, он будет использоваться позже.
vertical-align
vertical-alignМолча «много заплатили» за кадром, давайте посмотрим 🌰:
<div class="line3">
<img src="../../../assets/css_mindgraphy.png" width="100">
</div>
Итак, мы обнаружили, что под картинкой есть небольшой зазор в ответ на эту ситуацию,vertical-alignВы можете играть, покаvertical-alignУстановка значения позиции, отличного от значения по умолчанию, в порядке.
.line3 > img {
vertical-align: top;
}
Вы можете видеть, что зазор под картинкой исчез, конечно, в дополнение к использованиюvertical-alignКстати, вы также можете установитьline-height: 0,font-size: 0может решить эту проблему. Причина в том, что вышеstrut, изображение является встроенным элементом, поэтому оно также имеет невидимый текстовый узел, который эквивалентен этому
О~ Таким образом, вы знаете, что высота строки по умолчанию должна играть роль, между прочим, иvertical-align, так как его значение по умолчанию равноbaselineТо есть выравнивание по базовой линии, видно, что низ картинки можно выровнять по низу текста, тогда при установкеvertical-align: top,line-height: 0илиfont-size: 0, первое эквивалентно изменению выравнивания по базовой линии на выравнивание по верхнему краю, и, естественно, внизу не будет пробелов, последние два удаляют высоту строки, а размер текста скрывается, поэтому естественных пробелов не существует.
Кроме того, у нас есть еще один способ решить эту проблему, который заключается в непосредственном изменении изображения.displayзначение, установите его как элемент блочного уровня, то упомянутая выше стойка пустого узла, естественно, не будет существовать, и эту проблему также можно решить. Но здесь изменилосьdisplayЗначение может повлиять на макет, поэтому рекомендуется использовать вышеуказанные методы.
vertical-alignВ дополнение к установке значения позиции, то есть в дополнение кtop,middle,bottomДля этих ключевых слов вы также можете установить определенные значения, проценты или отрицательные значения.Минус-значения фактически смещают указанное значение вниз, а проценты являются относительными.line-heightустановка значения.
Глобальные ключевые слова для CSS
Ключевое слово global — это значение атрибута, которое могут использовать все атрибуты, всего их три.inherit,initial,unset. Эти ключевые слова появились только в CSS3 и не поддерживались до IE11 и Opera Mini.
Inherit нарушает вышеуказанные ограничения наследования.Пока значение атрибута установлено на наследование, этот атрибут может быть унаследован от родительского элемента.
Initial заключается в установке атрибута в начальное значение, в основном для тех атрибутов, которые не имеют предопределенного начального значения, таких как атрибут цвета, значение по умолчанию зависит от пользовательского агента, то есть значение цвета, установленное пользователем, и установка его на начальный изменит цвет шрифта на черный.
unset является альтернативой первым двум ключевым словам, то есть для унаследованных свойств unset означает наследование, а для неунаследованных свойств означает начальное.
Существует также специальный атрибут all, который поддерживает только эти три ключевых слова. all означает все свойства, кроме direction и unicode-bidi. Следовательно, если установлено значение all: inherit, это означает, что, за исключением двух вышеуказанных свойств, все остальные свойства CSS наследуются от его родительского элемента.
селектор
Селектор здесь — это так называемый селектор. Существует много типов селекторов, но большинство из них перечислены выше.Кроме того, есть некоторые распространенные селекторы, которые можно игнорировать:
* {
box-sizing: border-box;
}
Это кажется очень простым, но неправильное использование может привести к неожиданным результатам. Домашняя страница заключается в том, что он будет добавлять соответствующие атрибуты ко всем элементам, даже если этот элемент вообще не использует этот атрибут, что вызовет определенную потерю производительности, и еще один момент, который очень легко игнорировать, это его приоритет, Это также то, что мы называем специфичностью. Специфика общего селектора равна 0. В сочетании с указанным выше наследованием наследование не имеет специфичности. Поэтому, если вы используете общий селектор, то ожидайте, что элемент получит родительский элемент через наследование. , но найдет что это не работает. Приходите посмотреть 🌰
* {
color: green;
}
div#page {
color: black;
}
<div id="page">
我是CSS世界的小<em>菜鸡</em>
</div>
Очевидно, финал菜鸡зеленый. Так что это также очень сбивает с толку, поэтому рекомендуется не злоупотреблять этим.
коробочная модель
коробка блочного уровня
Мы все знаем такие термины, как BFC и IFC, а также их определения.Например, BFC — это контекст форматирования на уровне блока, который представляет область, определяемую блоком на уровне блока, имеет свои собственные правила рендеринга, и блоки будут не влияют друг на друга. Однако может быть неясно, какие правила рендеринга включены и как рендерить, и здесь это легко проигнорировать.
Прежде чем говорить об этих правилах рендеринга, давайте сначала поговорим о некоторых концепциях.Только поняв эти концепции, мы сможем лучше понять блочную модель.
- Блок уровня блока, блок, созданный элементами уровня блока, такими как div, является блоком уровня блока.
- Встроенный блок, по той же причине, блок, созданный встроенными элементами, такими как span, является встроенным блоком.
- Встроенные блоки блочного уровня, т.е.
display: inline-blockПоле, сгенерированное встроенным элементом уровня блока, является полем встроенного уровня блока. - Быстрое размещение — это родительский фрейм, содержащий текущий элемент.Проще говоря, аккомодационный блок блочного элемента — это блочный фрейм, а аккомодационный блок встроенного элемента — это встроенный фрейм, и, конечно, он также может быть кадром блочного уровня.
Контексты форматирования, такие как BFC и IFC, определяются в блоке размещения. Начнем с горизонтальной раскладки, смотрите ниже 🌰
.line8 > .child1 {
width: auto;
margin-left: 50px;
margin-right: 20px;
}
.line8 > .child2 {
width: 300px;
margin-left: auto;
margin-right: 150px;
}
.line8 > .child3 {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.line8 > .child4 {
width: 300px;
margin-left: auto;
margin-right: -200px;
}
<div class="line8">
<span class="child1">CSS世界p元素1</span>
<span class="child1">CSS世界p元素1</span>
</div>
<div class="line8">
<p class="child2">CSS世界p元素2</p>
</div>
<div class="line8">
<p class="child3">CSS世界p元素3</p>
</div>
<div class="line8">
<p class="child4">CSS世界p元素3</p>
</div>
Полученный результат выглядит следующим образом:
Отсюда нетрудно увидеть:
- В альбомной верстке поля не схлопываются
- содержит
autoзначение, установленная ширина вычитается из ширины всего содержащего блока, а оставшаяся ширина выделяется набору дляauto, поскольку поле может быть отрицательным, приведенные выше правила также применяются к отрицательным значениям.Вы можете видеть, что четвертый элемент div относится к случаю отрицательных полей. - Содержит два
autoзначение, то есть оставшееся расстояние делится на две равные части, каждаяautoЗначение равно половине, что мы обычно и используемmargin: 0 auto;Принцип центрирования тот же.
Если вам нужно обратить внимание, вот некоторые свойства блоков на уровне блока, такие как поля, отступы, границы, контуры и т. д., за исключением того, что для поля можно установить отрицательное значение. значение, браузер проигнорирует все правила box.ru иautoЗначение может быть установлено только свойствами ширины, высоты, поля и контура, другими настройкамиautoЗначения недействительны и будут игнорироваться браузером.
Кроме того, вертикальная компоновка приведет к складыванию полей, а правило складываниявзять большее значение, то есть для двух вертикальных элементов макета,margin-bottomа такжеmargin-topЕсли есть перекрытие, то чье значение больше, то значение того, у которого больше значение, будет принято за значение сложенного внешнего поля. еслиmarginЕсли это отрицательное значение, большее абсолютное значение будет взято в качестве сложенного поля, как показано ниже:
.line8 > .child5 {
margin-bottom: 10px;
}
.line8 > .child6 {
margin-top: -50px;
}
встроенный блок
Встроенные элементы разделены на два, один из которых является незамещающим элементом, а другой — замещающим элементом. Эти два элемента также отличаются по расположению.
Старые правила, давайте сначала поговорим о некоторых понятиях:
- Анонимный текст — это текст, не содержащий тегов, например, в предыдущем примере мы добавили перед ним элемент span.
x-heightТакие тексты являются анонимными текстами. - Поле шрифта, как следует из названия,
font-sizeПоле, занятое шрифтом, определяемым свойством - межстрочный интервал, т.
line-heightЗначение параметра минусfont-sizeЗначением является высота строки, разделенная на 2 выделения и верхний и нижний концы шрифта, это половина межстрочного интервала. - Встроенное поле – это межстрочный интервал плюс область содержимого, которая представляет собой площадь текста шрифта. Для встроенных незамещающих элементов это
line-heightНабор значений для замещающего элемента является его областью содержимого. - Линейный блок, расстояние между самой высокой точкой всех встроенных блоков в строке и самой нижней точкой встроенных блоков в ряду.
Ниже его схема
- незаменяемый элемент
Объединив вышеуказанные понятия, давайте посмотрим 🌰
.line10 {
border: 1px solid red;
}
.line10 > p {
font-size: 12px;
line-height: 12px;
}
.line10 > p::first-line {
border: 1px solid #ccc;
background: #f2f2f2;
}
.line10 > p > strong {
font-size: 24px;
}
Получите следующий дисплей:
Видно, что жирный текст явно выходит за пределы области содержимого. Тем не менее, текст по-прежнему выровнен по умолчанию. Давайте изменим выделенный текст и добавим некоторые стили:
.line10 > p > em {
padding: 20px;
}
.line10 > p > em {
border: 20px solid blue;
}
.line10 > p > em {
margin: 20px;
}
1-пиксельная синяя рамка здесь предназначена для того, чтобы видеть диапазон, занимаемый выделенным текстом.Сравнивая эти результаты, мы можем видеть, что для встроенных элементов, будь тоpadding,border,ещеmarginЭто никак не влияет на линейный блок, то есть расстояние по вертикали остается прежним, но слева и справа от текста по-прежнему будет создаваться интервал.负marginНапример, размер линейного блока остается прежним, но левый и правый перекрываются.
Итак, поскольку эти атрибуты, из которых состоит блочная модель, не влияют на вертикальную компоновку строчных элементов, какие атрибуты влияют на размер линейного бокса? Попробуйте этот атрибут:
.line10 > p > strong {
font-size: 24px;
vertical-align: 4px;
}
Вы можете видеть, что высота строки больше, чем раньше4px, Который означает, чтоvertical-alignВлияет на вертикальную компоновку. Я сказал в предыдущей части,vertical-alignрасчет будетline-heightаффект, а для перестановочных элементов, упомянутых ниже,line-heightЭто область содержимого замещающего элемента, поэтому мы знаем, что эти два атрибута являются основными, влияющими на вертикальное расположение встроенных элементов.
- элемент перестановки
Компоновка сменного элемента другая, давайте посмотрим 🌰
.line11 {
font-size: 15px;
line-height: 18px;
border: 1px solid red;
}
.line11 > img {
height: 30px;
/* margin: 20px; */
/* border: 0; */
/* padding: 0; */
}
Отображаемый результат на самом деле такой же, как и в приведенном выше примере с зазором изображения. Теперь давайте посмотрим, как это влияет на макет. Если вы попробуете три свойства, аннотированные выше, вы обнаружите, что все они будут влиять на высоту встроенный блок Это совершенно другое поведение от незаменяемых элементов. Я не буду приводить здесь конкретные результаты, вы можете попробовать сами.
- Встроенные элементы блочного уровня
Встроенные элементы блочного уровня размещены здесь, потому что встроенные блочные элементы можно рассматривать как замещающие элементы, поэтому их эффекты компоновки одинаковы, а свойства блочной модели будут влиять на верх, низ, лево и право, поэтому не буду вдаваться в подробности.
Каскадные правила
Все, что мы знаем об иерархии элементов, это использованиеz-indexАтрибуты для установки, чем больше значение атрибута представляет, тем выше уровень, другими словами, тем ближе к нам. но не установкаz-indexбудет эффективным, и часто оказывается, что независимо от того,z-indexНезависимо от того, насколько он велик, он не работает, чем я и хочу поделиться здесь.
Как только мы устанавливаем уровень для элемента, первая предпосылка, которая вступает в силу, заключается в том, что элемент должен быть дополнением кstaticДругие элементы позиционирования, отличные от позиционирования, легко понять, потому что, если это обычное позиционирование, обычно нет перекрытия и, естественно, нет так называемой иерархической проблемы. Если перекрытие создается с использованием отрицательных полей,z-indexне работает, если не установленоstaticпозиционирование.
Кроме того, после установки уровня появится层叠上下文Его можно рассматривать как генерирование независимого пространства, и как бы ни были установлены внутренние подэлементы, они не могут избавиться от ограничения родительского каскадирования. То есть теперь предположим, что есть два элемента, az-indexравно 100, другое равно 99, оба элемента содержат подэлементы, то независимо от того, насколько велики заданы подэлементы этих двух элементовz-indexНи один из них не может переопределить другой родственный элемент. Это может быть недостаточно интуитивным, чтобы сказать, давайте посмотрим 🌰:
.father1 {
position: relative;
z-index: 100;
border: 1px solid red;
width: 100px;
height: 100px;
background: #fff;
}
.father2 {
position: relative;
z-index: 99;
border: 1px solid blue;
width: 100px;
height: 100px;
background: #fff;
}
.father1>div {
position: absolute;
z-index: 2000;
border: 1px solid green;
}
.father2>div {
position: absolute;
top: -20px;
z-index: 3000;
border: 1px solid black;
}
<div class="father1">
<div>
我是子元素2
</div>
</div>
<div class="father2">
<div>
我是子元素2
</div>
</div>
Если здесь убрать белый фон, то можно увидеть следующие подэлементы, что также подтверждает смысл контекста наложения.
конец
Чем больше вы узнаете о CSS, тем больше вы обнаружите, что то, что вы знаете, это мех. Мы можем увидеть много очень интересных и практичных эффектов макета CSS в Интернете, но этого недостаточно запомнить, как написать код без Понимание принципа. Я до сих пор не могу написать это в следующий раз. Конечно, для любого кодирования принципы чрезвычайно важны. В этой статье еще много интересных вещей. После окончания отделки я буду обновлять эту статью одну на одну.