Сводка вопросов по высокочастотным фронтенд-интервью «2021» CSS статьи

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

Статьи из серии вопросов для фронтенд-интервью:

【1】HTML-глава "2021" с высокочастотными вопросами для фронтенд-интервью

【2】Сводка вопросов по высокочастотным фронтенд-интервью «2021» CSS статьи

【3】Глава "2021" о JavaScript, посвященная высокочастотным вопросам для фронтенд-интервью (часть 1)

【4】Резюме статьи JavaScript "2021" о часто задаваемых вопросах на собеседовании (часть 2)

【5】Глава Vue "2021" о часто задаваемых вопросах на собеседовании (часть 1)

【6】Глава Vue "2021" о часто задаваемых вопросах на собеседовании (часть 2)

【7】Сводка вопросов по высокочастотным фронтенд-интервью «2021» React (часть 1)

【8】Сводка вопросов по высокочастотным фронтенд-интервью «2021» React (часть 2)

【9】Резюме вопросов высокочастотного внешнего интервью "2021" компьютерной сети

【10】«2021» высокочастотные вопросы о фронтенд-интервью краткое изложение принципов браузера

【11】Сводка вопросов по оптимизации производительности высокочастотных предварительных интервью «2021»

【12】«2021» Рукописный свод кода высокочастотных вопросов на собеседовании перед интерфейсом

【13】Сводные результаты вывода кода высокочастотных вопросов внешнего интервью «2021»

1. Основы CSS

1. Селекторы CSS и их приоритеты

Селектор	Формат	приоритетный вес
селектор идентификатора	#id	100
селектор класса	#classname	10
селектор атрибутов	а[ref="еее"]	10
Селектор псевдокласса	li:last-child	10
Селектор тегов	div	1
Селектор псевдоэлементов	li:after	1
селектор соседнего брата	h1+p	0
дочерний селектор	ul>li	0
селектор потомков	li a	0
Селектор подстановочных знаков	*	0

для селектораприоритет:

• Селекторы тегов, селекторы псевдоэлементов: 1
• Селекторы классов, селекторы псевдоклассов, селекторы атрибутов: 10
• селектор идентификатора: 100
• Встроенные стили: 1000

Меры предосторожности:

• Стиль, объявленный !important, имеет наивысший приоритет;
• Если приоритет тот же, применяется стиль, появившийся последним;
• Унаследованные стили имеют самый низкий приоритет;
• Общий селектор (*), подселектор (>) и смежный селектор (+) не находятся на этих четырех уровнях, поэтому все их веса равны 0;
• Если источник таблицы стилей отличается, порядок приоритета следующий: Встроенные стили > Внутренние стили > Внешние стили > Пользовательские стили браузера > Стили браузера по умолчанию.

2. Что такое наследуемые и ненаследуемые свойства в CSS

1. Ненаследуемые свойства

1. display: указывает тип блока, который должен создавать элемент.
2. текстовый атрибут:

• вертикальное выравнивание: выравнивание текста по вертикали
• text-decoration: определяет украшение, добавляемое к тексту
• text-shadow: эффект тени текста
• white-space: Обработка пробельных символов.
• unicode-bidi: установить направление текста

3. Свойства блочной модели: ширина, высота, поле, граница, отступ
4. фоновое свойство: background, background-color, background-image, background-repeat, background-position, background-attachment
5. свойства таргетинга: float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip, z-index
6. Создание свойств содержимого: содержимое, сброс счетчика, приращение счетчика
7. Свойства стиля контура: стиль контура, ширина контура, цвет контура, контур
8. свойства стиля страницы: размер, разрыв страницы до, разрыв страницы после
9. свойства звукового стиля: пауза-до, пауза-после, пауза, реплика-до, реплика-после, реплика, воспроизведение-во время

2. Унаследованные свойства

1. Свойства семейства шрифтов

• семейство шрифтов: семейство шрифтов
• font-weight: вес шрифта
• размер шрифта: размер шрифта
• стиль шрифта: стиль шрифта

2. Свойства текстовой серии

• text-indent: отступ текста
• text-align: горизонтальное выравнивание текста
• высота строки: высота строки
• word-spacing: расстояние между словами
• letter-spacing: китайский или расстояние между буквами
• text-transform: управлять регистром текста (то есть прописными, строчными, заглавными буквами этих трех)
• цвет: цвет текста

3. видимость элемента

• видимость: управляет отображением и скрытием элемента.

4. Список свойств макета

• стиль списка: стиль списка, включая тип стиля списка, изображение стиля списка и т. д.

5. свойства курсора

• курсор: в какой форме отображается курсор

3. Значение атрибута дисплея и его функция

значение атрибута	эффект
none	Элемент не отображается и удаляется из документооборота.
block	тип блока. Ширина по умолчанию — это ширина родительского элемента, вы можете установить ширину и высоту и отобразить их в новой строке.
inline	Тип встроенного элемента. Ширина по умолчанию — это ширина содержимого, ширину и высоту нельзя задать, и они отображаются в одной строке.
inline-block	Ширина по умолчанию — это ширина содержимого, вы можете установить ширину и высоту и отобразить их в одной строке.
list-item	Отображается как элемент блочного типа и добавляет стилизованную разметку списка.
table	Этот элемент отображается в виде таблицы на уровне блоков.
inherit	Указывает, что значение свойства display должно быть унаследовано от родительского элемента.

4. Разница между блоком отображения, встроенным и встроенным блоком

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

(2)в линию:Элемент не будет занимать строку сам по себе, и установка атрибутов ширины и высоты недействительна. Однако свойства поля и отступа в горизонтальном направлении можно задать, но нельзя задать отступ и отступ в вертикальном направлении;

(3)встроенный блок:Установите объект как встроенный объект, но содержимое объекта отображается как блочный объект, а последующие встроенные объекты будут располагаться на той же строке.

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

(1) Строчные элементы

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

(2) Элементы блочного уровня

• Ширина и высота могут быть установлены;
• Установка полей и отступов допустима;
• Может автоматически обертывать;
• Несколько блоков, расположенных сверху вниз по умолчанию.

5. Какие есть способы скрыть элементы

• display: none: дерево рендеринга не будет содержать объект рендеринга, поэтому элемент не будет занимать позицию на странице и не будет реагировать на связанные события прослушивателя.
• visibility: hidden: элемент по-прежнему занимает место на странице, но не отвечает на связанные события прослушивателя.
• opacity: 0: Установите прозрачность элемента на 0, чтобы скрыть элемент. Элементы по-прежнему занимают место на странице и могут реагировать на события прослушивателя, связанные с элементом.
• position: absolute: скрыть элемент, удалив его из видимой области с помощью абсолютного позиционирования.
• z-индекс: отрицательное значение: чтобы другие элементы закрывали элемент для достижения скрытия.
• clip/clip-path: Используйте метод отсечения элемента, чтобы скрыть элемент. В этом методе элемент по-прежнему занимает позицию на странице, но не реагирует на связанное событие прослушивания.
• transform: scale(0,0): Масштабируйте элемент до 0, чтобы скрыть элемент. При таком подходе элемент по-прежнему занимает позицию на странице, но не отвечает на связанные события прослушивателя.

6. Разница между ссылкой и @import

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

• link — это тег XHTML, помимо загрузки CSS, он также может определять другие действия, такие как RSS; @import относится к категории CSS и может загружать только CSS.
• Когда ссылка ссылается на CSS, она загружается одновременно с загрузкой страницы; @import требует, чтобы страница загружалась после полной загрузки страницы.
• ссылка является тегом XHTML, и проблем с совместимостью нет; @import предлагается в CSS2.1, который не поддерживается более ранними версиями браузеров.
• link поддерживает использование Javascript для управления DOM для изменения стилей, а @import — нет.

7. Разница между переходом и анимацией

• переход - это переходное свойство, слишком подчеркнуто, его реализация должна инициировать событие (например, движение мыши вверх, фокус, щелчок и т. д.) для выполнения анимации. Это похоже на tween-анимацию flash, которая устанавливает начальный ключевой кадр и конечный ключевой кадр.
• анимация - это свойство анимации, его реализации не нужно запускать события, он может выполняться сам после установки времени и может зацикливать анимацию. Она также похожа на tween-анимацию Flash, но может устанавливать несколько ключевых кадров (определяемых с помощью @keyframe) для завершения анимации.

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

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

(1)в дереве рендеринга

• display:noneэлемент полностью исчезнет из дерева рендеринга и не будет занимать место при рендеринге;
• visibility:hiddenЭлемент не исчезнет из дерева рендеринга, визуализированный элемент по-прежнему будет занимать соответствующее место, но содержимое не будет видно.

(2)Является ли это наследственным имуществом

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

(3) Изменить элементы в обычном потоке документовdisplayОбычно приводит к перестановке документа, но измененияvisibilityАтрибут вызовет только перерисовку этого элемента;

(4) Если вы используете программу чтения с экрана, установитеdisplay:noneСодержимое не будет прочитано, установитеvisibility:hiddenконтент будет прочитан.

9. В чем разница и роль псевдоэлементов и псевдоклассов?

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

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

• Псевдоклассы: добавление специальных эффектов к определенным селекторам. Он добавляет категории к существующим элементам и не создает новые элементы. Например:

