50 вопросов интервью по основам CSS (с ответами)

1. Ввести стандартную блочную модель CSS? Чем он отличается от коробочной модели младших версий IE?

Стандартная коробка Модель: ширина = ширина контента (контент) + граница + прокладка + маржа
Блочная модель IE с низкой версией: ширина = ширина контента (контент+граница+заполнение) + поля

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

Режим синтаксического анализа блочной модели, используемый для управления элементом, по умолчанию — content-box.
context-box: стандартная блочная модель W3C, установка атрибута height/width элемента относится к высоте/ширине части содержимого
border-box: традиционная блочная модель IE. Установка свойства высоты/ширины элемента относится к высоте/ширине границы + заполнения + части содержимого.

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

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

Наследуемые свойства: размер шрифта, семейство шрифтов, цвет

Ненаследуемые стили: граница, отступы, поля, ширина, высота

Приоритет (принцип близости): !important > [id > class > tag]
!important имеет приоритет над встроенным

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

Селектор элементов: 1
селектор класса: 10
селектор идентификатора: 100
Метки элементов: 1000

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

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

p:first-of-type выбирает первый элемент, принадлежащий его родителю
p:last-of-type выбирает последний элемент, принадлежащий его родителю
p:only-of-type выбирает элементы, которые уникальны для их родителя
p:only-child выбирает единственный дочерний элемент, принадлежащий его родительскому элементу
p:nth-child(2) выбирает второй дочерний элемент, принадлежащий его родителю
:enabled :disabled Отключенное состояние элемента управления формы.
:checked Радио или чекбокс отмечен.

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

раздел:

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

Отцентрируйте верхнюю, нижнюю, левую и правую часть плавающего элемента:

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

Абсолютное позиционирование левый и правый центр:

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

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

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

встроенный (по умолчанию) – встроенный
нет - скрыто
блок – отображение блока
таблица – отображение таблицы
list-item – список элементов
inline-block

8. Какова ценность позиции?

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

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

RGBA и прозрачность
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap (Перенос длинных неделимых слов) word-wrap: break-word
Text-shadow: text-shadow: 5px 5px 5px #FF0000; (горизонтальная тень, вертикальная тень, расстояние размытия, цвет тени)
свойство font-face: определите свой собственный шрифт
Закругленные углы (радиус границы): свойство border-radius используется для создания закругленных углов.
Изображение границы: изображение границы: url(border.png) 30 30 раундов
Тень коробки: box-shadow: 10px 10px 5px #888888
Медиа-запрос: определите два набора css, которые будут использовать разные свойства при изменении размера браузера.

10. Объясните, пожалуйста, flexbox CSS3 (модель макета гибкого блока) и применимые сценарии?

Цель этой модели компоновки — предоставить более эффективный способ компоновки, выравнивания и выделения места для элементов в контейнере. В традиционном методе компоновки блочная компоновка предназначена для размещения блоков в вертикальном направлении сверху вниз, а встроенная компоновка — для размещения блоков в горизонтальном направлении. Макет flexbox не имеет таких встроенных ограничений ориентации и может свободно манипулироваться разработчиком.
Пробный сценарий: эластичный макет подходит для мобильной фронтенд-разработки, а также отлично поддерживается на Android и ios.

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

Во-первых, вам нужно установить ширину и высоту элемента равными 0. Затем установите стиль границы.

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12. Как создать полноэкранный макет персонажа?

Первый реальный персонаж:

Определяются высота и ширина трех блоков;
Вышеупомянутая часть центрирована с полем: 0 auto;
Следующие два блока не оборачиваются в float или inline-block;
Отрегулируйте положение с полем, чтобы отцентрировать их.

Второй полноэкранный макет шрифта:
Верхний div установлен на 100%, нижний div имеет ширину 50%, а затем используются float или inline, чтобы он не переносился.

13. Общие вопросы совместимости?

Разные браузеры имеют разные поля и отступы по умолчанию для вкладок. *{поле:0;заполнение:0;}
Ошибка двойного поля IE6: после того, как метка атрибута блока стала плавающей и есть горизонтальное поле, поле, отображаемое в IE6, больше установленного значения. hack: display: inline; преобразует его во встроенное свойство.
Метод прогрессивной идентификации постепенно исключает части из целого. Во-первых, умное использование отметки «9» отделяет IE от всех ситуаций. Затем снова используйте «+», чтобы отделить IE8 от IE7 и IE6, чтобы IE8 распознавался независимо.
```
{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
```
Установите метку меньшей высоты (как правило, менее 10 пикселей), в IE6, IE7 высота превышает высоту, установленную вами. Хак: установите overflow:hidden для меток, которые превышают высоту, или установите высоту строки line-height меньше установленной вами высоты.
В IE вы можете использовать метод получения общих атрибутов для получения пользовательских атрибутов или вы можете использовать getAttribute() для получения пользовательских атрибутов; в Firefox вы можете использовать только getAttribute() для получения пользовательских атрибутов. Решение. Получите единые настраиваемые атрибуты с помощью getAttribute().
Китайский интерфейс Chrome заставит текст размером менее 12 пикселей по умолчанию отображаться с размером 12 пикселей, что можно решить, добавив свойство CSS -webkit-text-size-adjust: none;.
После доступа к гиперссылке стиль наведения не будет отображаться, а стиль гиперссылки, по которой щелкнули, больше не будет наведен и активен. Решение состоит в том, чтобы изменить порядок свойств CSS: L-V-H-A (любовь, ненависть): a:link {} a:visited {} a:hover {} a:active {}

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

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

