Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Frontend > CSS Theory > Flashcards

CSS Theory Flashcards

1
Q

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

A

1) проблема скорости сети
2) проблема однопоточности браузеров

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Из каких шагов состоит процесс отображения страницы?

A

1) Разбор HTML и построение DOM дерева
2) Получение внешних ресурсов в фоновом режиме
3) Разбор CSS и создание CSSOM
4) Выполнение JavaScript
5) Объединение DOM и CSSOM, для построения дерево рендеринга
6) Компоновка (layout) и отрисовка (paint) результата

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Что может заблокировать загрузку страницы?

A

css блокирует рендеринг, но не парсинг
script без async или defer, блокирует парсинг

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Что такое дерево рендеринга?

A

Это комбинирование DOM и CSSOM в дерево, содержащее все видимые узлы с их содержимым и вычисленными стилями

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Для чего нужен атрибут async и defer?

A

script — отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта

script async — скрипт будет извлечен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.

script defer — скрипт будет извлечен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом . Отложенный скрипт не должен содержать document.write.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Почему CSS блокирует рендеринг?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Как пометить важность ресурса для рендеринга?

A

rel=”preload”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

В чем отличие фильтров от декоративных свойств?

A

Фильтры используют аппаратное ускорение, что улучшает производительность

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Как применяются фильтры при загрузке страницы?

A

Применяются до отрисовки элемента и поэтому влияют на загрузку

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Как задать диагональный градиент?

A

background-image: linear-gradient(to right top, yellow, green)
или
background-image: linear-gradient(45deg, yellow, green);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Отличие диагональных градиентов?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Что такое колорстоп в градиенте?

A

Место, где будет располагаться центральная (самая насыщенная) часть цвета.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Как выбрать пустые элементы?

A

:empty

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Что такое приоритет стилей?

A

Правило применения стилей в зависимости от типа селектора
- элемент, псевдоэлемент
- класс, псевдокласс, атрибут
- id
- inline
- !important

Универсальный селектор (*), комбинаторы (+, >, ~, ‘ ‘) и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Что такое каскад в CSS?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Методы адаптивной верстки?

A
  • задать viewport
  • относительные ед.измерения
  • media queries
  • flex, grid
17
Q

Что такое семантика?

A

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

18
Q

Что такое vh и vw?

A

1vh = 1% height viewport

19
Q

Что такое псевдокласс?

A

Ключевое слово, добавленное к селектору, которое определяет его особое состояние

20
Q

Что такое псевдоэлемент?

A

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

21
Q

Как сделать тень тексту?

A

text-shadow: 1px 1px 2px black, 0 0 1em red;

22
Q

Что такое наследование в CSS?

A

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

23
Q

Как сделать тень блоку?

A

box-shadow: inset X Y Blur Radius Color;

24
Q

Что такое vmax?

A

1% от max(width viewport, height viewport)

25
Q

Что такое viewport?

A

Видимая область страницы, которая меняется при масштабировании

26
Q

Методы кроссбраузерной верстки?

A

1) normalize.css
2) babel.js
3) autoprefixer, caniuse, hacks

27
Q

Что такое Ajax?

A

Это процесса на стороне клиента, который извлекает данные с сервера и динамически обновляет DOM без полного обновления страницы

28
Q

Отличие absolute от fixed?

A

Если у родителя static или родителя нет, то отсчет координат ведется от края окна браузера.

Привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

29
Q

Как работает position sticky?

A

Как fixed в пределах контейнера, дальше как absolute; работает, только есть соседские элементы

30
Q

Можно ли задать height, width, margin, padding и border строчному элементу?

A

Строчным элементам нельзя установить размеры (width и height), задать верхние и нижние margin отступы.

Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.

31
Q

Назовите псевдоэлементы?

A

before, after, first-letter, first-line, selection, placeholder, selection

32
Q

Назовите псевдоклассы?

A

lhav, child, input

33
Q

Что такое контекст наложения?

A

Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю

34
Q

Какие свойства создают контекст наложения?

A
  1. является корневым элементом (HTML)
  2. absolute или relative с z-index значением отличным от “auto”,
  3. flex элемент с z-index отличным от “auto”, чей родительский элемент имеет свойство display: flex или inline-flex,
  4. opacity < 1.
    transform отличный от “none”,
    mix-blend-mode со значением отличным от “normal”,
    filter со значением отличным от “none”,
    isolation установленный в “isolate”,
  5. fixed
35
Q

Что такое специфичность в CSS?

A

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

Frontend (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions