Базовые дополнения CSS на 15 000 слов (основные знания, общие требования)

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

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

Небольшой совет: последующий контент будет более захватывающим.

Основные концепции и точки знаний

грамматика

Основная функция CSS заключается в установке определенных значений свойств CSS. Пара ключ-значение атрибут-значение называетсяутверждение(декларация).

color: red;

тогда как если одно или несколько объявлений используются с{}После обертывания он образуетблок объявлений(блок объявлений).

{
    color: red;
    text-align: center;
}

Если блок объявления должен воздействовать на соответствующий элемент HTML, его также необходимо добавить.Селектор. Селекторы и блоки объявления составляютНабор правил CSS(набор правил CSS), часто сокращенно называемый правилами CSS.

span {
    color: red;
    text-align: center;
}

Точка с запятой может быть опущена в последнем объявлении в наборе правил, но это не рекомендуется из-за подверженности ошибкам.

в CSSПримечания:

/* 单行注释 */

/*
    多行
    注释
*/

В файлах CSS, в дополнение к комментариям, наборам CSS и @Rules, некоторые другие определенные вещи будут игнорироваться браузером.

@правило

Правила CSS — это основная часть таблицы стилей, которая обычно включает большой список правил. Но иногда также необходимо включить в таблицу стилей другую информацию, такую ​​как набор символов, импорт других внешних таблиц стилей, шрифтов и т. д. Для этого требуются специальные операторы.

И @rule является таким утверждением. CSS содержит следующие @rules:

• @namespaceСообщает обработчику CSS, что необходимо учитывать пространство имен XML.
• @media, если условия медиа-запроса соблюдены, вступают в силу правила в группе условных правил.
• @page, описывающий изменения макета при печати документа.
• @font-face, описывающий внешний шрифт, который будет загружен.
• @keyframes, описывающий ключевые кадры для анимации CSS.
• @document, если таблица стилей документа удовлетворяет заданным условиям, вступают в силу правила в группе условных правил. (Отложено до спецификации CSS уровня 4)

В дополнение к вышеперечисленному, ниже будут введены еще несколько рывковых @ правил.

@charset

@charsetИспользуется для определения набора символов, используемого таблицей стилей. Он должен быть первым элементом в таблице стилей. Если есть несколько@charsetобъявлен, будет использоваться только первый, а не в HTML-элементах или HTML-страницах.<style>используется внутри элемента.

Примечание. Значения должны быть заключены в двойные кавычки, а

@charset "UTF-8";

Обычно я пишу файлы стилей без написания правил @charset, так какая кодировка символов используется в этом файле CSS?

Какая кодировка символов используется в файле таблицы стилей, браузер имеет набор порядка распознавания (приоритет от высокого к низкому):

• начало файлаByte order markСимвольное значение, но общий редактор не видит значение спецификации в заголовке файла;

• в заголовке ответа HTTPcontent-typeполе содержитcharsetуказанное значение, например:

  Content-Type: text/css; charset=utf-8
  

• Кодировка символов, указанная в правиле @charset, указанном в заголовке файла CSS;

• <link>Атрибут charset в теге, упраздненный в HTML5;

• По умолчаниюUTF-8.

@import

@importИспользуется, чтобы указать движку CSS импортировать внешнюю таблицу стилей.

И ссылка, и @import могут импортировать файл стиля, в чем между ними разница?

• ссылка — это тег HTML, помимо импорта CSS, он также может импортировать другие ресурсы, такие как изображения, скрипты и шрифты, а @import — это синтаксис CSS, который можно использовать только для импорта CSS;
• Стили, импортированные по ссылке, будут загружены одновременно с загрузкой страницы, а стили, импортированные с помощью @import, необходимо загрузить после загрузки страницы;
• у ссылки нет проблем с совместимостью, @import не совместим с ie5 и ниже;
• link может динамически импортировать таблицы стилей для изменения стилей, манипулируя DOM через JS, а @import не может.

@supports

@supportsОн используется для запроса того, допустим ли конкретный CSS, и может сочетаться с операторами not, and и or для последующих операций.

/* 如果支持自定义属性，则把 body 颜色设置为变量 varName 指定的颜色 */
@supports (--foo: green) {
    body {
        color: var(--varName);
    }
}

каскадный

Каскадные таблицы стилей, как тут понимать каскадирование? На самом деле это одна из основных функций CSS, алгоритм объединения значений свойств из нескольких источников. Например, когда есть много объявлений CSS, которые можно использовать для определенного тега HTML, кто должен работать в конце? Каскадирование об этом.

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

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

При понимании каскадирования его необходимо понимать в сочетании с приоритетом и наследованием селекторов CSS. Например, для того же селектора объявление, определенное позже, переопределит предыдущее; стиль, определенный автором, будет иметь приоритет над стилем, унаследованным по умолчанию.

Селектор

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

базовый селектор

• Селектор тегов:h1
• Выбор класса:.checked
• Селектор ID:#picker
• Селектор подстановочных знаков:*

селектор атрибутов

• [attr]: элемент, определяющий атрибут;
• [attr=val]: элемент, атрибут которого равен указанному значению;
• [attr*=val]: элемент, атрибут которого содержит указанное значение;
• [attr^=val]: элементы, атрибуты которых начинаются с указанного значения;
• [attr$=val]: элементы, атрибуты которых заканчиваются указанным значением;
• [attr~=val]: элемент, атрибут которого содержит указанное значение (полное слово) (устарело);
• [attr|=val]: элементы, атрибуты которых начинаются с указанного значения (полное слово) (устарело);

Селектор комбинации

• Селектор соседнего брата:A + B
• Обычный родственный селектор:A ~ B
• Подмножество:A > B
• Сборники потомков:A B

псевдокласс

условный псевдокласс