15. В чем разница между методом расчета абсолютного блока и обычного потока?

Независимо от того, к какому виду он принадлежит, сначала найдите элемент, значение позиции которого не статично в ближайшем элементе-предке, а затем оцените:

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

Если ни один из них не найден, это начальный содержащий блок.

Пополнить:

статический (по умолчанию)/относительный: Проще говоря, это поле содержимого его родительского элемента (то есть часть, где удалены отступы)
absolute: найти ближайший элемент, расположенный абсолютно/относительно вверх
исправлено: его содержащий блок всегда является корневым элементом (html/body)

16. Имеет ли свойство видимости в CSS значение свойства сворачивания? Какая разница в будущем под разными браузерами?

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

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

17. В чем разница между display:none и visible:hidden?

display:none не отображает соответствующий элемент и больше не выделяет место в макете документа (перекомпоновка + перерисовка)
видимость: скрытый скрывает соответствующий элемент и сохраняет исходное место в макете документа (перерисовка)

18. Что произойдет, если наложить друг на друга position и display, overflow и float?

Свойство display указывает тип блока, который должен генерировать элемент; свойство position указывает тип позиционирования элемента; свойство float — это метод компоновки, определяющий, в каком направлении перемещается элемент.
Аналогично механизму приоритета: position: absolute/fixed имеет высший приоритет, при их наличии float не работает, и нужно корректировать отображаемое значение. Элементы, позиционированные как float или absolute, могут быть только блочными элементами или таблицами.

19. Как вы понимаете спецификацию BFC (контекст форматирования блока: контекст форматирования блока)?

BFC определяет, как устроен внутренний блок-бокс.
Схема позиционирования:

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

BFC может быть активирован при выполнении одного из следующих условий

корневой элемент, т.е. html
Значение float не равно none (по умолчанию)
Значение переполнения не видно (по умолчанию)
Значение display: inline-block, table-cell, table-caption.
Значение position является абсолютным или фиксированным

20. Почему появляются поплавки и когда их нужно очищать? Как очистить поплавок?

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

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

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

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

21. Проблема наложения верхнего и нижнего полей

Внешний слой контейнера перекрывается завернутым элементом и контейнером для создания триггера BFC.
пример:

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

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

Автоматически становится display:block

23. Использовали ли вы медиазапросы для макета мобильного терминала?

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

Внутри
CSS : @media only screen and (max-device-width:480px) {/CSS-стиль/}

24. Используете ли вы препроцессор CSS?
Less sass

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

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

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

Селекторы CSS анализируются справа налево. Если вы сопоставляете слева направо и обнаруживаете, что оно не соответствует правилам, вам нужно вернуться назад, что приведет к значительной потере производительности. При сопоставлении справа налево сначала найдите все самые правые узлы и для каждого узла найдите его родительский узел, пока не будет найден корневой элемент или правило сопоставления, удовлетворяющее условию, после чего обход этой ветви заканчивается. Производительность двух правил сопоставления сильно различается, потому что сопоставление справа налево отфильтровывает большое количество самых правых узлов (листовых узлов), которые не удовлетворяют условиям на первом шаге, в то время как производительность сопоставления слева направо -правильные правила сопоставления Все потрачено впустую на неудачные поиски.
После анализа CSS результат анализа необходимо проанализировать вместе с содержимым дерева DOM для создания средства визуализации. Дерево, которое в конечном итоге используется для рисования. При создании дерева рендеринга (процесс «Присоединение» в WebKit) браузер определяет, какой тип дерева рендеринга генерировать для каждого элемента в дереве DOM в соответствии с результатом синтаксического анализа CSS (правила стиля).

27, я должен использовать нечетные или даже шрифты на веб-странице? Зачем?

Используйте четные шрифты. Даже числа относительно легче масштабировать с остальной частью веб-дизайна. Точечный матричный Arial (Zhongyi Arial), который поставляется с Windows, обеспечивает только точечную матрицу 12, 14 и 16 пикселей из Vista, в то время как 13, 15 и 17 пикселей используют меньшую точку. (То есть пространство, занимаемое каждым словом, больше на 1 пиксель, но точечная матрица не изменилась), поэтому оно немного разрежено.

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

