В конце 2020 года я имею честь общаться с группой выдающихся студентов колледжа на темы, связанные с CSS, для меня это большая честь! Я хотел бы поблагодарить платформу (Alibaba Group. Front-end Trainee Program) за предоставленную мне такую возможность, и я также хотел бы поблагодарить своих друзей Юбо и Мо Ран за их поддержку и поддержку. В конце прямого эфира я сказал, что текстовую версию организую позже, в связи с моим новым переходом в команду (интерактивная команда перешла в команду F(x) Team), а мне было лень, я только сегодня начал организовывать текстовую версию. К счастью, его можно завершить в конце года, что все еще является своего рода лекарством. Я надеюсь, что следующий контент будет полезен для студентов, которые плохо знакомы с CSS или интересуются CSS. Я также надеюсь, что больше студентов смогут принять участие в программе стажировки Alibaba Group и чему-то научиться.

Прямая трансляция чувствует себя по-другому

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

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

В 2014 году была опубликована книга по аспектам CSS:

Вроде и сейчас не переиздавалась, и в сети вроде не снята с производства, но содержание старовато, но не устарело!

Я работаю в Hand Tao Interactive уже пять лет и недавно присоединился к команде F(x) отдела передовых технологий отдела Tao:

F(x) Team , F(x) относится к функции F(x) , которая является символом, часто встречающимся в машинном обучении, и суть глубокого обучения также заключается в том, чтобы найти оптимальное решение f(x); Это означает, что участники с различными характеристиками постоянно «обучаются» с помощью магического эффекта команды fx, чтобы вместе найти оптимальное решение интеллектуальной команды интерфейса.

О чем говорить дальше

Далее я расскажу вам о сегодняшней теме вокруг этих шести аспектов.

Демистификация CSS

Прошли десятилетия с тех пор, как Тим Бернерс-Ли, отец Всемирной паутины, основал Всемирную паутину (W3C) в Массачусетском технологическом институте в 1994 году. Вам может быть интересно, как выглядела первая веб-страница:

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

Люди всегда любили красоту, и даже в те дни люди хотели сделать свои веб-страницы более красивыми. В том же году (1994) Хакен Вим Лэй предложил каскадные таблицы стилей HTML (CHSS):

К тегам HTML были добавлены некоторые атрибуты, такие как bgcolor, face и т. д. Есть также несколько подобных тегов для установки стиля текста.

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

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

Нам повезло, как группе веб-разработчиков. Совсем недавно, в 1994 году, Хакен Вим Лэй и Берт Персиан вместе работали над разработкой CSS и представили рекомендации по CSS на конференции в Чикаго. Это также был первый раз, когда CSS появился в глазах веб-разработчика (хотя в то время у него не было названия). А через два года вышла спецификация CSS 1.0:

И после двух лет разработки с версией CSS2.0, после этого он также испытал итерации версий CSS 2.1 и CSS 2.2. Между тем, спецификация CSS 2.1 на протяжении многих лет побуждала веб-разработчиков писать CSS. Еще позже, то есть примерно до 2015 года, рабочая группа CSS, запланированная W3C, обнаружила, что разработка CSS становится все быстрее и быстрее, и функции, связанные с CSS, значительно увеличились, а скорость продвижения разных функций отличается. . В это время, чтобы лучше поддерживать и управлять характеристиками CSS, рабочая группа W3C по CSS решила не использовать номера версий CSS, такие как CSS1.0, CSS2.0, CSS2.1, с которыми мы знакомы. управлять CSS. Вместо этого каждая функция CSS разделена на независимые функциональные модули, а функции в спецификации CSS управляются в порядке уровня 1, уровня 2, уровня 3 и т. д.:

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

Отредактированный черновик (ED): начальная стадия, очень черновая
Первый общедоступный рабочий проект (FPWD): первая общедоступная версия, открытая для обратной связи рабочей группы.
Рабочий проект (WD): учитывается обратная связь от рабочих групп и сообщества, и ранние реализации браузера обычно начинаются на этом этапе.
Кандидат в рекомендации (CR): Относительно стабильная версия, пригодная для внедрения и тестирования.
Спецификация рекомендаций по номинациям (PR): последний шанс для компаний-членов W3C выразить возражения против этой спецификации.
Официальная рекомендация (REC): заключительный этап технической спецификации W3C.

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

Сообщество заговорило о CSS4, когда вышел модуль CSS Selector Level4. Фактически, еще в 2016 году @Rachelandrew озвучил в сообществе «Почему нет CSS4 — объяснение уровней CSS»:

На Github @Jen Simmons открыла отдельную ветку о CSS4 в черновиках CSSWG, и некоторые великие боги в сообществе высказали свое мнение по этой теме:

Why Are We Talking About CSS4?
There Is No Such Thing As CSS4
Why There Is No CSS4: Explaining CSS Levels
Where Is CSS4? When Is It Coming Out?
CSS4: La nueva versión de CSS que nunca existirá

Вышеизложенное в основном говорило с вами об истории CSS и процессе его разработки.

После разговора о разработке CSS, давайте поговорим о текущем состоянии CSS. Из отчетов о состоянии разработки CSS за 2019 и 2020 годы мы можем увидеть текущее состояние разработки CSS:

Этот отчет относительно подробный:

В дополнение к статистике о функциях CSS, модулях и селекторах, методологии, фреймворках, инструментах, средах и т. д., есть также описания людей и статус-кво, использующих CSS, например:

В дополнение к отчетам о состоянии разработки CSS, а также ежегодному ежегоднику CSS Web будет проводиться соответствующий опрос:

Кроме того, есть некоторые другие отчеты об опросах, в которых также есть некоторые отчеты, связанные с CSS, но ни один из них не является таким подробным и целенаправленным, как отчет о развитии статуса CSS. Если у вас есть анализ CSS в других отчетах, вы можете прочитать отчеты, перечисленные в статье @Geoff Graham «Обзор веб-исследований 2020 года»:

Что такое CSS?

CSS называется каскадными таблицами стилей, что является аббревиатурой от трех слов «каскадные таблицы стилей». Каждая буква представляет разное значение:

C (каскад): относится к каскадированию.Правила стиля, написанные в CSS, располагаются одно за другим, что можно просто понять как последовательность
S (стиль) : первая буква S, которая относится к правилам стиля, например body{color: red}
S (листы): вторая буква S относится к таблице стилей, которую мы часто называем файлом .css, код CSS будет помещен в таблицу стилей.

Веб-разработчики знают, что веб-страница или веб-приложение состоит из трех частей: HTML, CSS и JavaScript:

Каждая часть играет свою роль в сети:

HTML: это скелет веб-приложения
CSS: используется для украшения Интернета.
JavaScript: используется для управления интерактивным поведением веб-элементов.

Сегодня в дополнение к трем частям HTML, CSS и JavaScript, которые мы упоминали выше, веб-приложение или веб-страница имеют новую часть, а именно WAI-ARIA:

Wai-Aria является частью спецификации Web Accessibility (A11Y), которая в основном используется для того, чтобы помочь нам построить более доступное веб-приложение.

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

Как упоминалось ранее, веб-страница состоит как минимум из трех частей: HTML, CSS и JavaScript.HTML преобразует структуру HTML в дерево DOM с помощью синтаксического анализатора HTML, CSS преобразует CSS в дерево CSSOM с помощью синтаксического анализатора CSS, как показано на рисунке ниже. .:

Дерево DOM и дерево CSSOM построят дерево рендеринга:

Наконец, после нескольких процессов отображается веб-страница, которую мы видим:

Если AOM (доступное дерево) будет введено снова, оно будет выглядеть примерно так, как показано на следующем рисунке:

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

Лично я предпочитаю называть CSS танграмами или строительными блоками:

Для достижения одного и того же эффекта мы можем сделать это разными способами.

Из-за этого многие студенты считают, что CSS раздражает:

CSS прост, но не так прост, как CSS

@Jeremy Keith сказал на CSS Day 2017:

примерно означает:

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

На эту тему в твиттере или в сообществе время от времени идут дебаты:

Иногда в Твиттере вы также чувствуете, что круг разработчиков во всем мире похож на круг развлечений!

Так к чему эти аргументы? По этой причине я поделюсь своими собственными взглядами на этот аспект.

Первая картинка:

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

body {
    color: #fff;
    background-color: #09f;
}

Приведенные выше несколько строк простого кода CSS позволят вам увидеть эффект белого текста на синем фоне в браузере:

И вам не нужно запоминать все свойства CSS и их значения по одному, потому что есть много способов поиска, например, на MDN есть список свойств CSS:

Это основная причина, по которой CSS считается простым.

Так почему CSS не прост? Для этого есть много причин, но давайте начнем с правил, которые люди считают простым CSS:

<div class="card">1</div>

<div class="card__news">2</div>

.card {
    width: 100px;
}

.card.card__news {
    width: 100%;
}

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

<div class="a">Text</div>
<div class="b">Text</div>
<div class="a b">Text</div>
<div class="b a">Text</div>

.a {
    color: red;
}

.b {
    color: blue;
}

.a.b {
    color: orange;
}

.b.a {
    color: yellow;
}

Каковы цветовые разделения текста этих четырех элементов div? По моему мнению, @Max Stoiber также разместил аналогичную анкету в твиттере:

Этот вопрос может поставить в тупик многих студентов. Кроме того, в CSS есть много базовых концепций, которые могут упростить вам работу с CSS, например:

каскад
наследовать
Веса
визуальная модель форматирования
коробочная модель
макет
поддержание стиля
так далее

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

Каскадирование CSS

Согласно предыдущему объяснению, каскад относится к «Каскаду», и его может быть легче понять на примере. Например, в файле стиля style.css мы пишем два правила стиля для одного и того же элемента:

<a href="#" class="link">Link</a>

a {
    color: #90f;
}

.link {
    color: #f36;
}

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

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

Документооборот (обычный поток)
Контекст форматирования
Ламинированный контекст (контекст укладки)
Уровень стека
Порядок укладки

По этой причине я разделил CSS на две части для иллюстрации:

Поговорим о первой части.

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

