Статьи по CSS — 100 почти 20 000 слов помогут вам закрепить знания CSS.

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

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

1. 🤨В чем разница между стандартной блочной моделью CSS и блочной моделью более низкой версии IE?

Стандартная (W3C) блочная модель:width= ширина контента（content） + border + padding + margin

Коробочная модель IE с низкой версией:width= ширина контента（content + border + padding）+ margin

отображение изображения:

Отличие: стандартная коробочная модельheightиwidthдаcontent(содержимое) ширина и высота, в то время как ширина и высота блока модели блока IE включаетcontent+padding+borderчасть.

2. Несколько методов устранения ошибок существующих в IE6

Зависит отfloatвызвано проблемой двойного интервала, используйтеdisplayрешать;
Зависит отfloatПроблема с 3 пикселями, вызванная использованиемdisplay: inline -3px;
Используйте правильный порядок написанияlink visited hover active, разрешить гиперссылкиhoverПроблема с отказом клика;
заIEизz-indexпроблема, добавив к родительскому элементуposition: relativeрешать;
использовать!importantрешатьMin-heightПроблема минимальной высоты;
использоватьiframeрешатьselectсуществуетIE6Вопросы покрытия под;
использоватьover: hidden, zoom: 0.08, line-height: 1pxРешить проблему определения ширины контейнера около 1px;

🍀Уведомление:СвязанныйIE6не поддерживается!importantПроблема в том, что для одного класса поддерживается. Например:

.content { color: pink !importent };
.content { color: orange };
// 这里IE6及以上，FF，google等都将显示粉红色

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

.content { color: pink !importent; color: orange };
// IE7及以上，FF, google显示粉红色，而IE6将显示橙色（原因是一个样式内重复设置了属性，后面的就会覆盖掉之前的）

3. Что такое селекторы CSS? Какие свойства могут передаваться по наследству?

Общие селекторы:

idСелектор(#content), селектор класса (.content), селектор тегов (div, p, spanи т. д.), соседние селекторы (h1+p), дочерние селекторы (ul>li), селектор потомков (li a), селекторы подстановочных знаков (*), селекторы атрибутов (a[rel = "external"]), селектор псевдокласса (a:hover, li:nth-child)

Наследуемые свойства стиля:font-size, font-family, color, ul, li, dl, dd, dt;

Ненаследуемые свойства стиля:border, padding, margin, width, height;

4. Как рассчитывается алгоритм приоритета CSS?

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

Приоритет:

В случае одинакового веса: встроенная таблица стилей (внутри тега) > встроенная таблица стилей (в текущем файле) > внешняя таблица стилей (во внешнем файле)

!important > # > . > tag

🍀Уведомление:!importantболее высокий приоритет, чем встроенный

5. Какие новые псевдоклассы появились в CSS3?

:rootВыбирает корневой элемент документа, эквивалентныйhtmlэлемент
:emptyВыбирает элементы без дочерних элементов
:targetВыберите текущий активный целевой элемент
:not(selector)выбрать кромеselectorэлемент неожиданный элемент
:enabledВыберите доступные элементы формы
:disabledВыбрать отключенные элементы формы
:checkedВыберите выбранный элемент формы
:nth-child(n)Соответствует указанному дочернему элементу под родительским элементом и сортирует первый среди всех дочерних элементовn
nth-last-child(n)Соответствует указанному дочернему элементу под родительским элементом и сортирует первый среди всех дочерних элементовn, считая сзади наперед
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n)Сопоставьте указанный дочерний элемент с родительским элементом и отсортируйте первый элемент в том же дочернем элементе.n
:nth-last-of-type(n)Сопоставьте указанный дочерний элемент с родительским элементом и отсортируйте первый элемент в том же дочернем элементе.n, считая сзади наперед
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selectionВыбрать часть элемента, выбранного пользователем (псевдоэлемент)
:first-lineВыберите первую строку в элементе (псевдоэлементе)
:first-letterВыберите первый символ в элементе (псевдоэлемент)
:afterдобавить содержимое после элемента (псевдоэлемент)
:beforeдобавить содержимое перед элементом (псевдоэлемент)

6. Как центрировать div? Как центрировать плавающий элемент? Как центрировать абсолютно позиционированный div?

горизонтально по центру

// 方式1： 使用margin： 0 auto居中
css: 
    * {margin: 0; padding: 0;}
    .content {
        margin: 0 auto;
    	width: 100px;
    	height: 100px;
        background: pink;
    }

// 方式2： 使用 定位 + left 居中

css: 
    * {margin: 0; padding: 0;}
    .content {
    	width: 100px;
        height: 100px;
        background: pink;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
html:
   <div class="content"></div>

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

    
1.已知父元素高度情况下
方法1：
css: 
    * {margin: 0; padding: 0;}
    .content {
    	width: 600px;
    	height: 600px;
    	border: 1px solid #ccc;
    }
    .content-one {
        width: 100px;
        height: 100px;
        background: pink;
        position: relative;    // 父元素无定位，子元素直接用相对定位
        top: 50%;
        transform: translateY(-50%);
    }

html: 
    <div class="content">
       <div class="content-one"></div>
    </div>
方法2：
css: 
* {margin: 0; padding: 0;}
.content {
    width: 600px;
    height: 600px;
    border: 1px solid #ccc;
    position: relative;     // 给父元素定位，子绝父相
}
.content-one {
    width: 100px;
    height: 100px;
    background: pink;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

html: 
    <div class="content">
       <div class="content-one"></div>
    </div>

Как центрировать абсолютно позиционированный div

css: 
    * {margin: 0; padding: 0;}
    .content {
        margin: 0 auto;
        position: absolute;
        width: 1500px;
        background: pink;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

html: 
    <div class="content"></div>

7. Какие значения отображения? Какова их роль?

ценность	эффект
none	Элемент не будет отображаться после использования
grid	Определите свойство контейнера для макета сетки
flex	определить гибкий макет
block	После использования элемент будет отображаться как блочный элемент с разрывами строк до и после элемента.
inline	отображать значение по умолчанию. После использования основной цвет становится встроенным отображением элемента, и до и после нет разрыва строки.
list-item	Используйте элемент сообщения для отображения в виде списка
run-in	После использования элемент отображается как элемент уровня блока или встроенный элемент в зависимости от контекста.
table	При использовании он будет отображаться в виде таблицы на уровне блоков (что-то вроде`<table>`) с новыми строками до и после
inline-table	После использования элемент будет отображаться в виде встроенной таблицы (что-то вроде`<table>`) без новой строки до или после
table-row-group	Элементы будут отображаться как группа из одной или нескольких строк (что-то вроде`<tbody>`)
table-hewder-group	Элементы будут представлены в виде групп из одной или нескольких строк (что-то вроде`<thead>`)
table-footer-group	Элементы будут отображаться сгруппированными в одну или несколько строк (что-то вроде`<tfoot>`)
table-row	Элемент будет отображаться в виде строки таблицы (что-то вроде`<tr>`)
table-column-group	Элементы будут отображаться как группа из одного или нескольких столбцов (что-то вроде`<colgroup>`)
table-column	элементы будут отображаться в виде столбца ячеек (что-то вроде`<col>`)
table-cell	Элемент будет отображаться как ячейка таблицы (что-то вроде`<td>和<th>`)
table-caption	элемент будет отображаться как заголовок таблицы (что-то вроде`<caption>`)
inherit	Указывает, что значение свойства отображения должно быть интегрировано из родительского элемента.

Среди них широко используются:block,inline-block,none,table,line.

8. Значение относительного и абсолютного положения определяет исходную точку?

Во-первых, используйтеpositionКогда , вы должны иметь в виду, что правилоСын Отца’.

relative(относительное позиционирование): создать элемент с относительным позиционированием, а источником позиционирования является положение самого элемента;

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

fixed(Не поддерживается старым IE): генерировать абсолютно позиционированные элементы, расположенные относительно окна браузера.

static: По умолчанию. Без позиционирования элемент появляется в обычном потоке (игнорируяtop, bottom, left, right,z-indexутверждение).

inherit: указывает наследование от родительского элементаpositionСтоимость имущества.

обновить свойство

sticky: (новые элементы, совместимость в настоящее время может быть не очень хорошей), вы можете установить position:sticky и указать одно из (верхнее, нижнее, правое, левое) одновременно.

Уведомление:

использоватьsticky, одно из верхних, нижних, левых и правых значений должно быть указано, иначе это будет только в относительном позиционировании;
stickyЭффект только внутри его родительского элемента, и высота родительского элемента гарантированно будет выше, чемstickyвысота;
Родительский элемент не можетoverflow:hiddenилиoverflow:autoи другие свойства.

9. Каковы новые возможности CSS3?

оCSSНовые функции заключаются в следующем:

Селектор;
закругленные углы（border-raduis）;
Многоколоночный макет（multi-column layout）;
тень（shadow）и отражение（reflect）;
текстовые эффекты（text-shadow）;
рендеринг текста（text-decoration);
Линейный градиент（gradient）;
вращать（rotate)/увеличение（scale）/наклон（skew）/переехать（translate）;
запросы средств массовой информации（@media）;
RGBAи прозрачность;
@font-faceАтрибуты;
несколько фоновых изображений;
размер коробки;
голос;

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

10. Каков принцип создания треугольника с помощью чистого CSS?

Способ 1: скройте верхний, левый и правый края и установите цвет (прозрачный)

css: 
    * {margin: 0; padding: 0;}
    .content {
        width: 0;
        height: 0;
        margin: 0 auto;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent pink transparent;  // 对应上右下左，此处为 下 粉色
    }

html: 
    <div class="content"></div>

Метод 2: Использование принципа равного деления

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

css: 
    * {margin: 0; padding: 0;}
    .content {
        width:0;
        height:0;
        margin:0 auto;
        border:50px solid transparent;
        border-top: 50px solid pink;
    }

html: 
    <div class="content"></div>

11. 🤨Что такое адаптивный дизайн? Каковы основные принципы адаптивного дизайна? Как быть совместимым с более низкими версиями IE?

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

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

О совместимости: В шапке страницы должно быть указано mate.viewport.

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

12. Зачем инициализировать стили CSS?

Из-за проблем совместимости браузеров разные браузеры имеют разные значения по умолчанию для тегов.CSSИнициализация вызовет различия в отображении одной и той же страницы в разных браузерах.

13. Плавающий принцип и почему он возникает и когда его нужно очищать? Как очистить поплавок?

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

принцип:

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

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

Проблемы с поплавками:

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

Ясный способ:

Родительский блок определяет высоту（height）;
Добавьте один после последнего плавающего элементаdivпустой ярлык и добавить стильclear: both;
Добавьте стили к родительским тегам, содержащим плавающие элементы.overflowзаhidden/both;
Отецdivопределениеzoom;

14. Как можно оптимизировать CSS и повысить производительность?

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

15. Что такое препроцессор/постпроцессор 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код, который можно применить к старым проектам

16. В чем разница между двойным двоеточием и одинарным двоеточием в ::before и :after? Объясните роль этих двух псевдоэлементов.

(1), двоеточие (:) заCSS3Псевдокласс, двойное двоеточие (::) заCSS3Псевдоэлемент.

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

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

17. Как с помощью CSS сделать шрифты на странице четче и тоньше?

-webkit-font-smoothing существуетwindow работает не под системой, а вIOS работает на устройстве-webkit-font-smoothing：antialiased является оптимальным, сглаживание оттенков серого.

18. Если вам нужно вручную писать анимацию, как вы думаете, какой минимальный интервал времени и почему?

Частота по умолчанию для большинства мониторов60Hz, то есть обновлять 60 раз за 1 секунду, поэтому теоретический минимальный интервал равен1/60＊1000ms ＝ 16.7ms.

19. В чем разница между эффектом прозрачности rgba() и непрозрачностью?

opacityПрозрачность применяется к элементу и всему содержимому внутри элемента (включая текст);

rgba() Работает только с собственным цветом элемента или цветом его фона, а дочерние элементы не наследуют эффект прозрачности;

20. Что делает содержимое свойства css?

contentсвойства применяются специально дляbefore/afterВ псевдоэлементах используется для вставки дополнительного контента или стилей.

21. 🧐 Пожалуйста, объясните CSS3 Flexbox (модель макета flex box) и применимые сценарии?

концепция:FlexдаFlexible BoxАббревиатура для «гибкой компоновки», используемая для обеспечения максимальной гибкости блочных моделей. использоватьFlexэлементы макета, называемыеFlexконтейнер（flex container）, именуемый «контейнером». Все его дочерние элементы автоматически становятся членами контейнера, называемымиFlexпроект（flex item）, именуемый «Проект».

Применимые сценарии: любой контейнер может быть указан какFlexмакет.FlexboxСоздавайте автоматически расширяемые и сжимаемые макеты для экранов разных размеров.

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

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

23. Объясните форматы изображений png, jpg, jpeg, bmp и gif и когда их использовать. Вы узнали о webp?

(1),png- Портативные веб-изображения（Portable Network Graphics）, представляет собой формат файла растрового изображения со сжатием данных без потерь. Преимущества: высокая степень сжатия и хорошая цветопередача. Доступен в большинстве мест.

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

(3),gif— это формат файла растрового изображения, который воспроизводит изображения в реальном цвете с 8-битным цветом. Эффекты анимации могут быть достигнуты.

(4),bmpДостоинства: Качественные картинки Недостатки: Слишком большие Применимые сценарии:windowsОбои для рабочего стола;

(4),webpФормат представляет собой формат изображения, запущенный Google в 2010 году, и степень сжатия составляет всегоjpg2/3 соотношения размераpngна 45% меньше. Недостатком является то, что время сжатия больше, а совместимость плохая.В настоящее время Google иoperaслужба поддержки.

24. Какая разница в производительности, когда px и em часто используются в стилях CSS?

pxФункция увеличения шрифта браузера недоступна относительно разрешения экрана монитора.

emЗначение не является фиксированным и наследует размер шрифта родителя:em = 像素值 / 父级font-size.

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

Вариант первый:.content { height: calc(100%-100px); }

Вариант 2:.container { position:relative; } .content { position: absolute; top: 100px; bottom: 0; }

третье решение:.container { display:flex; flex-direction:column; } .content { flex:1; }

26.overflow: Как решить проблему невозможности плавной прокрутки при прокрутке?

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

27. В чем разница между преобразованием, анимацией и длительностью анимации?

Transform: это иwidth,leftТочно так же многие статические стили элементов определены для достижения таких функций, как деформация, вращение, масштабирование, смещение и перспектива.Благодаря сочетанию ряда функций мы можем добиться классных статических эффектов (без анимации).
Animation: воздействует на сам элемент, а не на атрибут стиля, относящийся к категории анимации по ключевым кадрам, который сам по себе используется для замены некоторых чисто выразительных элементов.javascriptкод для достижения анимации, вы можете передатьkeyframeЯвно управлять значением свойства текущего кадра.
animation-duration: указывает время, необходимое для завершения анимации, в секундах или миллисекундах.

28. Как понимать высоту строки?

line-heightЭто относится к высоте строки слов, включая расстояние между словами, которое на самом деле является расстоянием от базовой линии следующей строки до базовой линии предыдущей строки. Если тег не определенheightсвойство, то высота его конечной производительности определяется выражениемline-heightрешил. Контейнер не имеет установленной высоты, тогда высота, которая растягивает контейнер, равнаline-height, а не текстовое содержимое внутри контейнера. Пучокline-heightустановлено значениеheightЗначение того же размера может обеспечить вертикальное центрирование одной строки текста.line-heightиheightможет держаться на высоте,heightвызоветhaslayout,иline-heightНе буду.

29. Как написать модуль стиля извлечения? описать его идеи.

возможноcssДелится на две части: общедоступнаяCSSи бизнесCSS.

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

30. Следует ли использовать на веб-страницах четные или нечетные шрифты?

На веб-страницах следует использовать «четный» шрифт:

Четные числа относительно легче суммироватьwebОстальные части дизайна образуют пропорциональные отношения.При использовании шрифтов с нечетными номерами текстовые абзацы не могут быть выровнены.Наиболее часто используемый в макете китайских веб-страниц в династии Сун12и14.

31. 🤥 Что такое перекрытие полей? Каков результат перекрытия?

Во-первых, перекрытие полейmargin-collapse. Поля двух соседних блоков (возможно, родственных или предков) можно объединить в одно поле. Такой способ объединения полей называется свертыванием, а объединенные поля называются сворачивающимися полями.

Результаты складывания следуют следующим принципам расчета:

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

32. В чем разница между отображением: нет и видимостью: скрыто;

Контакт: значение этих двух свойств может сделать элемент невидимым;

разница:

С точки зрения занимаемой площади:display: none;элемент полностью исчезнет из дерева рендеринга и не займет места при рендеринге;visibility: hidden;Не заставляет элемент исчезать из дерева рендеринга, элемент рендерера продолжает занимать место, но содержимое не видно;
С точки зрения наследства:display: none;Это ненаследуемый атрибут, узел-потомок исчезает, потому что элемент исчезает из дерева рендеринга и не может быть отображен путем изменения атрибута узла-потомка;visibility:hidden;Это унаследованное свойство, и узел-потомок исчезает из-за наследования.hidden, установивvisibility: visible;Вы можете сделать дочерние узлы явными;
С точки зрения перерисовки и перекомпоновки: изменяетdisplayОбычно вызывает перестановку документа. ИсправлятьvisibilityАтрибут вызовет только перерисовку этого элемента

Программы чтения с экрана не читаютdisplay: none;содержимое элемента; будет читатьvisibility: hiddenсодержание элемента;

33. Каковы принципы взлома css и часто используемые хаки?

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

Общийhackимеют:взлом собственности,взломать селектор,Условные комментарии IE.

34. В чем разница между ссылкой и @import?

linkдаHTMLСпособ,@importдаCSSСпособ;
linkМаксимальная поддержка параллельных загрузок,@importСлишком большая вложенность приводит к последовательной загрузке, появляющейсяFOUC;
linkв состоянии пройтиrel="alternate stylesheet" Укажите стили-кандидаты;
пара браузеровlinkподдержку раньше, чем@import ,можно использовать@importСкрыть стили от старых браузеров;
@importНа другие файлы можно ссылаться в файле css, они должны быть перед правилами стиля;

В целом:linkлучше чем@import.

35. Что такое FOUC (Flash of Unstyled Content)? Как избежать FOUC?

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

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

Решение: просто<head>добавить один между<link>или<script>``</script>элемент.

36. Какая связь между display, float и position?

еслиdisplayзаnone,Такpositionиfloatни работает, элемент не отображается;
еслиpositionзначениеabsoluteилиfixed, элемент абсолютно позиционирован,floatрассчитывается какnone,displayВнесите коррективы в соответствии с таблицей ниже;
еслиfloatнетnone, коробка плавает,displayОтрегулируйте в соответствии с таблицей ниже;
в других случаяхdisplayЗначение указанного значения Подводя итог: абсолютное позиционирование, плавающие, корневые элементы необходимо настроитьdisplay;

37. Сворачивающиеся поля

два и более смежныхmarginбудут объединены в одинmargin, называемое схлопыванием полей. Правила следующие:

Два или более смежных блочных элемента в нормальном потоке в вертикальном направленииmarginбудет складываться;
плавающий элемент илиinline-blockэлемент или абсолютно позиционированный элементmarginне будет взаимодействовать с другими элементами в вертикальном направленииmarginскладывать;
Элемент, создающий контекст форматирования на уровне блока, не взаимодействует со своими дочерними элементами.marginскладывать;
собственный элементmargin-bottomиmargin-topТакже складывается, когда рядом;

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

visibility: hidden;Это свойство просто скрывает элемент, но пространство, занимаемое элементом, все еще существует;
opacity: 0;``CSS3Атрибут, установка 0 может сделать элемент полностью прозрачным;
position: absolute;Установите большое отрицательное левое позиционирование, чтобы расположить элемент за пределами видимой области;
display: none;Элемент становится невидимым и больше не занимает место в документе;
transform: scale(0);Установите для элемента бесконечно малый масштаб, элемент не будет виден, а исходное положение элемента будет сохранено;
<div hidden="hidden"> HTML5свойства, эффекты иdisplay:none;То же самое, но это свойство используется для записи состояния элемента;
height: 0;Установите высоту элемента на 0 и удалите границу;
filter: blur(0); CSS3Атрибут, чем больше значение в скобках, тем больше степень размытия изображения по Гауссу, и изображение исчезнет при достижении определенного уровня（此处感谢小伙伴支持）;

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

liНа расположение влияет пробел посередине (возврат каретки/пробел) и т. д., поскольку пробел также является символом, он будет занят применяемым стилем, что приведет к появлению пробела. Решение:

существуетulкитайское использованиеfont-size：0(не поддерживается Google); вы можете использоватьletter-space：-3px;
настраиватьfloat：left；

40. Как браузеры анализируют селекторы CSS?

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

41.🤭Какой принцип полноэкранной прокрутки? Какие свойства CSS используются?

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

возможное использованиеCSSРод:overflow:hidden; transform:translate(100%, 100%); display:none;

❤️расширять: Вы также можете воспользоваться преимуществом визуальной прокрутки в полноэкранном режиме, использоватьbackground-attachment: fixed; для достижения полноэкранного эффекта. (Вот еще одна идея, предложенная заботливыми друзьями🤨)

42. Понимание ядра браузера?

Ядро браузера в основном разделено на две части: движок рендеринга и движок js;

Механизм рендеринга: отвечает за получение содержимого страницы (html,xml, изображения и т. д.), организация сообщений (добавлениеcssд.), и рассчитать режим отображения веб-страницы, а затем вывести ее на монитор или принтер. Разные ядра браузеров по-разному интерпретируют синтаксис веб-страниц, поэтому эффекты рендеринга также будут разными. Ядро требуется для всех веб-браузеров, почтовых клиентов и других приложений, которым необходимо редактировать и отображать веб-страницы.
JSДвижок: анализ и выполнениеJavascriptДля достижения динамического эффекта веб-страницы.

Изначально движок рендеринга иjsДвигатели четко не дифференцированы, позжеjsДвигатели становятся все более и более независимыми, а ядро стремится только к рендерингу движков.

43. Понимание и понимание стандартов WEB и W3C

Требования к структуре: (стандартизированные теги позволяют повысить эффективность сканирования страниц поисковыми системами.SEOочень полезно)

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

заCSSиJSСказать:

Максимально используйте внешние ссылкиCSSтаблицы стилей иJSсценарий. При этом структура, производительность и поведение делятся на три части, соответствующие норме. Кроме того, необходимо повысить скорость рендеринга страниц и улучшить взаимодействие с пользователем.
Сведите к минимуму использование встроенных стилей, чтобы разделить структуру и представление. помеченidиclassНазвания атрибутов и т. д. должны быть знакомы тексту Чем меньше тегов, тем быстрее загрузка и выше пользовательский опыт. В то же время код будет легче поддерживать и легко модифицировать.
Нет необходимости изменять содержимое, вы можете распечатать версию вместе, не копируя содержимое, что повышает удобство использования веб-сайта.

44. Сделать сайт с большим трафиком, как управлять всеми файлами css, js и картинками?

Ответ с точки зрения рабочей силы, разделения труда и синхронизации:

На ранней стадии команда должна подтвердить глобальный стиль и режим кодирования;
Стиль кода и манера написания совпадают;
Автор стиля аннотации, каждый модуль должен быть помечен во времени (отметить место, где вызывается ключевой стиль);
Отметьте страницы, за которые вы отвечаете;
CSSиJSПодпапки хранятся параллельно, и названия должны быть унифицированы;
JSхранилище подпапок, очевидно, сJSАнглийский перевод функции имеет преимущественную силу;
Изображение интегрировано.pngОтформатируйте хранилище, попробуйте интегрировать его вместе, чтобы облегчить управление в будущем;

45. Эффект прокрутки параллакса и как его добиться?

Параллаксная прокрутка（Parallax Scrolling）Относится к технологии отображения веб-страницы (3D-эффект), в которой многоуровневые элементы перемещаются в разной степени в процессе прокрутки веб-страницы для визуального формирования трехмерного эффекта движения.

Метод реализации:

CSS3Реализация: Преимущество заключается в том, что время разработки относительно короткое, а производительность и эффективность разработки относительно хорошие. Недостатком является то, что он не совместим с браузерами более ранних версий;
JQueryРеализация: (за счет управления скоростью прокрутки разных слоев и расчета времени каждого слоя) преимущество в том, что он может быть совместим с различными версиями, и эффект управляем, но недостаток в том, что у него более высокие требования к производителю;
Реализация плагина: например, использованиеparallax-scrolling, совместимость очень хорошая;

46. Понимание спецификации BFC (контекст форматирования блока: контекст форматирования блока)

BFCпредусматривает внутреннююBlock BoxКак оформить. Страница состоит из множестваBoxсостав, тип элементов иdisplayсвойства, определяющие этоBoxтип. различные видыbox, примет участие в различныхFormatting Context(контейнер, который решает, как отображать документ), поэтомуBoxЭлементы внутри будут отображаться по-другому, т.е.BFCВнутренний элемент и внешний элемент не влияют друг на друга.

Схема позиционирования:

Внутреннийboxбудут располагаться друг за другом в вертикальном направлении;
boxРасстояние по вертикали определяется какmarginрешение, принадлежат к одномуBFCдва соседнихBoxизmarginпроисходит перекрытие;
каждый элементmargin boxслева, с содержащим блокомborder boxлевая сторона контакта;
BFCОбласть не будет перекрываться с плавающей рамкой;
BFCЭто изолированный и независимый контейнер на странице, и элементы внутри контейнера не будут влиять на элементы снаружи;
рассчитатьBFC, плавающие элементы также будут участвовать в расчете.

Вы можете запустить BFC, если выполняется одно из следующих условий:

Меняется корневой элемент, т.е.html;
floatЗначение неnone(дефолт);
overflowЗначение неvisible(дефолт);
displayзначениеinline-block, tabke-cell,table-caption;
positionзначениеabsoluteилиfixed;

47. Относится ли вертикальный процент элемента к высоте контейнера?

Как правило, процентная единица дочерних элементов основана на родительском элементе. ноmarginиpaddingисключение. элементальheightотносительно высоты контейнера, но элементmarginиpaddingотносится к ширине контейнера.

48. Как создать полноэкранный макет «пинци»?

Способов довольно много, но самый простой:divШирина установлена на 100%, а нижние дваdivустановлен в50%и использоватьfloatилиinlineПросто держите его на одной линии (конкретный стиль можно настроить самостоятельно). следующее:

css: 
.content {
    width: 50%;
    height: 150px;
    margin: 0 auto;
}
.top {
    width: 40%;
    height: 50px;
    background-color: pink;
    margin-bottom: 50px;
    margin-left: 30%;
}
.left {
    width: 45%;
    height: 50px;
    background-color: pink;
    float: left;
}
.right {
    width: 45%;
    height: 50px;
    background-color: pink;
    float: right;
}

html: 
<div class="content">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>>

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

(1), проблема:png24битовые картинки вieВ браузере появится фон. Решение: сделатьpng8;

(2), проблема: браузер по умолчаниюmarginиpaddingразные. Решение: добавить глобальный*{ margin： 0; padding： 0;};

(3), проблема:IEНиже вы можете использовать метод получения обычных свойств, чтобы получить пользовательские свойства, или вы можете использоватьgetAttribute()чтобы получить пользовательские свойства, в то время какFirefoxвниз, используйте толькоgetAttribute()Получить пользовательские свойства. Решение: унифицировано черезgetAttribute()Получить пользовательские свойства;

(4), проблема:IEВниз,eventобъект имеетx,yсвойства, но нетpageX,pageYсвойства, при этомFirefoxВниз,eventобъект имеетpageX,pageYсвойства, но нетx,yАтрибуты. Решение: использоватьmX(mX = event.x ? event.x : event.pageX;)заменитьIEвнизevent.xилиFirefoxвнизevent.pageX.

50. Каковы наиболее часто используемые свойства box-sizing? Каков эффект каждого?

box-sizing: content-box;// стандарт по умолчанию(W3C)Эффект элемента блочной модели;
box-sizing: border-box;// вызвать странность(IE)Эффект элемента боксовой модели;
box-sizing: inherit;// наследовать от родительского элементаbox-sizingстоимость имущества;

51. 🤤 Должны ли использоваться нечетные или четные шрифты на веб-страницах?

Как правило, на веб-страницах следует использоватьчетноешрифт. причина:

Четные числа относительно легче суммироватьwebОстальная часть дизайна представляет собой пропорциональные отношения;
Абзацы текста не выравниваются при использовании системы счисления;
Наиболее часто используемые в макете китайских веб-страниц типа Song — 12-й и 14-й.

52. Для каких сценариев подходят margin и padding?

(1), необходимоborderПри добавлении заготовок снаружи и заготовкам не нужен фон (цвет), или когда заготовкам между двумя коробками, соединенными вверх и вниз, необходимо аннулировать друг друга, вы можете использоватьmargin;

(2), необходимоborderПри добавлении пробела внутри и бланку нужен фон (цвет) или пробел между двумя прямоугольниками, соединенными вверх и вниз, вы можете использовать его, когда хотите, чтобы он был равен сумме двухpadding.

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

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

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

p::first-child {color: red}

Псевдокласс: существуетDOMКатегория «призрак», которая логически существует в документе, но не нуждается в идентификации в дереве документа.

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

🍀Уведомление:

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

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

существуетCSSКитайские псевдоклассы всегда представлены : , например:hover, :activeЖдать;
псевдоэлемент вCSS1уже существует в , в то время синтаксис был представлен : , например :beforeи:after;
позжеCSS3Средняя ревизия, используются псевдоэлементы:: средства, такие как::beforeи::after, чтобы отличать псевдоэлементы от псевдоклассов;
из-за более низкой версииIEОн не совместим с двойным двоеточием.Для совместимости с различными браузерами разработчики продолжают использовать:afterЭтот старый синтаксис представляет псевдоэлементы;

В итоге:::beforeдаCSS3Новый синтаксис для записи псевдоэлементов в ;:afterдаCSS1существующий в, совместимый сIEстарый синтаксис.

55. Как сделать текст поддержки Chrome меньше 12 пикселей?

.shrink {
    -webkit-transform: scale(0.8);
    -o-transform: scale(1);
    display: inilne-block;
}

56. Установить несколько элементов в одну строку, сколько способов очистить поплавок?

Способы установки нескольких элементов на одной строке: используйтеfloatилиinline-block;

Способ очистки поплавка:

Добавить новые элементы, применитьclear： both;
Отецdivопределениеoverflow：hidden;
использовать：afterи：beforeЧтобы вставить два блока элементов внутрь элемента, чтобы добиться эффекта очистки поплавка.

.clear { zoom:1; }
.clear:after { 
  content:" "; 
  clear:both;
  display:block;
  height:0;
  overflow:hidden;
  visibility:hidden;
}

57. Кратко о концепции CSS-хака и нескольких CSS-хаках?

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

(1), разрыв изображения

существуетdivвставить картинку вdivрастянуться3px:

hack1: будет<div>и<img>пишется на одной строке;
hack2: давать<img>Добавить кdisplay：block;

dt liРазрыв изображения в:

hack1:давать<img>Добавить кdisplay：block;

(2), высота по умолчанию,IE6В следующих версиях некоторые элементы блока имеют высоту по умолчанию (менее 18 пикселей):

hack1: добавить к элементу:font-size： 0;
hack2: Заявление:overflow： hidden;

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

hack1: Добавьте объявление в форму:float： left; height: ; border: 0;

курсор мыши:

hack: если указатель мыши элемента объединен в форму руки:cursor： pointer;, когда a in li преобразуется в блочный элемент, дайтеaнастраиватьfloat,IEВнутри будут ступеньки;
hack1: даватьaДобавить кdisplay： inline-block;
hack2: даватьliДобавить кfloat: left;

58. В чем разница между CSS2.0 и CSS3.0?

CSS3усиленныйCSS2, добавлены новые атрибуты и новые теги, а также удалены некоторые избыточные теги, что уменьшило объем кода с точки зрения макета. Ранее сложные макеты теперь можно решить с помощью одного свойства (например,columnsЖдать). К презентационным эффектам добавлено больше эффектов (таких как анимация, тени, закругленные углы и т. д.), а также улучшены блочная модель и модули списка. ноCSS3С точки зрения совместимости все еще есть некоторые недостатки, которые могут поддерживать только некоторые браузеры высокого уровня.

59. Определение блочных элементов, встроенных элементов и пустых элементов?

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

60. Как исправить проблемы со стилем в браузере?

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

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

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

🍀Уведомление: Перед началом проекта необходимо подтвердить минимальную версию, поддерживаемую совместимостью, чтобы разработать соответствующее решение совместимости.

61. 🥴Как браузер определяет, соответствует ли элемент селектору CSS?

Браузер сначала генерирует набор, который обычно формируется по индексу последней части (если индекса нет, то это набор всех элементов). Затем сопоставьте вверх.Если он не соответствует предыдущей части, удалите элемент из набора до тех пор, пока не будет сопоставлен селектор, а элементы, все еще находящиеся в наборе, не будут соответствовать селектору.

62. Опишите роль и цель сброса css?

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

63. Что такое CSS-спрайты? как пользоваться?

cssSprite, который объединяет кучу маленьких картинок в большую картинку (png), используяCSSиз“background-image”,“background- repeat”``，“background-position”Комбинация фонового позиционированияbackground-positionПоложение фонового изображения можно точно определить по номерам, а количество запросов изображений с сервера можно уменьшить.

64. Каковы преимущества и недостатки CSS-спрайтов?

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

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

недостаток:

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

расширять:В настоящее время спрайты, используемые при разработке веб-сайтов (например, библиотеки шрифтов), как правило, напрямую используются в облаке, а не используются такие локальные, как библиотека значков Ali.

65. Отличие и применение абсолютного позиционирования и плавающего?

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

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

66. Как исправить двойное поле в IE6, когда float и margin используются одновременно?

Когда направление поплавка иmarginКогда он находится в том же направлении, IE6 создаст двойное значение для первого элемента в этом направлении.margin.

Решение:

(1), изменитьmarginнаправление,float:left; margin-right:20px;плавать влево,marginНаправо; (2) Напишите отдельный класс для первого элемента с именем.content, В настоящее время.content{_margin-left:一半的margin;}; (3), используйтеdisplay:inline;Не нужно плавать (хахахаха).

67. Кратко опишите, что такое разделение содержания и представления?

Первый дляhtml,cssа такжеjavascript, что можно понимать следующим образом:

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

Что касается разделения контента и исполнения, то понимание редактора таково: постарайтесь неhtmlВставьте встроенные стили вhtmlРазделение «скелета» и стиля не только полезно для поисковых систем, но и удобно для последующего обслуживания.

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

Используйте процентную раскладку, используйте проценты для ширины записи,marign,padding;
использоватьremДелай единицы, пиши правильноjs``让htmlРазмер шрифта корневого элемента меняется пропорционально ширине браузера;
Используйте медиа-запросы, чтобы браузеры разной ширины использовали разные таблицы стилей.

69.Почему rem можно масштабировать и что такое эталон? Каковы его преимущества и недостатки?

rem``以htmlРазмер шрифта является ориентиром, например2rem,иhtmlразмер шрифта16px,В настоящее времяremэто32px. можно написать абзацjsпозволятьhtmlРазмер шрифта корневого элемента изменяется пропорционально ширине браузера, что приводит к пропорциональному масштабированию страницы.

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

относительноemВ интересах , нет постепенного увеличения или уменьшения размера шрифта, потому что размер шрифта корневого элемента всегда интегрируется;remЕдиницы можно применять не только к размеру шрифта, но и к другим размерам, таким как высота, чтобы страницу можно было адаптировать к разным размерам экрана.

🍀Уведомление:remОбычно используется только на мобильных терминалах.

70. 5 распространенных проблем совместимости скриптов Firefox и IE.

привязать слушателя:IEдаattatchEvent(),firefoxдаaddEventListener();
стиль расчета:IEдаcurrentStyle,firefoxдаgetComputedSyle;
событие прокрутки:IEдаMouseWheel,firefoxдаonmousewheel;
элемент формы:IEдаdocument.forms(”formname”),firefoxдаdocument.forms["formname"];
объект события:IEдаwindow.eventАтрибуты,firefoxОбработчик события должен быть введен с аргументамиevent;

71. Как рассчитывается приоритет 🥳css?

Чтобы закрепить:

Классификация	приоритет
селектор элементов	1
селектор класса	10
селектор идентификатора	100
тег элемента	1000

(1),!importantОбъявленный стиль имеет наивысший приоритет, и в случае возникновения конфликта он будет пересчитан;

(2) При одинаковом приоритете последний стиль имеет преимущественную силу;

(3) Приоритет унаследованного стиля самый низкий.

72. Рассмотрите ценность положения и его роль?

static(по умолчанию): упорядочить в соответствии с обычным потоком документов;
relative(относительное позиционирование): не отходя от потока документов, ссылаться на собственное статическое положение черезtop, bottom, left, rightдолжность;
absolute(абсолютное позиционирование): ближайшее опорное расстояние неstaticРодительский элемент передаетсяtop, bottom, left, rightдолжность;
fixed(Фиксированное позиционирование): фиксированным эталонным объектом является видимое окно.

73. Какие виды расширенных макетов существуют?

Поддельные столбцы одинаковой высоты: используйте фоновое изображение и используйте это фоновое изображение в родительском элементе столбца, чтобы проложить ось Y, чтобы создать иллюзию столбцов одинаковой высоты;
для контейнераdivИспользуйте отдельный цвет фона (фиксированный макет) (гибкий макет): используйте максимальную высоту элемента, чтобы поддерживать высоту других контейнеров;
Чтобы создать двухколоночный макет одинаковой высоты с границами: используйтеborder-leftДля этого используйте две колонки;
использовать положительныйpaddingи отрицательныйmarginХеджирование реализует многоколоночный метод компоновки: верх, низ используются во всех столбцах.paddingи минус вверх и внизmarginи добавьте контейнер вне всех столбцов, установитеoverflow： hidden, чтобы вырезать фон переполнения.
Используйте границы и позиционирование для имитации высоты столбцов: но не в нескольких столбцах;
Имитация эффектов высоких столбцов, таких как макет таблицы: плохая совместимость, вie6-7не может нормально работать;

74. Каков порядок выполнения :link, :visited, :hover и :active?

L-V-H-A,l(link)ov(visited)e h(hover)a(active)te, то есть суммируется словами нравится и ненавижу.

75. Каковы часто встречающиеся совместимости браузеров? Как решить?

браузер по умолчаниюmarginиpaddingразные;
IE6двойное расстояниеbug;
существуетIE6-7Высота среднего элемента превышает высоту, установленную им самим. Причина в том, что браузеры до IE8 устанавливали высоту строки марионетки в элемент;
min-heightсуществуетIE6не работает под;
прозрачностьIEиспользоватьfilter：Alpha（Opacity=60）, в то время как другие основные браузеры используютopacity： 0.6;
inputпограничная проблема, удалитьinputграница общего пользованияborder：none；просто отлично, но так какIE6разборinputвремя стиляbug(приоритетный вопрос), вIE6является недействительным;

76. Зачем нужна семантика и понимание семантики ярлыков?

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

понимать:

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

77. Каковы общие макеты CSS?

ОбщийCSSМакеты:Фиксированная раскладка,Схема потока,Гибкая компоновка,плавающий макет,макет позиционирования,поля и отступы.

78. В чем сходство и различие между абсолютным и фиксированным положением?

Тот же пункт:

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

разница:

absolute"Корневой элемент" может быть установлен, в то время какfixed«Корневой элемент» прикрепляется к окну браузера;
При прокрутке страницы,fixedРасстояние между элементом и окном браузера постоянно.

79. Какие свойства CSS можно наследовать? Какие свойства нельзя наследовать?

Наследуемые свойства стиля:font-size,font-family,color,list-style,cursor,ul, li, dl, dd, dt;
Ненаследуемые свойства стиля:width,height,border,padding,margin,background;

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

80. Используете препроцессор CSS?

CSSОсновная идея препроцессора: дляCSSДобавлены некоторые переменные функции (переменные, логика и функции суждений и т. д.).

Разработчики используют этот язык для разработки стилей на веб-страницах, а затем компилируют их в обычныеcssиспользование файлов. Используя препроцессоры CSS, вы можетеCSSБолее краткий, более адаптируемый и более читабельный, независимо от совместимости. чаще всего используетсяCSSК языкам препроцессора относятся:Sass(Scss)иLess.

81. 🤧 После того, как элемент станет плавающим, как изменится отображаемое значение элемента?

После установки элемента в плавающее, элементdisplayзначение автоматически становитсяblock.

82. Что такое строчные элементы, блочные элементы, пустые (void) элементы?

Встроенные элементы:a,b,span,img,input,strong,select,label,em,button,textarea;
Элементы уровня блока:div,ul,li,dl,dt,dd,p,h1-h6,blockquote;
Пустой элемент: то есть без фактического содержанияhtmlэлементы, такие как:br, meta, hr,link,input,img;

83. Свойство размера коробки?

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

content-box: W3CСтандартная блочная модель элемента setheight/widthатрибут относится кcontentширина/высота секции;
border-box: традиционная блочная модель IE. установить элементheight/widthатрибут относится кborder + padding + contentвысота/ширина секции;

84. Каковы преимущества анимации CSS3 по сравнению с анимацией на основе сценариев?

По сравнению со сценарной анимацией используйтеCSS3Анимация имеет следующие преимущества:

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

85. Как оптимизировать стиль печати веб-страниц?

<link rel="stylesheet" type="text/css" media="screen(或者print、tv等) href="aaa.css">

🍀Уведомление, в таблице стилей печати следует также отметить следующие моменты:

Лучше не использовать фоновые изображения в таблицах стилей печати, потому что принтеры не могут печатать фоновые изображения CSS. Если вы настаиваете на отображении изображения, вы можете использоватьhtmlвставить на страницу;
Лучше не использовать пиксели в качестве единицы измерения, потому что таблица стилей печати для печати — это реальная вещь, рекомендуется использоватьpt/cm;
Скройте ненужный контент. (как@print content{display: none});
Плавающие свойства устарели (и редко рекомендуются) в таблицах стилей печати, поскольку они исчезают.

86. В чем разница между стилями и css в React Native?

React NativeСтиль в основном реализованCSSподмножество , и имена свойств не совсем совпадают, поэтому, когда вы начинаете думать о совместимости React NativeПеред окончанием можно вкратце разобратьсяReact Nativeстиль.
Эти имена стилей в основном следуютwebВверхCSS названный, как раз в соответствии сJSСинтаксис требует использования camelCase.
RNиспользоватьJavaScriptДля написания стилей все основные компоненты принимают имена, называемыеstyleсвойства, эквивалентныеcssвстроенные стили.
существуетReact Native Используйте правила Flexbox для указания макета дочерних элементов компонента.FlexboxОбеспечивает согласованную структуру макета для разных размеров экрана. Поэтому, если вы хотите рассмотретьReact Nativeконец, то ваш макет стиля должен использоватьFlexмакет.

87. В чем разница между тегом стиля, написанным после тела и перед телом?

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

если написано вbodyПосле тега, поскольку браузер анализирует html-документ построчно, при анализе таблицы стилей, написанной в конце документа, браузер останавливает предыдущую визуализацию и повторно визуализирует после того, как таблица стилей будет загружен и проанализирован. ,существуетwindowsизIEможет появиться нижеFOUCявление (мерцание страницы).

88. Свойство overflow свойства CSS определяет, как будет обрабатываться содержимое области содержимого элемента переполнения?

параметрscroll, появится полоса прокрутки;
параметрautoКогда содержимое дочернего элемента больше, чем содержимое родительского элемента, появляется полоса прокрутки;
параметрvisible, переполняющее содержимое отображается за пределами родительского элемента;
параметрhiddenКогда переполнение скрыто;

89. Что такое BFC, IFC, GFC, FFC?

Block formatting context(BFC)--контекст форматирования на уровне блока;
Inline formatting context(IFC)-- встроенный контекст форматирования;
Grid formatting context(GFC)--Контекст форматирования макета сетки;
Flex formatting context(FFC)-- контекст адаптивного форматирования;

90. На что следует обратить внимание при использовании изображений?

оптимизировать изображения;
попытайся избежатьhtmlиспользовать сжатые изображения в
используйте соответствующий формат изображения;
использоватьcss spritesТрюки по оптимизации изображений;

91. 😯 Как оптимизировать изображения и в чем разница между форматами изображений?

Оптимизация изображений:

Нет картинок, попробуйте использоватьCSS3заменять. Для достижения некоторых декоративных эффектов, таких как тени, закругленные углы, полупрозрачность и т. д., вы можете использоватьCSS3Заканчивать;
По возможности используйте векторную графикуSVGвместо растрового изображения. Для большинства шаблонов, значков и т. д. векторная графика меньше по размеру и может масштабироваться без создания нескольких наборов изображений. Большинство современных популярных браузеров имеют стабильную поддержкуSVG.

Разница в формате изображения:

Векторы: Иконочные шрифты, такие какfont-awesome,svg;
битовая карта:GIF,jpg（JPEG）,png;

Отличие векторной графики от растровой:

PNG: его можно разделить на три формата:PNG8,PNG24,PNG32. Следующие цифры обозначают этоPNGФормат может индексировать и хранить не более значений цветов;
JPG: формат сжатого изображения с относительно сбалансированным размером и качеством. Он подходит для изображений с насыщенными цветами, которые допускают небольшое искажение, а не для изображений с простыми цветами (менее тонов), таких как значки,logoЖдать;
GIF: 8-битный формат изображения без потерь. С поддержкой анимации, прозрачности индекса, сжатия и других функций. Используйте изображения с простыми цветами.

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

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

92. Что делать, если position:fixed недействительно под мобильным телефоном?

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

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

93. Сравнение преимуществ и недостатков методов внедрения стилей CSS

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

94. В чем разница между border:none и border:0;?

Во-первых, разница в производительности:

{border：0;}: ПучокborderУстановите 0 пикселей, хотя и не видно на странице, но нажмитеborderЗначение по умолчанию понятно, браузер все равно понимаетborder-width/border-colorRendered, то есть значение памяти занято;
{border：none；}понимается какborder-style:none.boder:0;Сравниватьborder:noneсделать еще одинborder-width:0, вот почемуborder:noneпроизводительность, чемborder:0высокий;

Различия совместимости:

{border:none;}когдаborderза“none”кажется правильнымIE6/7Недопустимая граница все еще существует, когдаborderКогда это «0», ощущение лучше, чем“none”Более эффективно все браузеры последовательно скрывают границы.

95. Что будет, если наложить друг на друга position и display, overflow, float?

displayАтрибут указывает тип блока, который должен генерировать элемент;
positionАтрибут указывает тип позиционирования элемента;
floatАтрибуты — это способ компоновки, определяющий, в каком направлении перемещается элемент;

Результаты наложения: чем-то похож на механизм приоритета.positionЗначение --absolute/fixedсамый высокий приоритет, когда они есть,floatне работает,displayЗначение необходимо скорректировать.floatилиabsoluteПозиционированные элементы, только блочные элементы или таблицы.

96. Что такое критический CSS?

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

Основная идея:

(1), извлечь домашнюю страницуCSS;

(2), используйте встроенный стиль CSS, чтобы загрузить эту частьcss(critical CSS);

(3), подождите, пока страница загрузится, а затем загрузите весьcss, будет несколькоcssиcritical cssперекрытие;

97. Что такое рефлоу (рефлоу) и перерисовка и в чем разница?

переплавка (перестановка),reflow:когдаrender treeНекоторые (или все) элементы необходимо время от времени перестраивать из-за изменений размера, макета, скрытия и т. д. элемента;
перерисовать（repaint):когдаrender treeУ некоторых элементов нужно обновлять свойства, и эти свойства влияют только на внешний вид и стиль элемента, но не на макет, это называетсяперерисоватьнапример, изменение цвета и т. д.

🍀Уведомление:Каждая страница должна запускать как минимум одну перекомпоновку + перерисовку, а перекомпоновка (перекомпоновка) обязательно вызовет перерисовку.

Условия, вызывающие перестановку (перекомпоновку):

Добавить или удалить видимыеdomэлемент;
Положение элемента изменилось;
Изменился размер элемента, например, поля, ширина и другие геометрические свойства;
Изменения содержимого, такие как размер изображения, изменение размера шрифта и т. д.;
инициализация рендеринга страницы;
Размер окна браузера изменяется, например.resizeкогда событие происходит и т.д.;

98. Какие два свойства в css позволяют тексту перекрываться по вертикали и по горизонтали?

Вертикальное направление:line-height;
горизонтальное направление:letter-spacing;

🍀Уведомление:letter-spacingможно также использовать для устраненияinline-blockТакие проблемы, как пробелы новой строки между элементами.

99. Каково ваше понимание и понимание стандартов WEB и W3C?

Метка закрытая, метка строчная, вложенность не случайная;
Улучшить поисковую вероятность поисковых роботов;
Используйте внешние ссылкиCSSиJSсценарий;
Разделение меток структурного поведения;
Загрузка файлов и страниц быстрее;
Контент может быть доступен большему количеству пользователей и более широкому спектру устройств;
Меньше кодов и компонентов, простота обслуживания и модификации;
Нет необходимости перемещать содержимое страницы, а также не нужно копировать печатную версию, что повышает удобство использования сайта;

100. Счастливый конец💃🍃

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

Напишите в конце 🌼🌼

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

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

возобновить:Связанныйjavascriptочки знаний были обновлены 🌈🌈