a:hover {color: #FF00FF}
p:first-child {color: red}

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

10. Понимание запросаAnimationframe

Есть много способов добиться анимационных эффектов: в Javascript это можно сделать с помощью таймера setTimeout, в CSS3 можно использовать переходы и анимацию, а в HTML5 можно также использовать холст. Кроме того, HTML5 предоставляет API, предназначенный для анимации запросов, то есть requestAnimationFrame, как следует из названия.запрос кадра анимации.

Описание метода MDN:

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

грамматика: window.requestAnimationFrame(callback);где обратный вызовФункция, вызываемая для обновления кадра анимации перед следующей перерисовкой(то есть функция обратного вызова, упомянутая выше). В callback-функцию будет передан параметр DOMHighResTimeStamp, который указывает момент, когда requestAnimationFrame() начинает выполнять callback-функцию. Этот метод принадлежитзадача макроса, поэтому он будет выполнен после выполнения микрозадачи.

Отменить анимацию:Используйте CancelAnimationFrame() для отмены выполнения анимации.Этот метод получает параметр - идентификатор, возвращаемый requestAnimationFrame по умолчанию.Вам нужно только передать этот идентификатор, чтобы отменить анимацию.

Преимущество:

• Энергосбережение процессора: Анимация, реализованная SetTinterval, когда страница скрыта или свернута, SetTinterval по-прежнему выполняет задачи анимации в фоновом режиме. Поскольку страница в это время невидима или недоступна, бессмысленно обновлять анимацию, что является пустой тратой ресурсов процессора. Ресурсы. RequestAnimationFrame совершенно другой. Когда обработка страницы не активирована, задача обновления экрана страницы также будет приостановлена ​​системой, поэтому RequestAnimationFrame, который следует за системой, также прекратит рендеринг. Когда страница активирована, анимация будет остановить по сравнению с прошлым разом. Место продолжает выполняться, что эффективно снижает нагрузку на ЦП.
• регулирование функции: в высокочастотных событиях (изменение размера, прокрутка и т. д.), чтобы предотвратить выполнение нескольких функций в течение интервала обновления, RequestAnimationFrame может гарантировать, что функция выполняется только один раз в каждом интервале обновления, что может не только обеспечить беглость, но и Кроме того, лучше сэкономить накладные расходы на выполнение функции.Не имеет смысла выполнять функцию несколько раз в течение интервала обновления, потому что большинство мониторов обновляются каждые 16,7 мс, и многократное рисование не будет отражаться на экране.
• Уменьшите манипуляции с DOM: requestAnimationFrame соберет все операции DOM в каждом кадре, завершив их за одну перерисовку или перекомпоновку, а временной интервал перерисовки или перекомпоновки близко соответствует частоте обновления браузера, вообще говоря, эта частота составляет каждые 60 кадров в секунду.

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

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

11. Понимание блочной модели

В CSS3 есть два типа блочных моделей: стандартная блочная модель и блочная модель IE. Блочная модель состоит из четырех частей: поля, границы, заполнения и содержимого.

Отличие стандартной блочной модели от блочной модели IE в том, что при задании ширины и высоты соответствующие диапазоны различаются:

• Объем свойств ширины и высоты стандартной блочной модели включает только содержимое,
• Объем свойств ширины и высоты блочной модели IE включает границы, отступы и содержимое.

Блочную модель элемента можно изменить, изменив свойство box-sizing элемента:

• box-sizeing: content-boxпредставляет стандартную блочную модель (по умолчанию)
• box-sizeing: border-boxПредставляет блочную модель IE (странная блочная модель)

12. Почему вы иногда используетеtranslateизменить местоположение вместо позиционирования?

translate — это значение свойства преобразования. Изменение преобразования или непрозрачности не вызывает переформатирование или перерисовку браузера, а только композиции. А изменение абсолютного позиционирования приводит к изменению макета, что, в свою очередь, приводит к перерисовке и композитингу. transform заставляет браузер создать слой графического процессора для элемента, но изменение абсолютного позиционирования использует центральный процессор. Следовательно, translate() более эффективен и может сократить время отрисовки плавной анимации. Когда перевод меняет положение, элемент по-прежнему занимает исходное место, чего не происходит при абсолютном позиционировании.

13. Что вызывает невидимое белое пространство между li и li? Как решить?

Браузеры отображают пробельные символы (пробелы, новые строки, табуляции и т. д.) между встроенными элементами как один пробел. Для эстетики обычно<li>в одной строке, что приводит к<li>Символ новой строки генерируется после новой строки, которая становится пробелом и занимает ширину одного символа.

Решение:

(1) есть<li>Установить поплавок: влево. Недостаток: некоторые контейнеры нельзя сделать плавающими, например, карту фокуса, которая переключается влево и вправо.

(2) положить все<li>написано в одной строке. Недостаток: код не красивый.

(3) будет<ul>Размер символа внутри прямо установлен на 0, то есть размер шрифта: 0. недостаточный:<ul>Другие размеры символов в также установлены на 0, а другие размеры символов необходимо дополнительно сбросить, а в браузере Safari по-прежнему будут появляться пробелы.

(4) Устранить<ul>Расстояние между символами letter-spacing: -8px, недостаточно: это также устанавливает<li>пространство символов внутри<li>Межсимвольный интервал внутри установлен на значение по умолчанию letter-spacing:normal.

14. Что нового в CSS3

• Добавлены различные селекторы CSS (: not(.input): все узлы, чей класс не является «входным»)
• Закругленные углы (радиус границы: 8 пикселей)
• многоколоночный макет
• отражение тени
• Текстовые эффекты (текст-тень)
• Текстовое оформление
• Линейный градиент (градиент)
• Повернуть (преобразовать)
• Добавлено вращение, масштабирование, позиционирование, наклон, анимация, несколько фонов.

15. Понятие и правила расчета сменных элементов

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

В дополнение к возможности замены контента, замещающий элемент имеет следующие функции:

• Внешний вид контента не зависит от CSS на странице.: С профессиональной точки зрения стиль выражается за рамками CSS. Чтобы изменить внешний вид самого замещающего элемента, требуется что-то вроде свойства внешнего вида или некоторого стиля интерфейса, предоставляемого самим браузером.
• имеет свой размер: в Интернете многие замещающие элементы имеют размер по умолчанию (исключая границы) 300 пикселей × 150 пикселей без явных настроек размера, таких как
• Имеет собственный набор правил представления для многих свойств CSS.: более репрезентативным является атрибут вертикального выравнивания.Интерпретация значения атрибута вертикального выравнивания отличается для заменяемых и незаменяемых элементов. Например, базовая линия значения по умолчанию вертикального выравнивания, очень простого значения атрибута, значения базовой линии, определяется как нижний край символа x, в то время как базовая линия замещающего элемента резко определяется как нижняя граница. край элемента.
• Все заменяемые элементы являются встроенными горизонтальными элементами.: То есть элементы замены и элементы замены, элементы замены и текст могут отображаться в одной строке. Однако отображаемое значение по умолчанию для замещающего элемента отличается, некоторые из них являются встроенными, некоторые — встроенными блоками.

Размеры заменяемых элементов изнутри наружу делятся на три категории:

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

Правила расчета трехслойной конструкции следующие: (1) Если нет размера CSS и размера HTML, внутренний размер используется в качестве окончательной ширины и высоты. (2) Если размер CSS отсутствует, в качестве конечной ширины и высоты используется размер HTML. (3) Если есть размер CSS, окончательный размер определяется свойством CSS. (4) Если «внутренний размер» содержит внутреннее соотношение сторон, и одновременно установлены только ширина или высота, элемент все равно будет отображаться в соответствии с внутренним соотношением сторон. (5) Если ни одно из вышеперечисленных условий не выполняется, окончательная ширина составляет 300 пикселей, а высота — 150 пикселей. (6) Встроенные замещающие элементы и замещающие элементы на уровне блоков используют один и тот же набор правил расчета размера, описанный выше.

16. Распространенные форматы изображений и сценарии использования

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

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

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

(4)PNG-8представляет собой растровое изображение без потерь, в котором используются индексированные цвета. PNG является относительно новым форматом изображения. PNG-8 является очень хорошей заменой формата GIF. Там, где это возможно, следует использовать PNG-8 вместо GIF, потому что при том же эффекте изображения PNG-8 имеет меньший размер файла. Кроме того, PNG-8 также поддерживает регулировку прозрачности, а GIF не поддерживает. Нет причин использовать GIF вместо PNG-8, если только не требуется поддержка анимации.

(5)PNG-24Растровое изображение без потерь, использующее прямой цвет. Преимущество PNG-24 заключается в том, что он сжимает данные изображения, так что размер файла формата PNG-24 намного меньше, чем размер файла BMP для изображений с тем же эффектом. Конечно, изображения PNG24 по-прежнему намного больше, чем изображения JPEG, GIF и PNG-8.

(6)SVGпредставляет собой векторное изображение без потерь. SVG, будучи векторной графикой, означает, что изображение SVG состоит из линий и кривых и метода их рисования. При увеличении изображения SVG вы по-прежнему видите линии и кривые вместо пикселей. Изображения SVG не будут искажаться при увеличении, поэтому подходят для рисования логотипов, иконок и т. д.

(7)WebPЭто новый формат изображения, разработанный Google.WebP — это растровое изображение, которое поддерживает сжатие как с потерями, так и без потерь и использует прямой цвет. Из названия видно, что он рожден для Сети, что рождено для Сети? То есть изображения того же качества, WebP имеет меньший размер файла. Теперь веб-сайты полны большого количества изображений. Если размер файла каждого изображения можно уменьшить, объем передачи данных между браузером и сервером будет значительно уменьшен, тем самым уменьшив задержку доступа и улучшив опыт доступа. В настоящее время только браузер Chrome и браузер Opera поддерживают формат WebP, совместимость не очень хорошая.

• В случае сжатия без потерь размер файла изображений WebP того же качества на 26% меньше, чем у PNG;
• В случае сжатия с потерями изображение WebP с той же точностью изображения имеет размер файла на 25–34% меньше, чем у JPEG;
• Формат изображения WebP поддерживает прозрачность изображения, сжатое без потерь изображение WebP, если вы хотите поддерживать прозрачность, требуется только 22% дополнительного размера файла.

17. Понимание CSSSprites

CSSSprites (спрайты) включают все изображения, задействованные на странице, в большое изображение, а затем используют комбинацию свойств CSS background-image, background-repeat и background-position для позиционирования фона.

преимущество:

• использоватьCSS SpritesЭто может очень хорошо уменьшить http-запрос веб-страницы, тем самым значительно улучшив производительность страницы, котораяCSS Spritesсамое большое преимущество;
• CSS SpritesОн может уменьшить байты картинки, а байты объединения 3-х картинок в одну картинку всегда меньше суммы байтов этих 3-х картинок.

недостаток:

• При объединении изображений необходимо упорядоченно и разумно объединять несколько изображений в одно изображение и оставлять достаточно места, чтобы предотвратить появление ненужного фона в пластине. Для адаптивных страниц под широкоэкранным и высоким разрешением, если фон недостаточно широкий, легко вызвать поломку фона;
• CSSSpritesЭто относительно громоздко при разработке, и вам нужно использовать помощьphotoshopили другие инструменты для измерения точного местоположения каждой фоновой ячейки.
• Техническое обслуживание:CSS SpritesЭто более хлопотно во время обслуживания.Когда фон страницы немного изменен, объединенная картинка должна быть изменена.Постарайтесь не перемещать места, которые не нужно менять, чтобы избежать изменения большеCSS, если не получается поставить на исходное место, то можно только (лучше всего) добавить картинку вниз, так что байты картинки будут увеличиваться, и нужно будет ее менять.CSS.

18. Что такое физические пиксели, логические пиксели и плотность пикселей, зачем вам нужно использовать изображения @3x, @2x в мобильной разработке?

Взяв в качестве примера iPhone XS, при написании кода CSS ширина составляет 414 пикселей и 896 пикселей для единицы пикселей, то есть, когда элементу DIV задана ширина 414 пикселей, DIV заполнит ширину телефона;

И если есть линейка для измерения физических пикселей этого мобильного телефона, то на самом деле это 1242 * 2688 физических пикселей; после расчета 1242/414 = 3, то есть с одной стороны один логический пиксель = 3. физические пиксели говорят, что плотность пикселей этого экрана составляет 3, что часто говорят, что в 3 раза больше, чем на экране.

Для изображений, чтобы гарантировать, что они не искажены, 1 пиксель изображения должен соответствовать хотя бы одному физическому пикселю.Если исходное изображение 500300 пикселей, то изображение 1500900 пикселей должно быть помещено на экран 3x, чтобы гарантировать, что 1 физический пиксель, по крайней мере, соответствующий пикселю изображения, чтобы не искажаться.Конечно, также возможно предоставить изображения только самого высокого разрешения для всех экранов. Хотя экраны с низкой плотностью не используют столько пикселей изображения, что приводит к нерациональному расходованию полосы пропускания и задержкам загрузки из-за загрузки избыточных пикселей, результат гарантированно не будет искажен на всех экранах.

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

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

19. Сценарии использования полей и отступов

• Используйте поля, когда вам нужно добавить пробелы за пределы границы и в пробелах не требуется фон (цвет);
• Используйте заполнение, когда вам нужно добавить пробелы во внутренний тест границы, а для пробелов нужен фон (цвет).

20. ДаПонимание высоты строки и метода ее присвоения

(1) Концепция высоты строки:

• высота строки относится к высоте строки текста, включая расстояние между словами, которое на самом деле является расстоянием от базовой линии следующей строки до базовой линии предыдущей строки;
• Если метка не определяет атрибут высоты, ее окончательная высота определяется высотой строки;
• Если для контейнера не задана высота, то высота контейнера увеличивается за счет высоты строки, а не текстового содержимого в контейнере;
• Установка значения line-height на значение того же размера, что и высота, может обеспечить вертикальное центрирование одной строки текста;
• И line-height, и height могут растягивать высоту;

(2) Метод присвоения высоты строки:

• С unit: px является фиксированным значением, и em будет вычислять собственную высоту строки со ссылкой на значение размера шрифта родительского элемента.
• Чистые числа: соотношение будет передаваться потомкам. Например, высота строки родительского элемента составляет 1,5, а шрифт дочернего элемента — 18 пикселей, тогда высота строки дочернего элемента составляет 1,5 * 18 = 27 пикселей.
• Процент: передать вычисленное значение потомкам

21. Какие есть способы оптимизации и повышения производительности CSS?

Производительность загрузки:

(1) сжатие css: упаковать и сжать написанный css, чтобы уменьшить размер файла.

(2) Единый стиль CSS: когда требуются нижнее и левое поля, часто выбирается margin:top 0 bottom 0, но margin-bottom:bottom; margin-left:left; будет более эффективным.

(3) Уменьшите использование @import, рекомендуется использовать ссылку, потому что последняя загружается вместе при загрузке страницы, а первая должна ждать загрузки страницы перед загрузкой.

Производительность селектора:

(1) Ключевой селектор (клавишный селектор). Последняя часть селектора — это ключевой селектор (то есть часть, используемая для сопоставления с целевым элементом). Селекторы CSS сопоставляются справа налево. При использовании селекторов потомков браузер просматривает все дочерние элементы, чтобы определить, является ли он указанным элементом и т. д.;

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

(3) Избегайте использования подстановочных знаков.Например, *{} имеет удивительное количество вычислений и выбирает только те элементы, которые необходимо использовать.

(4) Выберите как можно меньше ярлыков, но используйте класс.

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

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

Производительность рендеринга:

(1) Осторожно используйте высокопроизводительные атрибуты: плавание, позиционирование.

(2) Свести к минимуму перестановку страниц и перерисовку.

(3) Удалить пустые правила: {}. Пустые правила обычно создаются для резервирования стилей. Удаление этих пустых правил, несомненно, уменьшит размер документа CSS.

(4) Когда значение атрибута равно 0, единица измерения не добавляется.

(5) Значением атрибута является плавающий десятичный знак 0.**, а 0 перед десятичной точкой можно опустить.

(6) Стандартизируйте различные префиксы браузера: сначала идут те, у которых есть префиксы браузера. Далее следуют стандартные свойства.

(7) Не используйте префикс @import, это повлияет на скорость загрузки css.

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

(9) Изображение спрайта css, маленькая иконка аналогичной части той же страницы, проста в использовании и уменьшает количество запросов на странице, но в то же время само изображение станет больше, при его использовании, четко рассмотреть преимущества и недостатки, а затем использовать его.

(10) Правильное использование свойства отображения Из-за эффекта отображения некоторые комбинации стилей будут недопустимыми, что увеличит объем стиля, а также повлияет на производительность синтаксического анализа.

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

Ремонтопригодность и надежность:

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

(2) Разделение стиля и содержания: определить код CSS во внешний CSS.

22. Что такое препроцессор/постпроцессор CSS? Зачем их использовать?

препроцессор,как:less,sass,stylus, используется для предварительной компиляцииsassилиless,выросcssПовторное использование кода. уровень,mixin, переменные, циклы, функции и т. д. чрезвычайно удобны для написания и разработки UI-компонентов.

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

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

разноеcssЯзык препроцессора:Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css.

Причина использования:

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

23. В чем разница между двойным двоеточием и одинарным двоеточием в ::before и :after?

(1) двоеточие (:) заCSS3Псевдокласс, двойное двоеточие (::) заCSS3Псевдоэлемент. (2)::beforeЭто псевдоэлемент, определенный перед основным содержимым элемента с наличием дочернего элемента. не существует вdomСреди них существует только на странице.

Уведомление: :before и:afterЭти два псевдоэлемента находятся вCSS2.1вновь появился. Первоначально префиксы псевдоэлементов использовали синтаксис с одним двоеточием, но сWebэволюция, вCSS3В спецификации синтаксис псевдоэлемента изменен, чтобы использовать двойное двоеточие, становясь::before,::after.

24. Когда display:inline-block покажет пробел?

• Когда есть пробелы, будут пробелы, которые можно решить, удалив пробелы;
• marginКогда значение положительное, можно позволитьmarginРешите с отрицательными значениями;
• использоватьfont-sizeможно установить, установивfont-size:0,letter-spacing,word-spacingрешать;

25. Однострочное, многострочное скрытие переполнения текста

• Переполнение текста одной строкой

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

• Переполнение многострочного текста

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

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

26. Что такое Sass и Less? Зачем их использовать?

Оба они являются препроцессорами CSS, слоем абстракции поверх CSS. Они скомпилированы в CSS со специальным синтаксисом/языком. Например, Less — это динамический язык стилей, который наделяет CSS характеристиками динамических языков, такими как переменные, наследование, операции, функции, параллельно (с помощью Node.js).

Зачем их использовать?

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

27. Понимание медиазапросов?

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

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

<!-- link元素中的CSS媒体查询 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的CSS媒体查询 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { 
    display: none; 
  } 
}
</style>

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

28. Понимание инженерии CSS

CSS разработан для решения следующих проблем:

1. макро дизайн: Как организовать код CSS, как разделить, как спроектировать структуру модулей?
2. Оптимизация кодирования: Как лучше писать CSS?
3. Построить: Что мне делать с моим CSS, чтобы его можно было оптимально упаковать?
4. ремонтопригодность: После того, как код написан, как минимизировать стоимость его последующего изменения? Как вы гарантируете, что любой коллега может легко взять на себя управление?

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

• Препроцессор: Less, Sass и др.;
• Важные инженерные плагины: PostCss;
• загрузчик веб-пакетов и т. д.

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

(1) Препроцессор: зачем использовать препроцессор? Какую проблему он решает?

Препроцессор на самом деле является «колесом» мира CSS. Препроцессор позволяет нам написать CSS-подобный язык, который на самом деле не является CSS, а затем скомпилировать его в код CSS:Итак, почему вы хотите писать «CSS-подобный» код, если вы хорошо пишете код CSS? Это то же самое, что писать шаблонный синтаксис React jsx или Vue, когда все функции могут быть реализованы с помощью JS — просто для удовольствия! Чтобы понять, как здорово иметь препроцессор, первое, что нужно знать, это то, как раздражает традиционный CSS. С ростом сложности фронтенд-бизнеса к CSS в фронтенд-инжиниринге выдвигаются следующие требования:

1. Дизайн макросов: мы надеемся оптимизировать структуру каталогов файлов CSS и повторно использовать существующие файлы CSS;
2. Оптимизация кода: Мы надеемся написать CSS с четкой структурой и простой для понимания, и нам нужно, чтобы он имел четкую вложенную иерархию, а не беспорядочный метод написания один к одному; мы надеемся, что он имеет переменные характеристики, вычислительную мощность , а также возможность зацикливания и большую программируемость, чтобы мы могли писать меньше бесполезного кода;
3. С точки зрения ремонтопригодности: более сильная программируемость означает лучшую структуру кода, а повторное использование означает более простую структуру каталогов и более широкие возможности расширения.Если эти два пункта могут быть достигнуты, это, естественно, повысит ремонтопригодность.

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

• Возможность вложения кода посредством вложения для отражения иерархической взаимосвязи между различными свойствами CSS;
• Поддержка определения переменных css;
• предоставлять функции расчета;
• Позволяет расширять и смешивать фрагменты кода;
• Поддержка использования операторов цикла;
• Поддерживает модульность файлов CSS для повторного использования.

(2) PostCss: как работает PostCss? В каких сценариях мы будем использовать PostCss?

Разница между ним и препроцессором заключается в том, что препроцессор работает с классом CSS, а PostCss — с самим CSS. Babel может преобразовывать код JS высокой версии в код JS низкой версии. PostCss делает что-то подобное: он компилирует расширенный синтаксис CSS, который еще не широко поддерживается браузерами, и автоматически добавляет префиксы к некоторому синтаксису, требующему дополнительной совместимости. Более того, поскольку PostCss имеет мощный механизм подключаемых модулей, он поддерживает множество расширений, что значительно расширяет возможности CSS.

Существует множество сценариев использования PostCss в бизнесе:

• Улучшите читаемость кода CSS: PostCss действительно может выполнять работу, аналогичную работе препроцессора;
• Когда нашему коду CSS необходимо адаптироваться к браузерам более ранних версий, PostCssAutoprefixerПлагины могут помочь нам автоматически увеличивать префиксы браузера;
• Позволяет нам писать ориентированный на будущее CSS: PostCss может помочь нам скомпилировать следующий код CSS;

(3) Может ли Webpack обрабатывать CSS? Как добиться?Может ли Webpack обрабатывать CSS:

• Webpack не может обрабатывать CSS в состоянии чередования, Webpack сам по себе является модульным инструментом упаковки для JavaScript и может обрабатывать только код JavaScript;
• Webpack может обрабатывать CSS с помощью загрузчиков.

Как реализовать обработку CSS с помощью Webpack:

• Два ключевых загрузчика для работы с CSS в Webpack: css-loader и style-loader
• Обратите внимание, что иногда ответа «что» может быть недостаточно, интервьюер задастся вопросом, запоминаете ли вы ответ, поэтому вам также необходимо понять, что делает каждый загрузчик:
  • css-loader: импортируйте модуль CSS и скомпилируйте код CSS;
  • style-loader: создайте теги стиля и запишите содержимое CSS в теги.

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

29. Как узнать, достиг ли элемент видимой области

В качестве примера возьмем отображение изображения:

• window.innerHeightвысота видимой области браузера;
• document.body.scrollTop || document.documentElement.scrollTopрасстояние, на которое прокрутил браузер;
• imgs.offsetTop— высота верхней части элемента от верхней части документа (включая расстояние до полосы прокрутки);
• Когда содержимое достигает области отображения:img.offsetTop < window.innerHeight + document.body.scrollTop;

30. При каких обстоятельствах не работает атрибут z-index

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

Свойство z-index не работает в следующих случаях:

• Когда позиция родительского элемента является относительной, z-индекс дочернего элемента недействителен. Решение: измените положение родительского элемента на абсолютное или статическое;
• Элемент не имеет атрибута position, установленного в нестатический атрибут. Решение. Установите для атрибута положения элемента значение относительного, абсолютного или фиксированного;
• Элемент имеет значение с плавающей запятой, установленное при установке z-индекса. Решение: удалить float и заменить display: inline-block;

31. Каковы свойства преобразования в CSS3

Во-вторых, макет страницы

1. Общие единицы компоновки CSS

Общие единицы макета включают пиксели (px), процент(%),em,rem,vw/vh.

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

• CSS-пиксели: абстрактная единица, используемая в CSS для веб-разработчиков;
• физические пиксели: Фиксируются только физические пиксели любого устройства, связанные с аппаратной плотностью устройства.

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

(3) эм и ремБолее гибкие, чем px, они оба являются относительными единицами длины, разница между ними:em относится к родительскому элементу, а rem относится к корневому элементу.

• Эм:Единица относительной длины текста. Размер шрифта относительно текста внутри текущего объекта. Если размер шрифта текущего встроенного текста не задан вручную, он определяется размером шрифта браузера по умолчанию (по умолчанию 16 пикселей). (кратное размеру шрифта относительно родительского элемента).
• рем:rem — это новая относительная единица в CSS3, которая кратна размеру шрифта корневого элемента (элемента html).эффект: Используйте rem для создания простого адаптивного макета.Вы можете использовать отношение размера шрифта в элементе html к размеру экрана, чтобы установить значение размера шрифта, чтобы элемент менялся при изменении разрешения экрана.

(4) вд/вчЭто единица, относящаяся к окну просмотра, vw представляет ширину относительно окна просмотра, а vh представляет высоту относительно окна просмотра.В дополнение к vw и vh есть две связанные единицы, vmin и vmax.

• vw: относительно ширины окна ширина окна равна 100vw;
• vh: относительно высоты окна высота окна составляет 100vh;
• vmin: меньшее из значений vw и vh;
• vmax: большее значение vw и vh;