В CSS поток документов является очень простой и важной концепцией. Много раз ее называют Document Flow, но в стандартах CSS она называется Normal Flow, то есть нормальный поток или обычный поток. Люди предпочитают называть это документооборотом. Так в чем же дело с потоком документов CSS?

Любой элемент в HTML на самом деле является объектом и блоком. По умолчанию он располагается в порядке появления, и этот порядок расположения является документооборотом.

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

На самом деле поле в обычном потоке документов относится к контексту форматирования (Formatting Context), и более знакомыми являются контекст форматирования Block и контекст форматирования Inline. Но есть одно замечание, они могут быть только одним из них, но не обоими одновременно. Подразумевается, что любой визуализированный элемент HTML является блоком, и эти блоки являются либо блочными блоками, либо встроенными блоками. Даже текст, который не заключен в какой-либо элемент, будет анонимным блок-боксом или встроенным блоком, в зависимости от ситуации.

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

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

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

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Соответствующие эффекты следующие:

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

Контекст форматирования уже упоминался много раз, в CSS контекст форматирования относится к:

среда, определяемая начальным элементом

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

Мы можем использовать свойство CSS display для форматирования элемента, т. е. для создания контекста форматирования.

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

Давайте рассмотрим простой пример:

Самая большая разница на приведенном выше рисунке заключается в том, что ul слева явно не устанавливает display:contents; ul справа явно устанавливает display:contents, а установка display:contents изменит исходный формат, то есть его дочерний элемент. li Оба станут элементами сетки, и разница между двумя эффектами заключается в следующем:

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

Обычно HTML-документ, который мы видим с терминала устройства, представляет собой плоскую поверхность, но на самом деле элементы HTML-документа существуют в трех измерениях. В дополнение к знакомым осям x и y плоского холста есть также ось z, которая управляет третьим измерением.

Для осей x и y это легко понять, одна вправо и одна вниз. А вот с осью Z разобраться сложнее. В CSS для определения выравнивания элементов по оси Z он представляет собой эту невидимую вертикальную линию между пользователем и экраном:

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

Обычно браузеры размещают элементы в определенном порядке, указанном в спецификации CSS:

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

Фактически каждый элемент HTML принадлежит контексту стека. Каждый позиционированный элемент в данном контексте стека имеет уровень стека, равный целому числу, и блок элемента с более высоким уровнем стека всегда находится перед (над) блоками с более низким уровнем стека. Ящики могут иметь отрицательный уровень укладки. Ящики с одинаковым уровнем стека в контексте стека складываются вместе в соответствии с порядком, в котором они появляются в дереве документа.

Контекст наложения в документе формируется элементами, которые удовлетворяют любому из следующих условий:

корневой элемент ()
Значение позиции, значение z-index которого не является автоматическим, не является статическим.
значение позиции не является статическим
Элемент Flex со значением z-index, отличным от auto, то есть: отображение родительского элемента: flex|inline-flex
Элементы со значением атрибута непрозрачности меньше 1
Элементы, значение атрибута преобразования которых не равно none
Элементы, у которых значение атрибута mix-blend-mode не является нормальным
Элементы со значениями фильтра, перспективы, клип-пути, маски, пути движения, отличными от нуля.
элементы со значением перспективы, отличным от none
Элементы, свойство изоляции которых установлено на изоляцию
Любое свойство CSS указывается в will-change, даже если вы не указываете значение этих свойств напрямую.

И каждая страница имеет контекст стека по умолчанию. Корнем этого контекста стека является элемент html. Все в элементе html помещается на слой стека этого контекста стека по умолчанию.

уровень стека

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

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

В переводе на термины это:

Уровень стека обычных элементов определяется контекстом стека, поэтому сравнение уровня стека имеет смысл только в текущем элементе контекста стека.

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

Порядок укладки

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

Фон и граница: фон и граница элементов, формирующих контекст наложения. Самый низкий уровень в контексте стека.
Отрицательные значения z-index: дочерние элементы с отрицательными значениями z-index в контексте стека.
Блок уровня блока: не встроенные, непозиционированные дочерние элементы в потоке документа.
Floating Box: плавающий элемент без позиционирования.
Встроенное поле: непозиционированные дочерние элементы встроенного уровня в потоке документа.
z-index: 0: Позиционирование элемента. Эти элементы формируют новый контекст стека.
Положительные значения z-index: расположите элемент. Самый высокий уровень в контексте стека.

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

На самом деле правила каскадного порядка более сложны.

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

Позиционированные элементы располагаются в порядке появления в исходном коде. Последний контент в исходном коде ближе всего к зрителю
Встроенные элементы (такие как текст и изображения) являются встроенными и не позиционируются (их позиции статичны).
Неплавающие элементы расположены в порядке появления в исходном коде.
Непозиционированные и неплавающие элементы блочного уровня
Корневой элемент html является корнем глобального контекста стека и содержит все элементы на странице.

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

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

Первое, на что стоит обратить внимание, это то, что свойство z-index применяется только к позиционированным элементам. Таким образом, даже если вы присвоите элементу значение z-index, чтобы поставить его перед другими элементами, z-index не повлияет на элемент, если он не позиционирован, то есть если его значение позиции отличается от static.

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

Позиционированный элемент с положительным z-индексом. Более высокие значения ближе к экрану. Затем в порядке их появления в исходном коде:

z-index: 0 или z-index: auto позиционируемого элемента;
Встроенные элементы (такие как текст и изображения) являются встроенными и не позиционируются (их положение статично).
Непозиционированные плавающие элементы в порядке появления в исходном коде
Непозиционированные и неплавающие элементы блочного уровня
Позиционированный элемент с отрицательным z-индексом. Меньшие значения индекса z-index ближе. Затем в том порядке, в котором они появляются в исходном коде.
Корневой элемент html является корнем глобального контекста стека и содержит все элементы на странице.

Когда мы устанавливаем значение z-index для позиционированного элемента, оно определяет порядок этого элемента в контексте порядка размещения, которому он принадлежит, и он будет отображаться на экране в соответствии с шагами, описанными выше.

Однако другое происходит, когда мы устанавливаем z-индекс элемента. Элемент, который получает значение z-index, отличное от значения по умолчанию auto, фактически создает контекст стека для всех его позиционированных элементов-потомков. Ранее мы упоминали, что у каждого контекста стека есть корневой элемент, который содержит все элементы внутри него. Когда вы применяете свойство z-index к этому элементу, оно определяет z-порядок элемента в его содержащем контексте, а также создает новый контекст порядка наложения с корнем в элементе.

Считается, что позиционированный элемент со значением z-index:auto создает новый контекст порядка наложения, но любые позиционированные потомки и потомки, которые фактически создают новый контекст порядка наложения, считаются частью контекста родительского порядка наложения, а не новым порядком каскадирования. контекст.

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

Контекст порядка наложения, состоящий из позиционированных элементов с положительным z-индексом. Более высокие значения ближе к экрану. Затем визуализируйте их в том порядке, в котором они появляются в исходном коде.
z-index: 0 или z-index: auto для позиционированных элементов
Встроенные элементы (такие как текст и изображения) являются встроенными и не позиционируются (их положение статично).
Неплавающие элементы расположены в порядке появления в исходном коде.
Непозиционированные и неплавающие элементы блочного уровня
具有负值 z-index 的定位元素组成的层叠顺序上下文。较低的 z-index 的值更接近屏幕。 Затем визуализируйте их в том порядке, в котором они появляются в исходном коде.
Корневой элемент html является корнем глобального контекста стека и содержит все элементы на странице.

Таким образом, когда мы используем свойство z-index для определения порядка позиционированных элементов в его порядке наложения, мы также создаем «атомарный» контекст порядка наложения, где каждый элемент становится контекстом порядка наложения для всех его позиционированных потомков.

стиль каскад

Вернемся назад и посмотрим на каскадирование стилей. CSS может писать одни и те же правила стиля одновременно в любом блоке кода, например {}, например:

p {
    color: red;
    color: blue; /* 被采用 */
}

Хотя такое написание не подвержено ошибкам, не рекомендуется писать правила стиля CSS таким образом.

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

<a class="link"></a>

a {
    color: red;
}

.link {
    color: blue;
}

Даже мы можем использовать одни и те же правила стиля для одного и того же элемента в разных файлах стилей, например

/* base.css */
a {
    color: red
}

/* style.css */

@import base.css;

a {
    color: orange;
}

<!-- index.html -->

<link href="style.css" />
<style>
    a {
        color: lime;
    }
</style>

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

Веса

Когда дело доходит до веса в поле CSS, возможно, все обращают больше внимания на вес селекторов CSS. На самом деле, помимо влияния веса селектора на стили элементов, он также связан с порядком появления правил стиля CSS (как упоминалось выше в порядке каскадирования). И помимо селекторов, имеющих веса, есть еще веса атрибутов.

Для селекторных весов очень наглядно можно объяснить следующую цифру:

Вес селектора может быть подобен правилу выживания в океанском мире, большая рыба ест маленькую рыбу, а маленькая рыба ест креветку. Если в вашей реализации неясны веса двух селекторов, вы также можете использовать инструменты онлайн-тестирования для обнаружения:

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

Считает 1, если объявление исходит из встроенного стиля (атрибут стиля), а не правила стиля селектора, в противном случае 0 ( =a ). В HTML значение атрибута стиля элемента является правилом стиля, и эти атрибуты не имеют селекторов, поэтому a=1, b = 0, c = 0, d = 0, т.е. 1, 0, 0, 0
Подсчитайте количество атрибутов ID в селекторе ( = b )
Подсчитайте количество других атрибутов и псевдоклассов в селекторе ( = c )
Подсчитайте количество имен элементов и псевдоэлементов в селекторе ( = d )

Конкатенация 4 чисел a-b-c-d (в системе счисления с большим основанием) указывает на специфичность, например, в следующем примере:

*             {}  /* a=0 b=0 c=0 d=0 -> 选择器权重 = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> 选择器权重 = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> 选择器权重 = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> 选择器权重 = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 选择器权重 = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> 选择器权重 = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> 选择器权重 = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> 选择器权重 = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> 选择器权重 = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> 选择器权重 = 1,0,0,0 */

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