• :lang(): сопоставление элементов страницы на основе языка элемента;
• :dir(): элемент, соответствующий направлению написания определенного текста;
• :has(): соответствует элементам, содержащим указанный элемент;
• :is(): соответствует элементам в указанном списке селекторов;
• :not(): используется для сопоставления элементов, которые не соответствуют набору селекторов;

поведенческий псевдокласс

• :active: элемент активируется мышью;
• :hover: элемент, над которым находится указатель мыши;
• ::selection: элемент, выбранный мышью;

Статус псевдокласса

• :target: элемент текущей точки привязки;
• :link: непосещенный элемент ссылки;
• :visited: элемент посещенной ссылки;
• :focus: элемент формы, сфокусированный на вводе;
• :required: введите необходимые элементы формы;
• :valid: введите допустимый элемент формы;
• :invalid: Ввести недопустимый элемент формы;
• :in-range: элементы формы в пределах входного диапазона;
• :out-of-range: элементы формы вне диапазона ввода;
• :checked: элемент формы, выбранный опцией;
• :optional: необязательный элемент формы option;
• :enabled: элемент формы с включенным событием;
• :disabled: элемент формы отключен событием;
• :read-only: элемент формы только для чтения;
• :read-write: читаемые и записываемые элементы формы;
• :blank: элемент формы с пустым вводом;
• :current(): просматриваемый элемент;
• :past(): просматриваемый элемент;
• :future(): непросмотренные элементы;

Структурный псевдокласс

• :root: корневой элемент документа;
• :empty: элемент без дочерних элементов;
• :first-letter: первая буква элемента;
• :first-line: первая строка элемента;
• :nth-child(n): элемент с указанным последовательным индексом в элементе;
• :nth-last-child(n): элемент с указанным обратным индексом в элементе;
• :first-child : первый элемент в элементе;
• :last-child: элемент, являющийся хвостом элемента;
• :only-child: родительский элемент имеет только элемент этого элемента;
• :nth-of-type(n) : метка, указывающая порядковый индекс в метке;
• :nth-last-of-type(n): метка, указывающая обратный индекс в метке;
• :first-of-type: этикетка, возглавляемая этикеткой;
• :last-of-type: метка является хвостовой меткой;
• :only-of-type: родительский элемент имеет только метку этой метки;

псевдоэлемент

• ::before: вставить содержимое перед элементом;
• ::after: вставить содержимое после элемента;

приоритет

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

• 10000: !важно;
• 01000: встроенные стили;
• 00100: селектор идентификатора;
• 00010: селектор класса, селектор псевдокласса, селектор атрибута;
• 00001: селектор элементов, селектор псевдоэлементов;
• 00000: селектор подстановочных знаков, селектор потомков, селектор братьев и сестер;

Вы можете видеть, что встроенные стили (стили, определенные атрибутом стиля в элементе) имеют приоритет над любыми селекторами; при добавлении значения атрибута!importantПриоритет может быть повышен до самого высокого уровня, потому что он имеет наивысший приоритет, поэтому его нужно использовать с осторожностью.Ниже приведены некоторые меры предосторожности при использовании:

• Обязательно используйте приоритет правил стиля для решения проблемы вместо !important;
• Используйте !important только на определенных страницах, которым необходимо переопределить общесайтовый или внешний CSS;
• Никогда не используйте !important в своем плагине;
• Никогда не используйте !important в коде CSS всего сайта;

наследование

Очень важной особенностью CSS является то, что дочерние элементы наследуют вычисленные значения соответствующих свойств родительского элемента. Например, цвет текста корневого элемента страницы html по умолчанию черный, и все остальные элементы на странице будут наследовать этот цвет.При объявлении следующего стиля текст H1 станет оранжевым.

body {
    color: orange;
}
h1 {
    color: inherit;
}

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

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

• Связанный со шрифтом:font-family,font-style,font-size,font-weightЖдать;
• Связанный текст:text-align,text-indent,text-decoration,text-shadow,letter-spacing,word-spacing,white-space,line-height,colorЖдать;
• Список связанных:list-style,list-style-image,list-style-type,list-style-positionЖдать;
• Другие свойства:visibility,cursorЖдать;

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

• inherit: Наследовать вычисленное значение соответствующего атрибута родительского элемента;
• initial: Примените значение по умолчанию для этого свойства, например, значение цвета по умолчанию равно#000;
• unset: если свойство наследуется по умолчанию,inheritэффект, в остальном то же самоеinitial;
• revert: эффект эквивалентенunset, плохая совместимость.

документооборот

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

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

Как выйти из документооборота?

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

• Использование float (поплавка) удалит элемент из потока документа и переместит его к левой/правой границе контейнера или рядом с другим плавающим элементом.Пространство, занимаемое плавающим элементом, будет заполнено другими элементами, а занимаемая область плавающий элемент не будет использоваться, будет перекрываться другими элементами;
• Используйте абсолютное позиционирование (position: absolute;) или фиксированное позиционирование (position: fixed;) также приведет к выпадению элемента из документооборота, а вакантное место будет автоматически заполнено последующими узлами.

коробочная модель

Любой элемент в CSS можно рассматривать как блок, а блок состоит из 4 частей: содержимого, заполнения, границы и поля.

Существует два типа блочных моделей: стандартная блочная модель и блочная модель IE, которые являются стандартами, разработанными W3C и IExplore.

Если вы установите следующие стили для элемента:

.box {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #eee;
    margin: 10px;
}

Стандартная модель блока считает: фактический размер блока = содержимое (установленная ширина/высота) + отступы + граница.

так.boxШирина содержимого элемента200px, а реальная ширинаwidth + padding-left + padding-right + border-left-width + border-right-width= 200 + 10 + 10 + 1 + 1 = 222.

Блочная модель IE думает: фактический размер блока = заданная ширина/высота = содержимое + отступы + граница