vw/vhПодобно проценту, разница между ними:

• процент(%): большинство из них относятся к элементам-предкам, но также и к самим себе, например (граница-радиус, перевод и т. д.)
• vw/vm: размер относительно области просмотра

2. Отличия и сценарии использования px, em и rem

Разница между тремя:

• px — это фиксированный пиксель, после установки его нельзя изменить в соответствии с размером страницы.
• em и rem более гибкие, чем px, это относительные единицы длины, их длина не фиксирована, и они больше подходят для адаптивного макета.
• em задает размер шрифта относительно его родительского элемента, поэтому возникает проблема: любой настройке элемента может потребоваться знать размер своего родительского элемента. А rem относится к корневому элементу, что означает, что в корневом элементе необходимо определить только одно ссылочное значение.

используемые сцены:

• Для тех, кому нужно адаптироваться только к небольшому количеству мобильных устройств, а разрешение мало влияет на страницу, просто используйте px.
• Для различных мобильных устройств, которые необходимо адаптировать, используйте rem, например, устройства с большими различиями в разрешении, такие как iPhone и iPad, необходимо адаптировать.

3. Реализация двухколоночной верстки

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

• С float установите ширину левого элемента на 200 пикселей и установите его так, чтобы он плавал влево. Установите для левого поля правого элемента значение 200 пикселей, а для ширины — значение auto (по умолчанию — auto, что заполняет весь родительский элемент).

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}

• Используя float, левый элемент устанавливается в фиксированный размер и перемещается влево, а правый элемент устанавливается в значение overflow: hidden; Таким образом, BFC срабатывает с правой стороны, а область BFC не будет перекрываться с плавающим элементом, поэтому две стороны не будут перекрываться.

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }

• Используя гибкий макет, установите для левого элемента фиксированную ширину 200 пикселей, а для правого элемента — flex:1.

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

• При абсолютном позиционировании родительский элемент устанавливается на относительное позиционирование. Левый элемент позиционирован абсолютно и имеет ширину 200px. Установите значение margin-left для правого элемента на 200px.

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}

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

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

4. Реализация трехколоночной верстки

Трехколоночный макет обычно относится к трем колонкам на странице.Ширина левой и правой колонок фиксированная, а средняя адаптивная верстка, конкретная реализация трехколоночного макета:

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

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

• При гибкой компоновке левый и правый столбцы имеют фиксированный размер, а средний столбец — flex:1.

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

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

.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

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

.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

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

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

5. Осуществление горизонтального и вертикального центрирования

• Используя абсолютное позиционирование, сначала поместите левый верхний угол элемента в центр страницы через top: 50% и left: 50%, а затем используйте перевод, чтобы отрегулировать центр элемента по центру страницы. Этот метод требуетУчитывайте проблемы совместимости браузеров.

.parent {    position: relative;} .child {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);}

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

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

• Используя абсолютное позиционирование, сначала поместите левый верхний угол элемента в центр страницы через верхнюю часть: 50% и левую: 50%, а затем отрегулируйте центр элемента по центру страницы через отрицательное значение поля. Этот метод подходит дляШирина и высота ящика известныСлучай

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

• Используя гибкий макет, установите вертикальное и горизонтальное выравнивание контейнера по центру с помощью align-items: center и justify-content: center, а затем его дочерние элементы также могут добиться вертикального и горизонтального центрирования. Этот метод долженУчитывайте проблемы совместимости, этот метод больше используется на мобильном терминале:

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

6. Как адаптировать мобильный терминал согласно дизайн-проекту?

Существует два основных аспекта мобильной адаптации:

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

Чтобы сделать размер страницы адаптивным, вы можете использовать относительные единицы, такие как rem, em, vw, vh и т. д.

7. Понимание макета Flex и сценариев его использования

Flex — это аббревиатура от FlexibleBox, что означает «гибкая компоновка», которая используется для обеспечения максимальной гибкости блочной модели. Любой контейнер может быть указан как гибкий макет. Встроенные элементы также могут использовать макет Flex. Обратите внимание, что после настройки макета FlexСвойства float, clear и vertical-align дочерних элементов не будут работать.. Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items». Контейнер по умолчанию имеет две оси: горизонтальную главную ось (main axis) и вертикальную поперечную ось (cross axis).По умолчанию элементы располагаются вдоль горизонтальной главной оси.

Следующие 6 свойств установлены вна контейнере:

• Свойство flex-direction определяет направление главной оси (то есть направление, в котором располагаются элементы).
• Свойство flex-wrap определяет способ переноса, если одна ось не подходит.
• Свойство flex-flow является сокращением для свойства flex-direction и свойства flex-wrap Значением по умолчанию является row nowrap.
• Свойство justify-content определяет выравнивание элементов по главной оси.
• Свойство align-items определяет, как элементы выравниваются по поперечной оси.
• Свойство align-content определяет выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.

Следующие 6 свойств установлены вна проекте:

• Свойство order определяет порядок сортировки элементов. Чем меньше значение, тем выше рейтинг, по умолчанию 0.
• Свойство flex-grow определяет коэффициент увеличения элемента, по умолчанию 0, то есть если осталось место, он не будет увеличен.
• Свойство flex-shrink определяет коэффициент сжатия элемента, по умолчанию равен 1, то есть если места недостаточно, элемент сожмется.
• Свойство flex-basis определяет пространство главной оси, которое занимает элемент до выделения лишнего пространства. На основе этого свойства браузер вычисляет, есть ли лишнее место на главной оси. Его значение по умолчанию — auto, что соответствует исходному размеру элемента.
• Свойство flex является сокращением для flex-grow, flex-shrink и flex-basis со значением по умолчанию 0 1 auto.
• Свойство align-self позволяет одному элементу иметь выравнивание, отличное от других элементов, переопределяя свойство align-items. Значение по умолчанию — auto, что означает наследование свойства align-items родительского элемента.Если родительского элемента нет, это эквивалентно растягиванию.

Проще говоря:Гибкая компоновка — это новый метод компоновки в CSS3.Вы можете установить для свойства отображения элемента значение flex, чтобы сделать его гибким контейнером, и все его дочерние элементы станут его элементами. Контейнер по умолчанию имеет две оси: горизонтальную главную ось и поперечную ось, перпендикулярную главной оси. Вы можете использовать flex-direction, чтобы указать направление главной оси. Вы можете использовать justify-content, чтобы указать, как элементы выравниваются по главной оси, и align-items, чтобы указать, как элементы выравниваются по поперечной оси. Вы также можете использовать flex-wrap, чтобы указать, как выполнять перенос, когда строка не подходит. Для элементов в контейнере вы можете использовать свойство order, чтобы указать порядок расположения элементов, вы также можете использовать flex-grow, чтобы указать коэффициент увеличения элементов, когда пространство для расположения остается, и вы также можете использовать flex- уменьшить, чтобы указать, когда места для размещения недостаточно, коэффициент уменьшения элемента.

8. Концепция и основные принципы адаптивного дизайна

Адаптивный дизайн сайта（Responsive Web design) заключается в том, что веб-сайт может быть совместим с несколькими терминалами, а не создавать отдельную версию для каждого терминала.