Правила автора (Автор): это CSS, объявленный HTML-документом. То есть он написан нашими внешними разработчиками и определяет таблицы стилей для исходных документов в соответствии с соглашениями языка документа (например, HTML). Это также единственный источник, который мы можем контролировать.
Пользователь (пользователь): это определяется и управляется браузером пользователя. Не у всех будет один, но когда люди добавляют a, обычно переопределяют стили и увеличить доступ к веб-сайту. Например, пользователь может указать файл, пропал пропал листы стиль, или пользовательский агент может предоставить пользовательский стиль, используемый для генерации (или вести себя, как делать один и тот же) интерфейс
User-Agent: это стили по умолчанию, предоставляемые браузерами для элементов. Вот почему входные данные выглядят немного по-разному в разных браузерах, и это одна из причин, по которой людям нравится использовать CSS для сброса стилей, чтобы убедиться, что стили пользовательского агента переписаны.

Эти три таблицы стилей будут в определенной степени перекрываться и каскадно влиять друг на друга.

Атрибуты в CSS, применяемые к одному и тому же элементу, также будут иметь веса, такие как атрибуты width, min-width, max-width, которые также используются для описания ширины элемента, например:

В итоге выигрывает max-width: 100%, то есть вес max-width выше, чем у width и min-width, но это не абсолютно, что тесно связано со сценой. Однако, когда эти три атрибута используются для одного и того же элемента одновременно, их веса примерно следующие:

Когда ширина больше, чем минимальная ширина, будет взято значение ширины; когда ширина меньше, чем минимальная ширина, будет взято значение минимальной ширины
Когда ширина больше, чем max-width, будет взято значение max-width; когда ширина меньше, чем max-width, будет взято значение ширины
Если min-width больше max-width, то в качестве ширины элемента будет использоваться значение min-width; если min-width меньше max-width, то в качестве ширины будет использоваться значение min-width элемента

Если вы используете Flexbox для создания макета сети, то существуют определенные правила взвешивания ширины flex-элементов:

Сначала решите, что использовать для гибких элементов, основываясь на содержимом ➜ ширине ➜ гибкости. Если flex-элемент явно устанавливает свойство flex-basis, содержимое и ширина игнорируются. И min-width используется для установки нижнего предела flex-элементов, max-width используется для установки верхнего предела flex-элементов.

который:

flex-basis больше max-width, ширина flex-элементов равна max-width, то есть max-width может покрывать flex-basis
Если flex-basis меньше min-width, ширина flex-элемента будет принимать значение min-width, то есть min-width переопределяет flex-basis.

Так как min-width больше max-width, то будет браться min-width.При этом предварительном условии мы можем сравнить веса flex-basis и min-width, то есть: flex-basis будет взят из min-width. И наоборот, если min-width меньше max-width, max-width все равно будет браться, а если flex-basis больше max-width, будет браться max-width.

Обратите внимание, что расчеты ширины гибких элементов в макетах Flexbox очень сложны.

наследовать

«Наследование» — еще одно важное понятие в CSS. В спецификации W3C при описании каждого свойства CSS будет стоять опция "Наследуется". Если значение равно "нет", это означает, что свойство не наследуется, как, например, свойство границы в левой части рисунка ниже. ; если значение равно «да», это означает, что это свойство является наследуемым, например свойство цвета в правой части следующего рисунка:

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

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

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

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

Сначала сделаем заявление:

Модель визуального форматирования и блочная модель CSS — это не одно и то же!

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

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

Если вы хотите полностью понять модель визуальной формируемости CSS, вам нужно освоить еще несколько концепций, таких как:

Блок (Block): Абстрактное понятие, блок занимает независимую область в потоке документа, и блоки располагаются стопкой по порядку в вертикальном направлении (по умолчанию)
Содержащий блок: относится к блоку, который содержит другие блоки.
Блок: абстрактная концепция, созданная движком CSS на основе содержимого документа, в основном используемая для позиционирования, компоновки и форматирования элементов документа.
Блочный блок: создается элементами блочного уровня. Элемент уровня блока будет генерировать по крайней мере один блок уровня блока, но может генерировать более одного (например, элемент элемента списка).
Блок встроенного уровня: создается элементами встроенного уровня. Точно так же встроенный элемент создает как минимум один блок встроенного уровня. Блоки встроенного уровня включают блоки встроенного уровня и атомарные блоки встроенного уровня.Разница заключается в том, участвует ли блок в создании контекстов встроенного форматирования.
Блок-бокс: блок-блок называется блок-боксом, если он также является блок-контейнером. В дополнение к именованным блок-боксам существует еще один тип анонимных блок-боксов, называемый анонимным блок-боксом, который нельзя выбрать с помощью селекторов CSS.
Атомарный блок встроенного уровня: блок встроенного уровня, который не участвует в создании встроенного контекста форматирования. Блоки Atomic Inline Box изначально назывались Atomic Inline Boxes, и с тех пор они были пересмотрены. Содержимое блока атомарного уровня не будет разбито на несколько строк.
Линейный блок: это не то же самое, что встроенный блок. Поле строки — это поле, созданное контекстом встроенного форматирования для представления строки. Линейные блоки набираются от одной стороны содержащего блока к другой. Обычно браузеры создают невидимую строку для каждой строки.
Блок-контейнер или блок-контейнер: Блок-контейнер фокусируется на роли текущего блока в качестве контейнера, он не участвует в компоновке и позиционировании текущего блока, он описывает только отношения между текущим блоком и его потомками.
Элемент блочного уровня: относится к элементу, отображаемое значение которого равно block, list-item, table, flex and grid и т. д., элемент станет элементом блочного уровня. То, является ли элемент элементом уровня блока, является только свойством самого элемента и не используется напрямую для создания контекста форматирования или макета.
Элемент встроенного уровня (Inline-level Element): относится к элементу, отображаемое значение которого равно inline, inline-block, inline-table, inline-flex и inline-grid и т. д., элемент станет элементом встроенного уровня. Как и в случае с блочными элементами, то, является ли элемент встроенным, является атрибутом самого элемента и не используется напрямую для создания контекста форматирования или макета.
Область просмотра: Область просмотра — это видимая область браузера. Размер окна относится к размеру видимой области браузера.
Анонимный ящик: он разделен на блочный анонимный ящик и встроенный анонимный ящик. В некоторых случаях визуальное форматирование требует добавления дополнительных блоков, которые нельзя выбрать с помощью селекторов CSS, и такие блоки называются анонимными блоками.

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

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