.boxФактическая ширина, занимаемая элементом, равна200px, а истинная ширина содержимогоwidth - padding-left - padding-right - border-left-width - border-right-width= 200 - 10 - 10 - 1 - 1 = 178.

Современные высокопроизводительные браузеры в основном используют стандартную блочную модель по умолчанию, а старые антиквариаты, такие как IE6, используют блочную модель IE по умолчанию.

Добавлено новое свойство в CSS3box-sizing, который позволяет разработчикам указать, какой стандарт использует коробка, имеет 2 значения:

• content-box: стандартная коробчатая модель;
• border-box: модель коробки IE;

визуальная модель форматирования

Модели визуального форматирования — это вычислительные правила, используемые для обработки и отображения документов на визуальных носителях. Все в CSS является блоком, а модель визуального форматирования предназначена просто для определения того, как эти блоки должны быть размещены на странице.Эта модель будет зависеть от многих факторов при расчете, таких как: размер блока, тип блока, схема позиционирования (плавающая или плавающая). позиционирование), одноуровневые или дочерние элементы и некоторые другие факторы.

Из приведенного выше рисунка видно, что модель визуального форматирования включает в себя много контента.Если вы заинтересованы в более глубоком исследовании, вы можете просмотреть этот документ W3C в сочетании с приведенным выше рисунком.Visual formatting model. Итак, вот краткое введение в типы коробок.

Тип блока определяется отображением, и после установки отображения для элемента он будет определять 2 типа отображения блока:

• Outer display type (внешнее отображение): определяет, как выложен сам элемент, то есть в каком контексте форматирования он участвует;
• внутренний тип отображения (internal display): по сути, это эквивалентно использованию элемента в качестве контейнера, указывающего, как выложены его внутренние подэлементы и в каком контексте форматирования участвовать;

outer display type

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

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

• Коробка уровня блока: дисплей - это блок, элемент списка, таблица, Flex, Grid, Root-root и т. Д.;
• Поле встроенного уровня: отображение встроенное, встроенное-блочное, встроенное-табличное и т. д.;

Все блоки блочного уровня участвуют в BFC и располагаются вертикально, в то время как все блоки встроенного уровня участвуют в IFC и располагаются горизонтально.

Кроме того, в чем более конкретная разница между блоком, встроенным и встроенным блоком?

block

• Занимает всю строку, по умолчанию наследует ширину родительского элемента, несколько элементов блока будут располагаться сверху вниз;
• Установка ширины/высоты вступит в силу;
• Установка отступов и полей вступит в силу;

inline

• Он не будет занимать полную строку, а ширина изменится с содержимым; несколько встроенных элементов будут отображаться в строке слева направо, и если линия не может отображаться, она автоматически обернет;
• Установка ширины/высоты не вступит в силу;
• Установка отступов и полей в вертикальном направлении не повлияет;

inline-block

• Это встроенный блочный элемент, который не занимает ни одной строки, его можно рассматривать как блочный элемент, который можно расположить слева и справа в строке;
• Установка ширины/высоты вступит в силу;
• Установка отступов и полей вступит в силу;

inner display type

Внутри элемент фактически используется как контейнер, в который помещается текст или другие дочерние элементы. Тип контейнерной коробки делится на 4 типа в зависимости от значения дисплея:

• блок-контейнер: создание БФК или МФК;
• гибкий контейнер: установить FFC;
• грид-контейнер: сборка GFC;
• рубиновый контейнер: мало контактов, нет знакомства.

Стоит отметить, что если замененный элемент (замещаемый элемент), такой как img, объявлен как блок, блок-контейнер не будет сгенерирован, потому что первоначальное намерение заменяющего элемента, такого как img, состоит в том, чтобы заменить содержимое изображением через src. , который вообще не рассматривается. Думайте об этом как о контейнере.

Ссылаться на:

• Принципы CSS — чего вы не знаете об отображении
• контекст форматирования

контекст форматирования

Контекст форматирования (Formatting Context) — это концепция в спецификации CSS2.1, которая примерно относится к области рендеринга на странице, которая указывает, как подэлементы внутри области рендеринга набираются и взаимодействуют.

Различные типы блоков имеют разные контексты форматирования, и существует примерно 4 категории:

• BFC (Block Formatting Context) контекст форматирования на уровне блоков;
• IFC (Inline Formatting Context) встроенный контекст форматирования;
• FFC (Flex Formatting Context) гибкий контекст форматирования;
• GFC (контекст форматирования сетки) контекст форматирования сетки;

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

BFC

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

Правила рендеринга BFC

• Внутренние коробки будут располагаться вертикально друг за другом;
• Вертикальное расстояние блока определяется полем, и поля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться;
• Левая сторона поля каждого элемента касается левой стороны границы содержащего блока (для форматирования слева направо, в противном случае наоборот), даже если присутствуют плавающие элементы;
• Площадь BFC не будет перекрываться с поплавковой коробкой;
• BFC — это изолированный и независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы. Наоборот.
• При расчете высоты БФК в расчете также участвуют плавающие элементы.

Как создать БФУ?

• корневой элемент: html
• Видимые элементы без переполнения: переполнение не видно
• установить float: свойство float не равно none
• Установить позиционирование: положение абсолютное или фиксированное
• Определить элементы неблочного уровня на уровне блока: display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

Сценарии применения BFC

1. Адаптивная двухколоночная верстка

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

<div class="layout">
    <div class="aside">aside</div>
    <div class="main">main</div>
</div>

.aside {
    float: left;
    width: 100px;
}
.main {
    <!-- 触发 BFC -->
    overflow: auto;
}

2. Очистить внутренний поплавок

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

.parent {
    overflow: hidden;
}

3, чтобы предотвратить комбинированный вертикальный край