Когда использовать маржу:

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

Когда использовать заполнение:

Нужно добавить пробел внутри границы
Пустое место требует цвет фона
Заготовка из двух коробок, соединенных вверх и вниз, надеюсь, сумма двух.

Проблема совместимости: в IE5 и IE6 при указании поля для поля с плавающей запятой левое поле может стать вдвое шире. Решается путем изменения заполнения или указания display: inline поля.

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

При установке ширины элемента в процентах она рассчитывается относительно ширины родительского контейнера, однако для некоторых свойств, представляющих расстояние по вертикали, таких как padding-top, padding-bottom, margin-top, margin-bottom и т. д., при установке их в процентах, они также основаны на ширине родительского контейнера, а не на высоте.

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

Принцип: Это похоже на карусель.Общие элементы располагаются все время.Предполагая, что необходимо отобразить 5 полноэкранных страниц, высота составляет 500%, а отображается только 100%.Остальное можно расположить по оси Y через преобразование или через реализацию margin-top
переполнение: скрыто, переход: все 1000 мс облегчение;

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

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

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

32, эффект прокрутки параллакса?

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

Реализация CSS3
Преимущества: короткое время разработки, лучшая производительность и эффективность разработки, недостаток в том, что он не может быть совместим с более ранними версиями браузеров.
реализация jQuery
Контролируя скорость прокрутки различных слоев, вычисляя время каждого слоя и управляя эффектом прокрутки.
Преимущества: совместимые с различными версиями, эффект контролируется
Недостатки: предъявляет высокие требования к производителям при разработке
Реализация плагина
Например: параллакс-скроллинг, совместимость очень хорошая

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

Одиночные двоеточия (:) используются для псевдоклассов CSS3, а двойные двоеточия (::) — для псевдоэлементов CSS3.
::before — это псевдоэлемент, определенный перед основным содержимым элемента с наличием дочернего элемента. Не существует в доме, существует только на странице.

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

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

Высота строки относится к высоте строки текста, в частности к базовому расстоянию между двумя строками текста. Функция высоты в CSS — это высота и высота строки.Атрибут высоты не определен, и его окончательная производительность должна быть высотой строки.
Вертикальное центрирование однострочного текста: установка значения высоты строки на значение того же размера, что и высота, может обеспечить вертикальное центрирование однострочного текста, фактически высоту также можно удалить.
Вертикальное центрирование многострочного текста: вам необходимо установить для свойства display значение inline-block.

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

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

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

-webkit-font-smoothing не работает в Windows, но работает на устройствах IOS -webkit-font-smoothing: сглаживание лучше всего, сглаживание оттенков серого.

37. Как быть с position:fixed,invalid под android?

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

38. Если вам нужно вручную писать анимацию, как вы думаете, какой минимальный интервал времени и почему?
Частота по умолчанию большинства мониторов составляет 60 Гц, то есть 60 обновлений в секунду, поэтому теоретический минимальный интервал составляет 1/60*1000 мс = 16,7 мс.

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

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

Вы можете написать весь код
в одну строку
поплавок: левый в поплавке li
Используйте font-size: 0 в ul (не поддерживается Google); вы можете использовать letter-space: -3px

40. Когда display:inline-block отобразит пробел?

Там будут пробелы, когда есть пробелы Решение: удалить пробелы
Когда маржа положительна, решение: маржа использует отрицательное значение
Решите при использовании размера шрифта: размер шрифта: 0, интервал между буквами, интервал между словами

41. Есть адаптивный по высоте div, в нем два div, один высотой 100px, а другой должен заполнить оставшуюся высоту

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

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

png — это Portable Network Graphics (Portable Network Graphics) — формат файла растрового изображения со сжатием данных без потерь.Преимущества: высокая степень сжатия и хорошая цветопередача. Доступен в большинстве мест.
jpg – это метод сжатия фотографий с искажением. Это деструктивное сжатие, которое хорошо сглаживает изменения тонов и цветов. Формат, используемый для хранения и передачи фотографий на сайте www.
gif — это формат файла растрового изображения, который воспроизводит изображения в истинном цвете с 8-битным цветом. Эффекты анимации могут быть достигнуты.
Формат webp — это формат изображений, запущенный Google в 2010 году. Степень сжатия составляет всего 2/3 от jpg, а размер на 45 % меньше, чем у png. Недостаток в том, что время сжатия больше и совместимость не очень хорошая.В настоящее время поддержка Google и Opera.

43, стиль этикетки, написанные перед телом? В чем разница перед телом?

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

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

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

45, сложные CSS-спрайты

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

Продолжаем обновлять…