[Вопросы для интервью] Разбираемся в вопросах знаний CSS (с ответами)

Статья публикуется впервыеличный блог

содержание

1. Псевдоклассы и псевдоэлементы
2. Реализует фиксированное соотношение сторон (width: height = 4: 3) div, как установить
3. Селекторы CSS
4. Правила анализа CSS
5. flex: 1полное написание
6. display: noneа такжеvisibility:hiddenразница
7. em rem vh vw calc() line-heightпроцент
8. remПринцип реализации и соответствующая схема расчета
9. Чистый плавающий метод и принцип
10. postcssчто
11. css modules
12. CSSпрепроцессор
13. в CSSvertical-alignКаковы ценности? При каких обстоятельствах он вступает в силу?
14. BFC (контекст блочного форматирования)
15. Реализация общих макетов

1. Псевдоклассы и псевдоэлементы

Зачем вносить?

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

псевдокласс

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

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

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

Требования к спецификации CSS3 используют двойную толку (:) для представления псевдо элементов для различения псевдоэлементов и псевдо-класса, такие как :: до и :: после 元 元 元 (: :),: hover и: активное ожидание Для использования одной толстой кишки (:). Хотя стандарт CSS3 требует псевдоэлементов для использования двойного карантина, оно все еще поддерживает однорезанный напиток.

Обобщение псевдоклассов и псевдоэлементов

2. Как установить div с фиксированным соотношением сторон (ширина: высота = 4:3)

используя csspaddingКак рассчитать процент:paddingЗадается в процентах, то есть ширина элемента, умноженная на100%в результатеpaddingстоило того.

существуетdivизwidthДля фиксированного случая установитеheightдля0, сделайте естественное переполнение содержимого, а затем установитеpadding-bottomСделайте элемент определенной высоты.

.element {
    /* 16:9宽高比，则设padding-bottom:56.25% */
    /* height: 0px, 防止矩形被里面的内容撑出多余的高度*/
    width: 100vw; 
    height: 0px; 
    padding-bottom: 56.25%;
    background: pink;
}

использоватьpadding-topилиpadding-bottomЗадайте в процентах для достижения определенного соотношения высоты к ширине. потому что, когдаmargin/paddingПри взятии значений в виде процентов либоleft/right,ещеtop/bottom, все начинается с родительского элементаwidthдля справки!

css реализует соотношение сторон

3. Селекторы CSS