Один из принципов рендеринга BFC: вертикальные поля под одним и тем же BFC будут объединены. Поэтому, если 2 элемента не находятся в одном BFC, вы можете предотвратить слияние вертикальных полей. Так как же сделать так, чтобы два смежных родственных элемента не находились в одном и том же BFC? Вы можете обернуть один из элементов и активировать BFC его обертывающего слоя, чтобы два элемента не находились в одном и том же BFC.

<div class="layout">
    <div class="a">a</div>
    <div class="contain-b">
        <div class="b">b</div>
    </div>
</div>

.demo3 .a,
.demo3 .b {
    border: 1px solid #999;
    margin: 10px;
}
.contain-b {
    overflow: hidden;
}

Для приведенных выше 3 примеров вы можете комбинировать этоПример приложения BFCЛучше смотреть с.

Ссылаться на:CSS принцип - контекст форматирования

IFC

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

Правила рендеринга IFC

• Дочерние элементы располагаются один за другим по горизонтали, а по вертикали они будут располагаться сверху контейнера вниз;
• Узлы не могут объявлять ширину и высоту, где поля и отступы действительны в горизонтальном направлении и недействительны в вертикальном направлении;
• Узлы выровнены по вертикали в разных формах;
• Прямоугольная область, которая полностью охватывает блоки на линии, называется линейным блоком линии. Ширина линейного блока определяется содержащим его блоком и поплавками внутри него;
• Линейная коробка в IFC, как правило, затянута слева и вправо, но элемент поплавка является предпочтительным.
• Строка IFC определяется высотой правила расчета высоты строки, множество строк в IFC с высотой могут быть разными;
• Когда общая ширина блоков встроенного уровня меньше ширины содержащего блока строки, их правила горизонтального рендеринга определяются значением свойства text-align;
• Когда встроенный блок превышает ширину родительского элемента, он разделяется на несколько блоков, которые распределяются по нескольким блокам строк. Если дочерний элемент не имеет принудительного переноса строк, встроенное поле не будет разделено и переполнит родительский элемент.

Можете ли вы проанализировать среду IFC следующего кода для приведенных выше правил рендеринга IFC?

<p>It can get <strong>very complicated</storng> once you start looking into it.</p>

Соответствующий приведенной выше серии HTML-анализа выглядит следующим образом:

• Тег p представляет собой блок-контейнер, внутри которого создается IFC;
• Поскольку нет способа отображать полный, сгенерирована линейная коробка; ширина линейной коробки унаследовала ширину P; высота определяется высотой линии внутренней коробки внутри;
• Он может получить: анонимный встроенный ящик;
• очень сложный: встроенный блок, созданный сильным тегом;
• как только вы начнете: анонимный встроенный блок;
• вглядываясь в него.: Анонимный встроенный блок.

Ссылаться на:Inline formatting contexts

Сценарии применения IFC

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

Поленитесь, я не буду делать демки и картинки.

контекст стека

Страница, отображаемая на экране дисплея компьютера, на самом деле представляет собой трехмерное пространство, горизонтальное направление — ось X, вертикальное направление — ось Y, а направление от экрана к глазам можно рассматривать как ось Z. Многие элементы HTML располагаются в определенном порядке по оси Z в соответствии с приоритетом их собственных определенных атрибутов, и именно это и хочет описать контекст наложения.

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

• Влияние z-индекса на порядок размещения элементов в контексте размещения заключается в том, что он должен соответствовать позиционированию;
• В дополнение к Z-индексу, порядок отображения элемента на оси Z также влияет на ламинированный уровень и ламинированный порядок;

Прежде чем рассматривать уровень наложения и порядок наложения, давайте сначала посмотрим, как создать контекст наложения. Конкретный элемент HTML или свойство CSS создает контекст наложения. MDN предоставляет такой список. Элементы, которые соответствуют любому из следующих условий, будут генерировать контекст стека Контекст:

• корневой элемент html-документа
• объявить элемент с position: absolute/relative и значением z-index, отличным от auto;
• Элементы, которые объявляют положение: фиксированное/липкое;
• Дочерний элемент гибкого контейнера, и значение z-index не является автоматическим;
• Дочерний элемент контейнера сетки, и значение z-index не является автоматическим;
• элементы, значение атрибута непрозрачности которых меньше 1;
• Значение атрибута Mix-Blend-Mode не является нормальным элементом;
• Элементы с любым из следующих атрибутов, кроме отсутствия:
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• Элементы, значением атрибута изоляции которых является isolate;
• Элементы со значением атрибута -webkit-overflow-scrolling касаются;
• Значение will-change устанавливает любой атрибут, который создает элемент контекста стека, когда атрибут имеет неначальное значение;
• Элементы, чьи значения свойства содержат, являются макетом, краской или составным значением одного из них (например, содержат: строгие, содержат: содержимое).

Каскадный уровень

Уровень наложения относится к верхнему и нижнему порядку узлов по оси Z в трехмерном пространстве. Делится на два случая:

• В том же контексте наложения он описывает верхний и нижний порядок элементов контекста наложения в контексте наложения по оси Z;
• Среди других обычных элементов он описывает и определяет порядок этих обычных элементов вверх и вниз по оси Z;

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

Каскадный порядок

Если в одном контексте наложения есть несколько элементов, каков порядок наложения между ними?

Чем дальше по списку, тем выше приоритет, тем проще пользователю увидеть визуальный эффект (без перезаписи другими элементами):

• Граница и фоновый контекст ламинированы
• дочерние узлы с z-индексом
• Ненайденные дочерние узлы на уровне блоков в стандартных потоках
• Плавающие непозиционированные дочерние узлы
• Встроенные ненайденные дочерние узлы в стандартном потоке
• z-index: дочерние узлы auto/0
• Детский узел Z-индекс> 0