Этого достаточно для нас. Я думаю, когда вы увидите эти концепции, вы больше не будете говорить, что CSS — это просто.

Вооружившись этими понятиями, давайте поговорим о контекстах форматирования в CSS. Я думаю, вы слышали это слово более или менее. В CSS есть много контекстов форматирования, помимо привычных BFC и IFC, есть также FFC, созданный макетом Flexbox, и GFC, созданный макетом Grid. Все вместе они называются контекстами форматирования CSS, также известными как модели визуального форматирования. Модель визуального форматирования CSS — это механизм, используемый для обработки документа и его отображения на визуальном носителе.

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

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

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

Контекст встроенного форматирования или сокращенно IFC. В основном используется для управления правилами форматирования блоков встроенного уровня.

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

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

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

По вертикали, когда высота встроенного элемента ниже строки строки, свойство вертикального выравнивания определяет вертикальное выравнивание.
По горизонтали, когда общая ширина встроенных элементов меньше, чем поле строки, горизонтальное разделение встроенных элементов определяется text-align.
В горизонтальном направлении, когда общая ширина встроенных элементов превышает линейный блок, встроенные элементы будут размещены в нескольких линейных блоках.Если установлены такие атрибуты, как несгибаемый, встроенные элементы будут переполнять линейный блок.
Левая и правая стороны линейного блока касаются содержащего его блока, а плавающий элемент помещается посередине между строковым блоком и содержащим быстрым краем.

Все следующие правила создают встроенный контекст форматирования:

IFC генерируется только в том случае, если элемент блочного уровня содержит только элементы встроенного уровня.
Внутренние ящики будут размещены один за другим в неравномерном направлении.
Вертикальное начало этих блоков начинается в верхней части содержащего блока блока.
При размещении этих блоков будет учитываться пространство, занимаемое их горизонтальными отступами, границей и полем.
В вертикальном направлении коробки могут быть выровнены в разных формах (вертикально-выравнивание)
Может полностью содержать все блоки на линии в блоке строки (Line Box), ширина блока строки определяется содержащим блоком и наличием поплавков
Линейные блоки в IFC обычно имеют левую и правую стороны рядом с содержащим их блоком, но они будут меняться из-за наличия плавающих элементов. Плавающие элементы будут расположены между IFC и блоком строки, что сделает ширину блока строки короче.
Когда общая ширина блоков встроенного уровня меньше ширины содержащих встроенных блоков, их правила горизонтального рендеринга определяются с помощью text-align.
Когда встроенный блок превышает ширину линейного блока, он разделяется на несколько блоков, которые распределяются между несколькими строковыми блоками. Если встроенный блок нельзя разделить, он переполнит встроенный блок.

IFC в основном используется для:

Строчные элементы выравниваются по центру по горизонтали в соответствии с text-align
Встроенный элемент растягивает высоту родительского элемента и центрируется по вертикали с помощью свойства vertical-align.

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

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

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

Ящики внутри БТЭ располагаются друг за другом сверху вниз. Расстояние по вертикали в BFC зависит от свойства поля, и верхнее и нижнее поля будут накладываться друг на друга. Крайняя левая граница каждого элемента касается левой стороны содержащего его блока BFC (для форматирования слева направо и наоборот). Это верно, даже если есть поплавки. Область BFC не схлопывается с рамкой плавающего элемента. На высоту БТЭ также влияет плавающий элемент, участвующий в расчете.

Следующие правила могут создать BFC:

корневой элемент или элемент, содержащий корневой элемент
Плавающие элементы (плавание элемента не равно none)
Абсолютно позиционированные элементы (позиция элемента абсолютная или фиксированная)
Встроенные блочные элементы (элемент отображается в виде встроенного блока)
Ячейка таблицы (отображение элемента — table-cell , которое по умолчанию соответствует этому значению для ячеек таблицы HTML)
Заголовок таблицы (отображение элемента — table-caption , заголовок таблицы HTML по умолчанию имеет это значение)
Анонимный элемент ячейки таблицы (отображение элемента: table , table-row , table-row-group , table-header-group , table-footer-group (атрибуты по умолчанию HTML table , row , tbody , thead , tfoot соответственно) или встроенная таблица)
блочные элементы, значение переполнения которых не видно
отображать элементы значения потока root
Элементы со содержащим значение макета, содержания или строги
Flex-элементы (display является прямым дочерним элементом flex-элемента или встроенного flex-элемента)
элемент сетки (дисплей является прямым потомком элемента сетки или встроенной сетки)
Контейнер с несколькими столбцами (количество столбцов или ширина столбца элемента не auto , в том числе количество столбцов равно 1 )
Элемент, диапазон столбцов которого равен all, всегда создает новый BFC, даже если элемент не заключен в контейнер с несколькими столбцами.

Контекст форматирования блока содержит все содержимое создавшего его элемента. Его основное использование:

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

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

Контекст форматирования Flex (Контекст форматирования Flexbox) широко известен как FFC. Когда display имеет значение flex или inline-flex , будет создан контейнер Flexbox. Контейнер создает новый контекст форматирования для своего содержимого — контекст форматирования Flex.

Обратите внимание, однако, что контейнеры Flexbox не являются блочными контейнерами (боксами блочного уровня), и следующие свойства, которые применяются к блочным макетам, не применяются к макетам flexbox:

свойства column-* в нескольких столбцах не работают с контейнерами flexbox
Свойства float и clear не влияют на гибкие элементы и не удаляют гибкие элементы из потока документов.
Свойство vertical-algin не повлияет на flex-элементы.
Псевдоэлементы ::first-line и ::first-letter не работают с контейнерами flexbox, а контейнеры flexbox не предоставляют первую отформатированную строку или первую букву для своих предков.

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

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

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

float и clear, примененные к элементам сетки, не будут иметь никакого эффекта. Но свойство float по-прежнему влияет на расчетное значение отображения дочерних элементов средства завершения сетки, потому что это происходит до того, как элементы сетки определены.
Вертикальное выравнивание, примененное к элементам сетки, также не вступит в силу
Псевдоэлементы ::first-line и ::first-letter не работают с грид-контейнерами, а грид-контейнеры не предоставляют им первую строку форматирования или первую букву форматирования.

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

В мире CSS любой элемент HTML можно преобразовать в блок. Размер блока можно определить с помощью свойств CSS (физических свойств). Размер коробки в основном определяется четырьмя атрибутами:

Контент: текст, изображения или другое мультимедийное содержимое внутри элемента.
padding : пространство между границами содержимого блока
граница: граница поля
margin : расстояние между блоком и другими блоками

Если мы используем изображение для его описания, оно может выглядеть следующим образом:

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

А в отладчике браузера "Computed" видно, как он интерпретирует блочную модель элемента:

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

Расчет высоты коробки аналогичен ширине.

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

div { 
    width: 100%; 
    padding: 1rem; 
}

Сделает div из контейнера, как на следующем изображении:

Когда мы сталкиваемся с такой сценой, нам нужно использовать свойство CSS box-sizing, которое может лучше помочь нам контролировать размер блока:

Легче понять на примере:

Вы заметили, что padding , border и margin, упомянутые выше, являются физическими характеристиками, используемыми для описания блока, и когда разработчики обсуждают модель блока, они привыкли использовать следующую диаграмму для ее иллюстрации:

Но с появлением логических свойств CSS помимо привычных нам физических свойств добавилось много новых логических свойств:

В то же время логические свойства также внесут соответствующие изменения в блочную модель CSS:

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

макет

Веб-верстка — вечная тема для разработчиков веб-интерфейса.

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

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

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

В различных сценариях проектирования позиционирование веб-элементов также эволюционирует:

Веб-дизайн 1.0 является «одномерным»: элементы дизайна в основном последовательные (в естественном порядке потока документов).
Веб-дизайн 2.0 является «двумерным»: в ячейках есть сетки для размещения элементов с большей свободой.
Веб-дизайн 3.0 — это «новое измерение»: он может располагать элементы и перекрывать друг друга так же свободно, как инструмент графического дизайна. Открывает новые перспективы для веб-дизайна. Это также откроет новую эру дизайна веб-страниц.

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

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

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

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

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

Как писать CSS

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

Существует также множество связанных фреймворков CSS (CSS Frameworks), которые помогут вам быстро писать CSS и создавать проекты:

Особенно в последние два года обсуждение в сообществе больше касается Utility-first CSS, и репрезентативной структурой в этом отношении является Tailwind CSS:

Лично я предпочитаю БЭМ и Атомик:

Что мне нравится, так это то, что **Утилитарный CSS — это Tailwind CSS.

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

Много раз Sass, Stylus и LESS часто называют препроцессорами, а PostCSS часто называют постпроцессорами, можно сказать, что они работают в тандеме:

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

Однако с появлением таких фреймворков, как React и Vue, другой голос в сообществе пишет CSS на JavaScript (то есть: CSS-in-JS):

После всего этого опыта написание и поддержка CSS также претерпели большие изменения:

Однако, как бы он ни менялся, когда мы пишем CSS, мы можем найти наиболее подходящий способ, как показано ниже. Потому что нет лучшего, есть только самое подходящее:

CSS Is Awesome

У @Brandon Smith есть запись в блоге, посвященная CSS — это круто!

Почему CSS потрясающий (очень мощный)? Я буду говорить с вами на эту тему со своей точки зрения.

CSSer (или веб-разработчик) маленького возраста не должен быть незнаком с CSS Zen Garden. Одна из самых больших особенностей CSS Zen Garden заключается в том, что на основе одной и той же структуры HTML можно достичь различных эффектов веб-интерфейса, то есть с разными стилями макета:

Это также известно как красота дизайна CSS. И есть книга на эту тему:

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

Еще один стиль, похожий на CSS Zen Garden, — это Style Stage, запущенный @Stephanie Eckles, который также может достигать того же эффекта пользовательского интерфейса на основе той же структуры HTML:

Я называю ее современным CSS Zen Garden, современной красотой дизайна CSS.

Сегодня в современной веб-разработке CSS становится все более и более мощным, и ее роль заключается не только в достижении веб-верстки, простых эффектов пользовательского интерфейса. Мы можем использовать CSS для достижения многих сложных эффектов пользовательского интерфейса в проекте:

Я назвал ее визуальной красотой CSS.

Использование свойств CSS, таких как border , box-shadow , border-radius , градиент , clip-path , transform и mask , можно напрямую использовать для рисования различных визуальных эффектов и даже для реализации некоторых сложных пользовательских интерфейсов, а также можно комбинировать с переходами CSS и анимация Сцена пользовательского интерфейса с эффектами микродвижения.

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

Еще более невероятным является то, что вы также можете рисовать с помощью CSS:

В нашей стране у г-на Юань Чуана тоже много исследований в этой области, например, г-н Юань Чуан поделился темой «Генеративное искусство с CSS» на CSSConf (Китай):

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

Кроме того, в последние годы CSS развивался очень быстро, и было введено много новых функций. Например, в теме «Что нового в CSS?», которой поделился @argyleink на четвертом мероприятии CSS в Лондоне (LondonCSS 2020), упоминалось множество новых функций CSS:

Упоминается в ПП:

Пользовательские свойства CSS
Логические свойства CSS
Режим записи CSS
Свойство пробела в CSS
Макет CSS Grid и вложенная сетка
Захват прокрутки CSS
Новые медиа-возможности CSS
Селекторы CSS Уровень 4

На основе этого я реорганизовал новую статью, в которой представил около 24 функций, связанных с CSS.

Кроме того, при обмене я также пропустил тему, которая является Houdini CSS, Меня очень интересует этот аспект. В этом году на GDS-конференции @Una Kravets поделилась темой по этому поводу, а также запустила сайт houdini.how в SAR, собрав демонстрационный набор Paint API и построение пользовательских свойств в CSS Houdini:

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

Если вас интересует этот аспект, вы также можете отправить свою демоверсию в репозиторий Github.

Как выучить CSS

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

Я думаю, какие бы знания ты ни усвоил, ты должен быть неразлучен с книгами! Что касается CSS, я думаю, что есть несколько книг, на которые стоит потратить время, например:

Если вы не новичок в CSS, в W3C есть несколько документов по спецификациям CSS, которые стоит прочитать:

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

В дополнение к чтению спецификаций, также стоит прочитать много отличных блогов в сообществе:

В китайском сообществе есть блоги о CSS, особенно рекомендуемые:

Пространство Синь учителя Чжан Синьсюй, Жизнь Синь
Любовь учителя Чоккоко CSS (ICSS)

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

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

Если вам нужен этот список RSS, вы можете сохранить его в тайне!

Если вам не нравится использовать RSS, вы также можете использовать некоторые расширения браузера, такие как браузер Chrome, у меня есть целый Daily.dev:

Есть еще один способ получить информацию — подписаться на интересующие вас репозитории на Github или следовать за некоторыми великими богами в отрасли:

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

Выше написано все о чтении и чтении.Этого недостаточно.Надо еще и писать больше.

Чтобы написать демо, я часто пишу несколько демо на Codepen, будь то проверка, креатив или практика. Мне нравится писать на нем:

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

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

Я обычно начинаю с классификации проблемы:

я понимаю
кажется, я понимаю
я не понимаю
меня интересует

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

Сейчас должен быть последний день 2020 года. Вспомнив, что я веду блог уже десять лет с тех пор, как основал W3cplus в 2010 году, и написал почти 1561 статью:

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

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

Заменит ли ИИ CSSer?

Ближе к концу года я сам перешел из интерактивной команды, в которой проработал пять лет, в команду F(x) Team Департамента Дао. Начался новый путь, и новая команда в основном работает над техническим продуктом: imgcook

Вы также можете найти его на Github!

Если вам интересно, вы можете прийти и испытать это первым! Если у вас возникнут проблемы с imgcook, вы можете сохранить их в тайне!

Наконец, оставьте тему, я надеюсь, что студенты, которым интересна эта тема, смогут обсудить ее вместе:

«Заменит ли в ближайшем будущем ИИ CSSer?»