• Универсальный селектор (*)
• Селектор тегов (div)
• селектор класса (.wrap)
• селектор идентификатора (#wrap)
• селектор атрибутов (E[att], E[att=val], E[att~=val])
  • E[att]: соответствует всем элементам E с атрибутом att, независимо от его значения.
  • E[att=val]: соответствует всем элементам E, чей атрибут att равен «val».
  • E[att~=val]: соответствует всем элементам E, чей атрибут att имеет несколько значений, разделенных пробелами, одно из которых равно «val».
• Смежный селектор (h1 + p)
• дочерний селектор (ul > li)
• селектор потомков (li a)
• Селектор псевдокласса
  • E:first-child: соответствует первому дочернему элементу родительского элемента.
  • E:ссылка соответствует всем ненажатым ссылкам
  • E:focus соответствует элементу E, который имеет текущий фокус
  • E:not(s) Инвертировать псевдокласс выбора, сопоставляя любой элемент, который не соответствует текущему селектору.

ПодробнееПримечания к селектору CSS

Приоритет селектора (принцип ближайшего): !important > [id > class > tag]

4. Правила парсинга CSS

Селекторы CSSРазобрать справа налево.

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

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

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

Например:

.mod-nav h3 span { font-size: 16px; }

Почему правило справа налево более эффективно, чем правило слева направо?

При сопоставлении слева направо процесс следующий: от.mod-navЗапуск, обход дочерних узловheaderи дочерние узлыdiv, а затем перейдите к дочерним узлам. справаdivВ ветви и, наконец, перейдите к конечному узлуaобнаружено, что он не соответствует правилам и должен быть возвращенulузел, затем следующий ходli-a, если их 1000li, то это1000Количество обходов и возвратов будет стоить много производительности.

Посмотрите на сопоставление справа налево: сначала найдите все самые правые промежутки узлов для каждогоspan, поиск узлаh3,Зависит отh3Поглядиclass=mod-nav, и, наконец, найдите корневой элемент html, чтобы завершить обход этой ветки.

Очевидно, что производительность двух правил сопоставления сильно различается. Причина большой разницы в том, что сопоставление справа налево отфильтровывает большое количество самых правых узлов (листовых узлов), которые не удовлетворяют условиям на первом шаге; и производительность правил сопоставления слева направо тратится впустую в неудачном поиске выше.

Ответ исходит отПравила соответствия селектора CSS справа налево

5. flex: 1 полное письмо

Концепции гибкого макета: Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items».

flex: 1 полное написание

flexсобственностьflex-grow, flex-shrinkа такжеflex-basis, значение по умолчанию0 1 auto. Последние два свойства являются необязательными.

flex-growСвойство определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, он не будет увеличен.

flex-shrinkСвойство определяет коэффициент уменьшения элемента, по умолчанию равен 1, то есть если места недостаточно, элемент будет уменьшен.

flex-basisСвойство определяет основной размер, который занимает элемент перед выделением лишнего пространства. На основе этого свойства браузер вычисляет, есть ли лишнее место на главной оси. Его значение по умолчанию — auto, что соответствует исходному размеру элемента.

Учебное пособие по гибкому макету: синтаксис,Учебное пособие по Flex Layout: примеры

6. Разница между отображением: нет и видимостью: скрыто

1. Занимает ли место

   • display: none не занимает место
   • видимость: скрытый занимает место

2. нужно ли рендерить

   • display:none, вызовет перекомпоновку (reflow) для рендеринга.
   • видимость: скрыта, запускает только перерисовку (перерисовку), т. к. изменение положения не найдено, рендеринг не выполняется.

3. Является ли это унаследованным имуществом (объединением)

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

7. em rem vh vw calc(), высота строки в процентах

em

em: относительная единица, ссылка — это размер шрифта родительского элемента, который имеет характеристики наследования. Если размер шрифта 16 пикселей (по умолчанию в браузере), то 1em = 16 пикселей.

rem

rem: относительная единица, которую можно понимать как "root em", которая рассчитывается относительно размера шрифта корневого узла html. Она не будет зависеть от размера шрифта родительского элемента, такого как em, что вызовет путаницу

вв и вх

vw: ширина точки обзора, ширина окна просмотра, 1vw равно 1% ширины окна просмотра.

vh: высота точки обзора, высота окна просмотра, 1vh равна 1% высоты окна просмотра.

vmin: взять меньшее значение текущих vw и Vh, vmax: взять большее значение текущих Vw и Vh

Разница между vw, vh и % в процентах:

• % — это соотношение относительно размера родительского элемента, а vw и vh определяются размером области просмотра.
• Преимущество VW и VH заключается в том, что они могут напрямую получить высоту, но с использованием% без установки высоты тела не могут правильно получить высоту видимой области, так что это хорошее преимущество.

calc()

calc(): новая функция в CSS3, используемая для динамического вычисления ширины/высоты, синтаксис очень прост, как и в молодости, когда мы учились складывать (+), вычитать (-), умножать (*) и разделить (/), использовать математические выражения для выражения

• Используйте «+», «-», «*» и «/» четыре арифметических операции;
• Можно использовать проценты, px, em, бэр и другие единицы измерения;
• Различные единицы могут быть смешаны для расчета;
• Когда в выражении есть "+" и "-", перед ними и после них должны быть пробелы, например "width: calc(12%+5em)" без пробелов неверно;

процент высоты строки

можно смотреть напрямуюMDNСвязанные пояснения по:

Свойство line-height задается одним из следующих способов:

• a : применяемое значение этого атрибута представляет собой безразмерное число , умноженное на размер шрифта элемента.
• A : относительно размера шрифта самого элемента. Вычисленное значение представляет собой заданное процентное значение, умноженное на вычисленный размер шрифта элемента.
• a : должно быть px, em и т. д., подробности см.Длина CSS
• Ключевое слово обычное.

8. Принцип реализации Rem и соответствующая схема расчета

Суть макета rem заключается в пропорциональном масштабировании, обычно основанном на ширине.

Основы, которые нужно знать:

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">

3. dpr, dpr — это соотношение пикселей устройства, то есть количество пикселей, которое может быть отображено на 1 пиксель в CSS. Чем больше значение dpr, тем четче изображение; window.devicePixelRatio получает dpr текущего устройства.

Принцип rem для достижения адаптации:

• Основная идея: Процентный макет может обеспечить адаптивный макет, а rem эквивалентен процентному макету.
• Принцип реализации: Динамически получить текущую ширину окна просмотра, разделить ее на фиксированное число n и получить значение rem. Выражение rem = ширина / n.
• При использовании этого метода размер rem всегда равен n равным частям ширины.

Схема расчета:

1. Установите коэффициент масштабирования через dpr, чтобы достичь размера области просмотра макета.

var scale = 1 / devicePixelRatio;  
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+ scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2. Динамически вычислить размер шрифта html

// 设置根元素字体大小。此时为宽的100等分
document.documentElement.style.fontSize = ocument.documentElement.clientWidth / 100 + 'px';

В реальном процессе разработки вы можете использоватьlib-flexibleБиблиотека, но если слишком громоздко каждый раз вручную считать при записи, можем настроить в webpackpx2rem-loader, илиpxrem-loader, основной принцип заключается в том, что вам нужно настроить правила расчета px в rem самостоятельно, а непосредственно рассчитывать и преобразовывать в rem при редактировании. Поэтому при разработке пишите px прямо по размеру эскиза дизайна, а он после компиляции сразу конвертируется в rem;

Рекомендуемые статьи, связанные с Ремом:

• Принцип верстки адаптации разработки мобильной страницы
• Использование Flexible для реализации терминальной адаптации страниц H5 Taobao
• Принципиальный анализ Rem Layout

9. Метод и принцип прозрачного плавания

Почему вы хотите очистить поплавок: внутренняя высота родительского элемента равна 0 из-за плавающего элемента дочернего элемента.

Существует четыре распространенных способа очистки поплавков:

1. Отецdivопределениеheight
2. Метод дополнительного тега: вставьте элемент div блочного уровня без содержимого в конец плавающего родительского элемента и добавьте стили.clear:both.
3. Использование псевдоэлементов: псевдокласс определения родительского элемента div: после этого мы можем написать.clearfixСтиль инструмента, когда вам нужно очистить поплавок, добавьте к нему этот класс.clearfix:after { display: block; clear :both; content: '';}.
4. родитель добавитьoverflowАтрибуты: добавьте стили к родительскому тегу, содержащему плавающий элемент.overflowдляhiddenилиautoЗапуская способ BFC для достижения четкого плавания

Четыре способа очистки поплавка и его принцип понимания

10. postcss

Все мы знаем о существовании «babel», который позволяет нам использовать относительно новый синтаксис js, а postcss можно понимать как «babel» CSS, который позволяет нам использовать относительно новый синтаксис CSS.

postcss — это не препроцессор CSS, как less, а инструмент, который позволяет плагинам JS преобразовывать стили. postcss предоставляет синтаксический анализатор, способный преобразовывать CSS в абстрактное синтаксическое дерево (AST).

Общие плагины для postcss

• autoprefixer: Плагин autoprefixer проверит ваш CSS-код на совместимость с CanIUse, а затем автоматически добавит частный префикс производителя браузера в ваш CSS-код.
• precss
• postcss-cssnext
• Что, черт возьми, такое PostCSS?

11. css modules

Роль css-модулей:

• Способ избежать наложения CSS друг на друга, CSS-модули добавляют локальную область видимости и зависимости модуля.

Принцип реализации:

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

Учебник по использованию модулей CSS

12. Препроцессор css

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

Самые популярные препроцессоры CSS

• less
• sass
• stylus
• postcss

13. Какие значения вертикального выравнивания в CSS? При каких обстоятельствах он вступает в силу?

можно смотреть напрямуюMDNПояснение выше:

Необходимо обратить внимание на его эффективные условия:

• Встроенные элементы span, strong, em, img, button, input и т. д.
• Элементы, чье значение отображения встроено, встроенный блок, встроенный стол или таблица-ячейка
• Обратите внимание, что плавающее и абсолютное позиционирование сделает элемент блочным, поэтому этот элемент никогда не вступит в силу.

14. BFC (контекст блочного форматирования)

концепция

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

Запустить BFC

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

• корневой элемент (<html>)
• Плавающие элементы (плавание элемента не равно нулю)
• Абсолютно позиционированные элементы (позиция элемента абсолютная или фиксированная)
• Элементы встроенного блока (отображение элемента в виде встроенного блока)
• блочные элементы, значение переполнения которых не видно

10 минут, чтобы понять принципы BFC, Документация MDN

15 Реализация общей компоновки

• Центрируется по горизонтали и вертикали
• макет в два столбца

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

1. гибкий макет: настройки родительского элементаdisplay: flex; justify-content: center; slign-items: center
2. position: absolute + transform: translate(-50%, -50%), translate основан на ширине и высоте самого элемента для расчета процента, поэтому то же самое относится и к случаю, когда ширина и высота не фиксированы.
3. position: absolute + let: 0; right: 0; top: 0; bottom: 0; margin: auto;

макет в два столбца

Левая ширина фиксированная, правая ширина адаптивная

• Перемещаясь влево, следующий элемент займет исключительную позицию и выстроится в линию
• Левый элемент плавает, правый элемент устанавливаетсяwidth: 100%; padding-left:leftширина элемента; Ширина справа фиксированная, ширина слева адаптивная
• И левый, и правый плавающие, и левый адаптивный элемент устанавливается на 100% ширины внешнего div, так что он будет занимать одну строку, а затем внутренний слой устанавливается на правое поле, а положение правого элемент освобожден

макет в три колонки

Средняя адаптивная, левая и правая стороны фиксируются следующими способами

• гибкий макет:display: flex; ustify-content: space-between;
• Реализация положения: установить абсолютное позиционирование слева и справа, установить самый внешний div (устанавливается относительно родительского элемента, позиционируется относительно самого внешнего слоя);
  • Обратите внимание, что абсолютно позиционированные элементы покидают поток документа и позиционируются относительно ближайшего позиционированного элемента, независимо от порядка структуры в HTML.
  • Недостатки: есть проблема с выравниванием по верхнему краю, которую необходимо отрегулировать.Обратите внимание, что высота посередине — это высота всего содержимого.
• Реализация с плавающей запятой: средний контент должен быть размещен в конце html-структуры, иначе правая сторона будет опускаться ниже среднего контента.
  • Принцип: после того, как элемент размещен, он отделяется от потока документа, и следующие элементы затрагиваются плаванием.Просто установите значение поля затронутого элемента.
• Макет Святого Грааля и макет двойного крыла

Макет Святого Грааля и макет двойного крыла

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

Макет Святого Грааля

• 1. Все три настроены на плавание влево
• 2. Установите среднюю ширину на 100%;
• 3. Установите отрицательный край, оставить отрицательный левый запас до 100%, правая установка негативного левого поля к негативной ширине
• 4. Установите значение заполнения содержимого, чтобы оставить место для левой и правой подпанелей.
• 5. Установите две вспомогательные панели так, чтобы они располагались относительно друг друга,left面板Левое значение отрицательноеleft面板ширина,right面板Правильное значение отрицательноеright面板значение

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

Двухстворчатая компоновка

• 1. Все три настроены на плавание влево.
• 2. Установите среднюю ширину на 100%.
• 3. Установите отрицательное поле, слева установите отрицательное левое поле на 100%, справа установите отрицательное левое поле на отрицательную собственную ширину
• 4. Установите значение поля для среднего содержимого, чтобы оставить место для левой и правой подпанелей.

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

• 1. Макет с двойным летающим крылом добавляет родительский тег к основной панели (средний элемент), чтобы освободить место для вспомогательной панели через поле.
• 2. Макет Holy Grail использует отступы, а поля, используемые в макете с двойным летающим крылом, решают проблему макета Holy Grail.
• 3. Компоновке двойного летающего крыла не нужно задавать относительную компоновку, а также соответствующие левые и правые значения

Детальный видРеализация общих макетов CSS

разбитые мысли

Эти CSS-вопросы на самом деле несложные, и они часто встречаются при нормальной разработке. Их не запомнить путем механического заучивания. Нужно постучаться самостоятельно, чтобы понять и запомнить их глубоко. Они действительно растворяются в ваших собственных знаниях. Многие слова (такие как BFC, макет Святого Грааля, макет с двойным летающим крылом и т. д.) Я не знал, что это такое, когда впервые услышал это, и мне было трудно понять это из названия, но я прочитал его несколько раз, пойми это и запомни, когда увидишь.

Описание на MDN является авторитетным, поэтому вы можете напрямую просмотреть описание на MDN.

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

Рекомендуемые статьи, связанные с CSS

• 50 вопросов интервью по основам CSS (с ответами)
• 49 пунктов знаний CSS, о которых вы могли не знать
• Знания CSS, о которых вы могли не знать (2-й сезон)
• Личное резюме (новые функции css3)
• CSS мир основ внешнего интерфейса

разное

Недавно был запущен 100-дневный расширенный план, в основном для того, чтобы углубиться в принципы, лежащие в основе каждой точки знаний. Добро пожаловать в общедоступный аккаунт WeChat «Звезда Мусимы». Давайте учиться вместе и пробиться в течение 100 дней.