Как сравнить каскадные уровни двух элементов?

• Сравнение двух элементов в одном и том же контексте наложения сравнивает их в порядке наложения, описанном на предыдущем рисунке.
• Если они не находятся в одном и том же контексте наложения, необходимо сравнить уровень контекста наложения, в котором находятся два элемента.
• Если оба элемента находятся в одном контексте наложения и порядок наложения одинаков, то чем дальше в определении HTML, тем выше уровень наложения.

Ссылаться на:Тщательно понимать контекст стека CSS, уровень стека, порядок стека, z-индекс

стоимость и единица измерения

Объявления CSS состоят из свойств и значений, и существует много типов значений:

• Числовое значение: значение длины, используемое для указания значения атрибутов, таких как ширина элемента, ширина границы, размер шрифта и т. д.;
• Процент: может использоваться для указания размера или длины, например, в зависимости от ширины родительского контейнера, высоты или размера шрифта по умолчанию;
• Цвет: используется для указания цвета фона, цвета и т. д.;
• Координатное положение: используйте левый верхний угол экрана в качестве начала координат, чтобы определить положение элемента, например, общее фоновое положение, верхние, правые, нижние и левые атрибуты;
• Функция: используется для указания градиента пути к ресурсу или фонового изображения, например url(), linear-gradient() и т. д.;

И некоторые значения должны иметь единицы измерения, такие как ширина: 100px, где px — единица длины.Помимо px, более часто используемыми единицами длины являются em, rem, vw/vh и т. д. Так в чем же между ними разница? Когда их следует использовать?

px

Разрешение экрана относится к количеству пикселей по горизонтали и вертикали экрана.Например, разрешение 1920×1080 означает, что 1920 пикселей по горизонтали и 1080 пикселей по вертикали.

А пиксель в CSS представляет собой пиксель. В CSS это абсолютная единица длины и самая основная единица. Другие единицы длины автоматически конвертируются в пиксели браузером. Но для устройств это на самом деле относительная единица длины. Например, ширина и высота равны 2 пикселям. Под обычным экраном это фактически 4 пикселя, а под экраном Retina с devicePixelRatio, равным 2, у него 16 пикселей. Поэтому, когда размер экрана одинаков, чем выше разрешение экрана, тем более тонким будет эффект отображения.

На этом этапе необходимо уточнить некоторые связанные понятия:

Пиксели устройства

Физические пиксели экрана устройства показывают, сколько пикселей по горизонтали и вертикали экрана; это похоже на разрешение экрана.

Соотношение пикселей устройства (DPR)

Соотношение пикселей устройства означает, что 1 пиксель CSS равен нескольким физическим пикселям.

Формула расчета: DPR = количество физических пикселей / количество логических пикселей;

В браузере DPR текущего экрана можно получить через window.devicePixelRatio.

Плотность пикселей (DPI/PPI)

Плотность пикселей также называется плотностью дисплея или плотностью экрана, сокращенно DPI (DOTS Perin) или PPI (Pixel Per inch). С технической точки зрения PPI присутствует только в области компьютерного дисплея, а DPI появляется только в области печати или печати.

Формула расчета: Плотность пикселей = размер пикселя по диагонали экрана / физический размер

Например, для iPhone 6 с разрешением 750*1334 плотность пикселей составляет:

Math.sqrt(750 * 750 + 1334 * 1334) / 4.7 = 326ppi

Независимый от устройства пиксель (DIP)

DIP специально разработан для устройств Android, поскольку экран Android имеет широкий диапазон размеров, поэтому эта концепция предлагается для того, чтобы отображать как можно больше независимо от устройства. Он рассчитывается на основе плотности экрана, считая, что при плотности экрана 160 пикселей = DIP.

Формула расчета: глубина = px * 160 / dpi

em

em — одна из относительных единиц длины в CSS. Это относительно, так к кому оно относится? Имеет 2 значения:

• Использование в размере шрифта относительнородительский элементРазмер шрифта родительского элемента, например размер шрифта родительского элемента: 16px, при указании размера шрифта: 2em дочернему элементу его размер шрифта после расчета будет 32px;
• В других свойствах используется размер шрифта относительно самого себя, например ширина/высота/отступы/поля и т. д.;

Все мы знаем, что каждый браузер устанавливает размер шрифта по умолчанию для корневого элемента HTML html, и это значение обычно равно 16px. Вот почему 1em = 16px.

При расчете em он будет рассчитываться послойно, например:

<div>
    <p></p>
</div>

div { font-size: 2em; }
p { font-size: 2em; }

Для HTML с вышеуказанной структурой, поскольку размер шрифта корневого элемента html составляет 16 пикселей, окончательный расчетный размер шрифта тега p будет 16 * 2 * 2 = 64 пикселей.

rem

rem(root em), как и em, также является относительной единицей длины, но rem относится к корневому элементу html HTML.

Поскольку rem рассчитывается на основе размера шрифта html, он обычно используется на адаптивных веб-сайтах или H5.

Например, при выполнении H5 интерфейс обычно просит пользовательский интерфейс дать дизайн шириной 750 пикселей, а при разработке вы можете написать страницу на основе размера iPhone X 375 пикселей * 812 пикселей, чтобы вы могли использовать следующий JS в соответствии с текущей шириной области просмотра страницы автоматически рассчитывается базовый размер шрифта корневого элемента html.

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        psdWidth = 750,  // 设计图宽度
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if ( !clientWidth ) return;
            if ( clientWidth >= 640 ) {
                docEl.style.fontSize = 200 * ( 640 / psdWidth ) + 'px';
            } else {
                docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + 'px';
            }
        };

    if ( !doc.addEventListener ) return;
    // 绑定事件的时候最好配合防抖函数
    win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
    doc.addEventListener( 'DOMContentLoaded', recalc, false );
    
    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timeout)
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
})(document, window);

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