О принципе: Основной принцип через медиа-запросы（@media）Запрос для определения различных размеров экрана устройства для обработки. О совместимости: В шапке страницы должно быть указано mate.viewport.

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

3. Позиционирование и плавание

1. Зачем нужно очищать поплавок? Как очистить поплавок

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

Как работает поплавок:

• Плавающие элементы вырываются из потока документа и не занимают места (вызывая явление «схлопывания по высоте»).
• Плавающий элемент останавливается, когда он достигает своей границы или границы другого плавающего элемента.

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

Проблемы, вызванные плавающими элементами?

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

Способ очистки поплавка следующий:

• Определить родительский divheightАтрибуты
• Добавьте пустой тег div после последнего плавающего элемента и добавьтеclear:bothстиль
• Добавлен родительский тег, содержащий плавающий элементoverflow:hiddenилиoverflow:auto
• Используйте псевдоэлемент :after. Поскольку IE6-7 не поддерживает :after, используйте zoom:1 для запуска hasLayout**

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

2. Принцип использования свойства clear для очистки поплавка?

Используйте свойство clear для очистки поплавков со следующим синтаксисом:

clear:none|left|right|both

Если вы посмотрите на буквальное значение, то clear:left означает «очистить левое плавание», а clear:right означает «очистить правое плавание».На самом деле, эта интерпретация проблематична, потому что поплавок все еще существует и не был очищен.

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

Также обратите внимание, что свойство clear означает, что край блока элемента не может быть смежным с предыдущим плавающим элементом, обратите внимание на это.фронт"3 слова, то есть атрибут clear безразличен к плавающим элементам "за" «Позади» плавающих элементов игнорируются, поэтому, когда значение clear:left допустимо, значение clear:right должно быть недопустимым, то есть значение clear:left эквивалентно установке clear:both в данный момент; аналогичным образом, значение clear:right эквивалентно установке clear :right, если он действителен.

Обычно используйте псевдоэлементы для очистки поплавков:

.clear::after{  content:'';  display: block;   clear:both;}

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

3. Понимание BFC, как создать BFC

Давайте сначала рассмотрим два связанных понятия:

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

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

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

Условия создания BFC:

• корневой элемент: тело;
• Настройки элемента float: значения float, отличные от none;
• Элемент задает абсолютное позиционирование: position (абсолютное, фиксированное);
• Отображаемое значение: inline-block, table-cell, table-caption, flex и т. д.;
• Значение переполнения: скрыто, авто, прокрутка;

Особенности БФК:

• В вертикальном направлении он располагается сверху вниз, что соответствует организации документооборота.
• В BFC поля двух соседних контейнеров будут перекрываться.
• При расчете высоты БТЭ необходимо рассчитать высоту плавающего элемента
• Области BFC не перекрываются с плавающими контейнерами.
• BFC — это независимый контейнер, и элементы внутри контейнера не будут влиять на внешние элементы.
• Значение левого поля каждого элемента касается левой границы контейнера.

Роль БФК:

• Решить проблему перекрытия полей: Поскольку BFC является независимой областью, внутренние и внешние элементы не влияют друг на друга.Путем замены двух элементов на два BFC решается проблема перекрытия полей.
• Решить проблему падения высоты: после того, как дочерний элемент установлен в плавающий, высота родительского элемента схлопнется, то есть высота родительского элемента станет равной 0. Чтобы решить эту проблему, просто превратите родительский элемент в BFC. Обычный способ - установить родительский элементoverflow:hidden.
• Создайте адаптивный двухколоночный макет: Может использоваться для создания адаптивного двухколоночного макета: фиксированной ширины слева и адаптивной ширины справа.

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
 
<div class="left"></div>
<div class="right"></div>

левая установкаfloat:left, правильная настройкаoverflow: hidden. Таким образом, BFC запускается с правой стороны, и область BFC не будет перекрываться с плавающим элементом, поэтому две стороны не будут перекрываться, реализуя адаптивный двухколоночный макет.

4. Что такое проблема перекрытия полей? Как решить?

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

Принцип расчета:Принцип расчета маржи после фальцовки и слияния следующий:

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

Решение:В случае складывания в основном есть два типа:перекрытие между братьямииПерекрытие между отцом и сыном(1) Перекрытие между братьями

• Нижний элемент становится встроенным полем:display: inline-block
• Нижний элемент настроен на плавание:float
• Значение позиции нижнего элемента равноabsolute/fixed

(2) Перекрытие между отцом и сыном

• Родительский элемент присоединяется:overflow: hidden
• Родительский элемент добавляет прозрачную границу:border:1px solid transparent
• Дочерние элементы становятся встроенными блоками:display: inline-block
• Добавить свойство float или позиционирование к дочерним элементам

5. Порядок укладки элементов

Порядок наложения, который на английском языке называется порядком наложения, означает, что элементы имеют определенный порядок вертикального отображения, когда они сложены. Ниже приведены правила укладки для блочной модели:На изображении выше сверху вниз расположены: (1) Фон и граница: установите фон и границу текущего элемента контекста наложения. (2) Отрицательный z-индекс: в текущем контексте стека элемент, чье значение атрибута z-индекса отрицательное. (3) Блок блочного уровня: непозиционированные дочерние элементы не встроенного уровня в потоке документа. (4) Плавающая коробка: плавающий элемент без позиционирования. (5) Встроенное поле: непозиционированные дочерние элементы встроенного уровня в потоке документа. (6) z-index: 0: элемент позиционирования с каскадным уровнем 0. (7) Положительный z-индекс: позиционирование элементов с положительным значением атрибута z-индекса.

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

6. Какие свойства позиции и в чем отличия

position имеет следующие значения свойств:

значение атрибута	Обзор
absolute	Создавайте абсолютно позиционированные элементы, позиционированные относительно родительского элемента, отличного от статического позиционирования. Положение элемента определяется свойствами left, top, right и bottom.
relative	Создает относительно позиционированный элемент, расположенный относительно его исходного положения. Положение элемента определяется свойствами left, top, right и bottom.
fixed	Создавайте абсолютно позиционированные элементы, указывая положение элемента относительно области просмотра экрана, чтобы указать положение элемента. Положение элемента не меняется при прокрутке экрана, например, кнопка «Назад вверх» обычно используется для этого метода позиционирования.
static	Значение по умолчанию, без позиционирования, элемент отображается в обычном потоке документа, игнорируя объявления верхнего, нижнего, левого, правого или z-index, элементы уровня блока располагаются вертикально сверху вниз, а элементы уровня строки располагаются от слева направо.
inherit	Указывает, что значение атрибута position наследуется от родительского элемента

Методы позиционирования первых трех следующие:

• относительный:Позиционирование элемента всегда относительно самого элемента и не имеет ничего общего с другими элементами или не влияет на них.

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

• абсолютный:Позиционирование элементов намного сложнее, чем первые два. Если top и left установлены как абсолютные, что браузер будет использовать для определения смещения по вертикали и горизонтали? Ответ заключается в том, что браузер будет рекурсивно искать все родительские элементы элемента, и если он найдет тот, который устанавливаетposition:relative/absolute/fixedЕсли элемент найден, он будет позиционирован на основе элемента, а если он не найден, он будет позиционирован на основе границы браузера. Как показано на следующих двух рисунках:

7. Взаимосвязь между display, float и position

(1) Во-первых, определите, является ли атрибут display равным none.Если он отсутствует, значения атрибутов position и float не влияют на окончательную производительность элемента.

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

(3) Если значение position не является абсолютным или фиксированным, то оцените, является ли значение атрибута float равным нулю, если нет, значение display преобразуется в соответствии с вышеуказанными правилами. Обратите внимание, что если значение position является относительным и значение свойства float существует, то относительный позиционируется относительно конечной позиции после float.

(4) Если значение float равно none, определяется, является ли элемент корневым. Если это корневой элемент, атрибут отображения будет преобразован в соответствии с приведенными выше правилами. Если нет, заданное значение атрибута отображения будет остается неизменным.

В общем, вы можете думать об этом как о механизме, подобном приоритету, «position:absolute» и «position:fixed» имеют наивысший приоритет, и когда он существует, float не имеет никакого эффекта, и значение «display» также нужно для настройки; во-вторых, когда значение свойства 'float' элемента не равно "none" или если это корневой элемент, отрегулируйте значение 'display'; наконец, некорневые элементы и неплавающие элементы, и не абсолютно позиционированный элемент, значение свойства display совпадает с установленным значением.

8. Сходства и различия между абсолютным и фиксированным

Общая основа:

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

разница:

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

9. Понимание липкого позиционирования

Sticky буквально означает пасту на английском языке, поэтому его можно назвать липким позиционированием. грамматика:position: sticky;Позиционирование на основе положения прокрутки пользователя.

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

4. Применение сценария

1. Реализуйте треугольник

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

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

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}

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

div {    width: 0;    height: 0;    border-top: 50px solid red;    border-right: 50px solid transparent;    border-left: 50px solid transparent;}

(2) Треугольник 2

div {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

(3) Треугольник 3

div {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

(4) Треугольник 4

div {
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

(5) Треугольник 5

div {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

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

2. Реализовать сектор

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

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

3. Реализуйте квадрат с адаптивной шириной и высотой

• Используйте vw для достижения:

.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

• Используйте процент поля/отступа элемента относительно ширины родительского элемента для достижения:

.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

• Используйте значение margin-top дочернего элемента для достижения:

.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

4. Нарисуйте линию шириной 0,5 пикселя.

• Использование метода преобразования: масштаб(), который определяет преобразование 2D-масштабирования элемента:

transform: scale(0.5,0.5);

• Использование мета-окна просмотра

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

Это будет масштабироваться в 0,5 раза по сравнению с оригиналом, если это 1 пиксель, то он станет 0,5 пиксель. Окно просмотра предназначено только для мобильного терминала, и эффект можно увидеть только на мобильном терминале.

5. Установите шрифты меньше 12 пикселей

Когда размер шрифта css установлен на 12 пикселей и ниже в Google, дисплей имеет тот же размер, а по умолчанию — 12 пикселей.

Решение:

• Используйте частное свойство CSS -webkit-text-size-adjust ядра Webkit для решения, если вы добавите -webkit-text-size-adjust:none; размер шрифта не ограничен. Но после обновления хрома до версии 27 его нельзя использовать. Таким образом, браузер Google Chrome более высокой версии больше не поддерживает стиль -webkit-text-size-adjust, поэтому используйте его с осторожностью.
• Используйте свойство масштабирования преобразования css3 -webkit-transform:scale(0.5); Примечание -webkit-transform:scale(0.75); Сокращение - это размер всего элемента. В настоящее время, если это встроенный элемент, встроенный элемент должен быть преобразован в блочный элемент, вы можете использовать display:block/inline-block/...;
• Используйте изображения: если содержимое фиксировано, используйте текстовое содержимое размером менее 12 пикселей, которое будет вырезано для создания изображений, что не повлияет на совместимость или красоту.

6. Как решить проблему с 1px?

Вопрос 1px относится к: в некоторыхRetina屏幕В модели 1 пиксель мобильной страницы станет очень толстым, демонстрируя эффект более 1 пикселя. Причина проста — 1 пиксель в CSS не равен 1 пиксель на мобильных устройствах. Пропорциональное отношение между ними имеет особое свойство описывать:

window.devicePixelRatio = 设备的物理像素 / CSS像素。

Откройте браузер Chrome, запустите режим мобильной отладки и выведите это в консоль.devicePixelRatioзначение . Здесь выбираются модели серии iPhone6/7/8, и результат вывода равен 2:Это означает, что установленный пиксель CSS размером 1 пиксель фактически будет использовать 2 единицы физического пикселя для рендеринга на этом устройстве, поэтому фактический вид определенно будет толще, чем 1 пиксель.Три способа решить проблему 1px:

Идея 1: напишите 0,5px напрямую

Если предыдущий стиль 1px был написан так:

border:1px solid #333

Вы можете сначала получить значение window.devicePixelRatio в JS, а затем передать это значение данным CSS через JSX или синтаксис шаблона для достижения этого эффекта (синтаксис JSX используется здесь в качестве примера):

<div id="container" data-device={{window.devicePixelRatio}}></div>

Затем вы можете использовать селектор атрибутов в CSS, чтобы выбрать случай, когда devicePixelRatio является определенным значением, например, попробуйте выбрать случай, когда devicePixelRatio равен 2:

#container[data-device="2"] {
  border:0.5px solid #333
}

Измените 1px непосредственно на значение после 1/devicePixelRatio, это самый простой способ. Недостаток этого метода в том, что совместимость плохая, система IOS требует версии 8 и выше, а система Android напрямую несовместима.

Идея 2: Псевдоэлементы сначала увеличиваются, а затем уменьшаются

Этот метод будет более осуществимым и более совместимым. Единственным недостатком является то, что будет больше кода.

Идея в том,Сначала увеличьте, затем уменьшите масштаб: добавьте псевдоэлемент ::after после целевого элемента, сделайте макет элемента абсолютным, полностью растяните целевой элемент и установите его ширину и высоту в два раза больше ширины и высоты целевого элемента. . раз значение границы устанавливается равным 1px. Затем с помощью возможности масштабирования в анимационных эффектах CSS весь псевдоэлемент уменьшается до 50% от его исходного размера. В это время ширина и высота псевдоэлемента могут быть просто выровнены с исходным целевым элементом, а граница также уменьшена до половины 1 пикселя, что косвенно обеспечивает эффект 0,5 пикселя.

код показывает, как показано ниже:

#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}

Идея 3: масштабирование области просмотра для решения

Эта идея состоит в том, чтобы начать с нескольких ключевых атрибутов в метатеге:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

Здесь для страницы с соотношением пикселей, равным 2, вся страница масштабируется до 1/2 исходного размера. Таким образом, стиль 1px, который первоначально занимал 2 физических пикселя, теперь занимает стандартный физический пиксель. В зависимости от соотношения пикселей этот коэффициент масштабирования может быть рассчитан как разные значения, реализованные с помощью кода js следующим образом:

const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

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