header {
    height: 0.5rem;
}

Каждый размер, измеренный по чертежу конструкции, можно разделить на 100, чтобы получить значение rem текущего элемента без вычисления, что очень удобно. Позвольте мне сказать вам по секрету, если вы замените 200 в приведенной выше строке кода JS, который вычисляет размер шрифта html-тега, на 2, то вам не нужно делить на 100 при вычислении rem, просто измерьте, сколько пикселей от чертеж конструкции, просто прямо сколько рем написать.

vw/vh

vw и vh — единицы длины относительно ширины и высоты области просмотра экрана соответственно:

• 1vw = длина ширины области просмотра, деленная на 1 из 100;
• 1vh = длина высоты окна просмотра, разделенная на 1 из 100 частей;

В JS 100vw = window.innerWidth, 100vh = window.innerHeight.

Появление vw/vh добавило решение для написания адаптивных макетов, и разработчики больше не ограничиваются рем.

Относительно области просмотра, в дополнение к vw/vh, есть vmin и vmax:

• vmin: взять меньшее значение между vw и vh;
• vmax: взять большее значение между vw и vh;

цветовая система

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

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

• ключевые слова цвета
• прозрачное ключевое слово
• ключевое слово currentColor
• Цвет RGB
• цвет HSL

ключевые слова цвета

Ключевые слова цвета — это нечувствительные к регистру идентификаторы, представляющие определенный цвет, например белый, черный и т. д.;

Список допустимых ключевых слов изменился в процессе эволюции CSS:

• CSS Standard 1 принимает только 16 основных цветов, называемых цветами VGA, поскольку они получены из набора цветов, отображаемых графической картой VGA, и называются цветами VGA (цвета видеографического массива).
• CSS Standard 2 добавляет ключевое слово Orange.
• С самого начала браузеры принимали другие цвета, и, поскольку некоторые ранние браузеры были приложениями X11, эти цвета в основном представляли собой списки цветов с именами X11, хотя и с некоторыми отличиями. SVG 1.0 был первым стандартом, формально определяющим эти ключевые слова; CSS Color Standard 3 также формально определяет эти ключевые слова. Их часто называют ключевыми словами расширенного цвета, цветами X11 или цветами SVG.
• CSS Color Standard 4 добавляет ключевое слово rebeccapurple в честь пионера Интернета Эрика Мейера.

На следующем рисунке представлены 16 основных цветов, также известных как цвета VGA. Всего на данный момент существует 146 ключевых слов цвета CSS, которые можно просмотреть здесь.Полный список цветовых ключевых слов.

Следует отметить, что если ключевое слово color неверно объявлено, браузер проигнорирует его.

прозрачное ключевое слово

ключевое слово Transparent указывает на полностью прозрачный цвет, то есть цвет выглядит как цвет фона. Технически, это минимальное значение с альфа-каналом черного цвета — это rgba (0,0,0,0).

Каковы сценарии применения прозрачных ключевых слов?

реализовать треугольник

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

div {
    border-top-color: #ffc107;
    border-right-color: #00bcd4;
    border-bottom-color: #e26b6b;
    border-left-color: #cc7cda;
    border-width: 50px;
    border-style: solid;
}

Принцип реализации треугольника с прозрачным:

• Во-первых, ширина и высота должны быть 0 пикселей, а содержимое заполняется толщиной границы;
• Край нужно раскрасить, а край, который не нужен, сделать прозрачным;
• Какой треугольник вы хотите, полностью определяется положением цветной стороны и прозрачной стороны 4-х сторон;
• Равнобедренный треугольник: сделайте одну сторону цветной, затем две соседние стороны прозрачными, а ширина равна половине цветной стороны; прямоугольный треугольник: установите одну сторону цветной, а затем любую соседнюю сторону прозрачной.

Взгляните на пример ниже:

Увеличить область клика

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

.btn {
    border: 5px solid transparent;
}

ключевое слово currentColor

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

Например, в следующем CSS цвет границы элемента будет красным:

.btn {
    color: red;
    border: 1px solid currentColor;
}

Цвет RGB[A]

Цвет RGB[A] — это цветовое пространство, состоящее из R (красный) — G (зеленый) — B (синий) — A (альфа).

В CSS у него есть два представления:

• шестнадцатеричная запись;
• оператор функции;

шестнадцатеричная запись

Диапазон значений каждого цвета в RGB — от 00 до ff, и чем больше значение, тем темнее цвет. Таким образом, цвет обычно состоит из 6 шестнадцатеричных символов плюс #, например, красный — это #ff0000.

Если цвету RGB необходимо добавить непрозрачность, необходимо добавить значение альфа-канала, и его диапазон также равен 00~ff, например, красный цвет с непрозрачностью 67% можно записать как #ff0000aa.

При использовании шестнадцатеричных символов для представления цветов для представления цвета используются два шестнадцатеричных числа. Если два одинаковых символа, их можно сократить до одного, например, красный #f00; с отсутствием прозрачности 67% для красного #f00a.

оператор функции

Когда RGB представлен как функция, каждое значение находится в диапазоне от 0 до 255 или от 0% до 100%, поэтому красный — это rgb(255, 0, 0) или rgb(100%, 0, 0).

Если вам нужно использовать функцию для представления значения цвета с непрозрачностью, диапазон значений составляет 0~1 и его десятичные дроби или 0%~100%. Например, красный цвет с непрозрачностью 67% — это rgba(255, 0, 0, 0,67 ) или rgba(100%, 0%, 0%, 67%)

Следует отметить, что три значения цвета RGB необходимо записывать одинаково, либо использовать числа, либо проценты, а значение непрозрачности не нужно записывать так же, как RGB. Например, rgb(100%, 0, 0) недопустимо, rgb(100%, 0%, 0%, 0,67) допустимо.

В цветовом стандарте CSS 4-го поколения добавлен новый способ записи функций, то есть запятую, разделяющую значения в RGB, можно заменить на пробелы, а запятые в RGB и alpha можно поменять на /, например , с непрозрачностью 67%. Красный можно записать как rgba(255 0 0 / 0,67). Кроме того, метод записи rgba объединен с функцией rgb, то есть rgb может напрямую записывать цвет с непрозрачностью.

HSL[A] Цвет

Цвет HSL[A] — это цветовая система, состоящая из оттенка-насыщенности-яркости-непрозрачности.

• Оттенок (H) — основное свойство цвета, диапазон значений — 0360 или 0 градусов360 градусов, 0 (или 360) — красный, 120 — зеленый, 240 — синий;
• Насыщенность (S) относится к чистоте цвета.Чем выше цвет, тем чище цвет.Чем ниже цвет, тем серее.
• Яркость (L), возьмите 0~100%, 0% — темный, 100% — белый;
• Непрозрачность (A), возьмите 0100% или 0десятичные дроби от 1 до 1;

Метод записи может относиться к методу записи RGB, но значения параметров другие.

Установите кнопку с красным цветом с непрозрачностью 67%. Все следующие устройства имеют одинаковый эффект:

button {
    color: #ff0000aa;
    color: #f00a;
    color: rgba(255, 0, 0, 0.67);
    color: rgb(100% 0% 0% / 67%);
    color: hsla(0, 100%, 50%, 67%);
    color: hsl(0deg 100% 50% / 67%);
}

Совет: в Chrome DevTools вы можете удерживать нажатой клавишу SHIFT + левая кнопка мыши, чтобы переключать представление цветов.

запросы средств массовой информации

Медиа-запрос относится к изменению стиля веб-сайта путем его настройки для различных устройств, конкретных функций или параметров устройства.

Вы можете сделать это, дав<link>Добавьте атрибут media, чтобы указать, на каком устройстве может действовать файл стиля, если он не указан, по умолчанию используется значение all, то есть он действует на всех устройствах:

<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />

Какие типы устройств поддерживаются?

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

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

кроме как через<link>В дополнение к тому, чтобы указанное устройство вступило в силу, вы также можете передать@mediaРазрешить правила CSS вступать в силу при определенных условиях. Страница ответа должна использовать @media, чтобы страница могла одновременно адаптироваться к ПК, PAD и мобильным терминалам.

@media (min-width: 1000px) {}

Медиа-запросы поддерживают логические операторы:

• и: вступает в силу только при соблюдении условий запроса;
• не: условие запроса отрицается;
• only: Вступает в силу только при совпадении всего запроса.Распространенная фраза совместима со старыми браузерами, и при ее использовании необходимо указывать тип носителя;
• Запятая или или: если одно из условий запроса выполнено, оно может быть сопоставлено;

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

/* 用户设备的最小高度为680px或为纵向模式的屏幕设备 */
@media (min-height: 680px), screen and (orientation: portrait) {}

Общие потребности

пользовательские свойства

Раньше мы обычно использовали переменные в препроцессоре, а теперь CSS тоже поддерживает использование переменных. На него можно ссылаться там, где вы хотите его использовать, через настраиваемое свойство.

Пользовательские атрибуты также являются каскадными, как и обычные атрибуты. Когда они объявлены в :root, они доступны во всем документе. Если они объявлены в элементе, их можно использовать только в нем и его дочерних элементах. Можно использовать только элементы.

Пользовательские свойства должны пройти--xПодтвержденный формат, такой как: - цвет темы: красный, использование пользовательского свойства, когда это необходимо, функция var. Например:

<!-- 定义自定义属性 -->
:root {
    --theme-color: red;
}

<!-- 使用变量 -->
h1 {
    color: var(--theme-color);
}

Вышеуказанное изображение - это коробка-тень динамического регулировочного элемента реализации JS с использованием пользовательских свойств CSS, которые можно увидеть.codepen demo.

Решение для границы 1px

Дисплей Retina имеет более высокое разрешение, чем обычный экран, поэтому граница в 1 пиксель на мобильной стороне будет выглядеть толще, и эту линию обычно необходимо сделать тоньше для эстетики. Вот статья, в которой перечислены 7 решений для справки:7 способов решить проблему границы в 1 пиксель для мобильных экранов Retina

И вот последнее относительно идеальное решение, реализованное с помощью псевдоклассов и трансформаций:

Установите только одну нижнюю границу:

.scale-1px-bottom {
    position: relative;
    border:none;
}
.scale-1px-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Установите 4 границы одновременно:

.scale-1px {
    position: relative;
    margin-bottom: 20px;
    border:none;
}
.scale-1px::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}

очистить поплавок

Что такое float: плавающий элемент вырывается из потока документа и перемещается влево/вправо, пока не столкнется с родительским элементом или другим плавающим элементом.

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

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

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

Вот два метода: очистка через BFC и очистка через очистку.

Четкий поплавок BFC

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

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

Есть много способов сгенерировать BFC.Мы можем установить overflow: auto для родительского элемента, чтобы просто добиться очистки и плавающего BFC, но лучше всего использовать overflow: hidden для совместимости с IE.

.parent {
    overflow: hidden;
}

Очистка float методом overflow: hidden не идеальна, когда у элемента есть тень или выпадающее меню, оно будет обрезано, поэтому использование этого метода ограничено.

Очистить поплавок с четким

Я сделаю вывод первым:

.clearfix {
    zoom: 1;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

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

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

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

Этот метод в основном является решением, которое все используют для очистки флоатинга, и оно очень распространено.

Ссылаться на:Плавающее и очищающее плавание в CSS, расчесывание

Удалить стили браузера по умолчанию

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

Гуру CSS Эрик А. Мейер давным-давно сделал это, чтобы очистить стили браузера по умолчанию. Это написать кучу общих стилей для сброса стилей браузера по умолчанию, эти стили обычно помещаются в файл с именем reset.css. как мастерreset.cssЭто написано так:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Его reset.css считается наиболее широко используемым решением в стиле сброса.

В дополнение к reset.css, который появился позжеNormalize.css. Что касается Normalize.css, его автор necolas написал о нем статью и рассказал о разнице между ним и reset.css. Вот перевод этой статьи, которую он написал:Поговорим о Normalize.css.

В статье рассказывается: Normalize.css — это всего лишь небольшой файл CSS, но он обеспечивает высокую степень согласованности между браузерами в стилях HTML-элементов по умолчанию. По сравнению с традиционным сбросом CSS, Normalize.css — это современная альтернатива премиум-класса с поддержкой HTML5, которая используется многими известными фреймворками и веб-сайтами.

Конкретный стиль Normalize.css можно найти здесь.Normalize.css

В отличие от reset.css, Normalize.css имеет следующие особенности:

• reset.css устанавливает стили по умолчанию почти для всех тегов, а Normalize.css выборочно защищает некоторые важные значения по умолчанию;
• Исправлено множество ошибок браузера, которые не устранял reset.css;
• Это не сделает ваши инструменты отладки загроможденными.Наоборот, reset.css установил много значений по умолчанию, поэтому вы часто будете видеть множество унаследованных стилей в инструментах отладки браузера, которые очень загромождены;
• Normalize.css является модульным, поэтому вы можете выборочно удалять части, которые никогда не будут использоваться, например, обобщение формы;
• У Normalize.css есть подробная документация;

обработка длинного текста

По умолчанию: символы слишком длинные, чтобы переполнить контейнер.

Символы за пределами части обтекания

Используйте дефисы для символов вне позиции

Однострочный текст за многоточием

Многострочный текст за многоточием

См. примеры этих сценариев выше:codepen demo

Интересно, буквально два дня назад я видел, что chokcoco тоже написал статью о переполнении текста, главная изюминка — обработка переполнения текста во всем блоке. Что такое блок текста? Например, следующие технические теги относятся ко всему блоку текста:

Кроме того, он также сделал обработку совместимости для iOS/Safari, вы можете прочитать это, если вам интересно:Исследование функции переполнения и пропусков блочного текста CSS.

Центрируется по горизонтали и вертикали

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

• Однострочный текст, встроенный или встроенный блочный элемент;
• Блочный блок с фиксированной шириной и высотой;
• Блочные блоки без фиксированной ширины и высоты;

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

Одна строка текста, встроенный или встроенный блочный элемент

Центрировано по горизонтали

Такие элементы должны быть центрированы по горизонтали, родительский элемент должен быть элементом уровня блока (block level), а стиль родительского элемента должен быть таким:

.parent {
    text-align: center;
}

Центрировать по вертикали

Метод 1: Добейтесь эффекта вертикального центрирования, установив одинаковые верхний и нижний внутренние интервалы:

.single-line {
    padding-top: 10px;
    padding-bottom: 10px;
}

Способ 2: установивheightа такжеline-heightПоследовательно добивайтесь вертикального центрирования:

.single-line {
    height: 100px;
    line-height: 100px;
}

Блочный блок с фиксированной шириной и высотой

Метод 1: абсолютная + отрицательная маржа

Способ 2: абсолютный + автозаполнение поля

Метод 3: абсолютный + расчет

Блочный блок с переменной шириной и высотой

Вот 6 методов, см.Ян ХайцзинСтатья, которую я написал, две схемы line-height и write-mode заставили меня после прочтения воскликнуть: существует ли такая операция? выучил выучил.

Метод 1: абсолютный + преобразование

Способ 2: высота линии + вертикальный выравнивание

Способ 3: режим письма

Способ 4: таблица-ячейка

Способ 5: сгибание

Способ 6: сетка

Общий макет

Двухколоночный макет (боковая панель с фиксированной шириной, основная колонка, адаптивная)

Для этих сценариев написано несколько примеров:codepen demo

Метод 1: float + overflow (принцип BFC)

Способ 2: плавающая + маржа

Способ 3: сгибание

Способ 4: сетка

Трехколоночный макет (обе стороны основного столбца с фиксированной шириной, адаптивные)

Для этих сценариев написано несколько примеров:codepen demo

Метод 1: раскладка Holy Cup

Способ 2: двойное летающее крыло

Способ 3: float + overflow (принцип BFC)

Способ 4: сгибание

Способ 5: сетка

Макет с несколькими столбцами одинаковой высоты

Лучше читать с примерами:codepen demo

Метод 1: заполнение + отрицательный запас

Способ 2: установить родительское фоновое изображение

Трехстрочный макет (основной столбец с фиксированной высотой и хвостом, адаптивный)

Перечислены 4 метода, все они основаны на следующих HTML и CSS, которые лучше читать с примерами:codepen demo

<div class="layout">
    <header></header>
    <main>
        <div class="inner"></div>
    </main>
    <footer></footer>
</div>

html,
body,
.layout {
    height: 100%;
}
body {
    margin: 0;
}
header, 
footer {
    height: 50px;
}
main {
    overflow-y: auto;
}

Способ 1: расчет

Метод 2: абсолютный

Способ 3: сгибание

Способ 4: сетка

завершить

Это статья, которую я писал в течение 2 недель. Это краткое изложение моего собственного CSS. Хотя она очень длинная, ее недостаточно, чтобы охватить все знания CSS. Например, анимация и некоторые новые функции CSS3 не охвачены вообще, потому что, по оценкам, нужно записать десятки тысяч слов (на самом деле лень 😝 ).

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