От автора: в этой статье я просто резюмирую свой порядок изучения CSS. Надеюсь, это поможет вам улучшить понимание CSS.
1. Приоритет селектора CSS
Приоритет селектора CSS разделен на несколько категорий, каждая из которых имеет свою специфичность. Мы можем вычислить фактический приоритет, суммируя специфичность всех селекторов.
Фактически, если вы используете правило !important, оно переопределит ВСЕ предыдущие правила стилизации для этого конкретного свойства элемента!
p { background-color: red !important;
}Если два примененных стиля имеют одинаковый приоритет, будет выбран последний.
2. Наследуемые и ненаследуемые свойства в CSS
Ненаследуемые свойства
Отображение
Атрибуты текста: vertical-align, text-decoration, text-shadow, white-space, unicode-bidi.
Атрибуты блочной модели: width, height, margin, border, padding.
Атрибуты фона: background, background-color, background-image, background-repeat, background-position, background-attachment.
Атрибуты позиции: float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip, z-index.
Атрибуты сгенерированного содержимого: content, counter-reset, counter-increment
** Атрибуты стиля контура: **outline-style, outline-width, outline-color, outline
Атрибуты стиля страницы: size, page-break-before, page-break-after
Атрибуты стиля звука: pause-before, pause-after, pause, cue-before, cue-after, cue, play-during
Наследуемые свойства
Атрибуты шрифта : font-family, font-weight, font-size, font-style.
Текстовые атрибуты : text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, color.
Видимость
Атрибуты макета списка: list-style
Курсор.
3. Разница между block, inline и inline-block
block: блок начинается с НОВОЙ строки и занимает всю доступную ширину. Это означает, что элементы блока будут занимать всю ширину его родительского элемента.
inline: отображает элемент той же строке. Другими словами, встроенные элементы НЕ начинаются с новой строки и занимают ровно столько ширины, сколько ее содержимое.
inline-block: по сути, это то же самое, что и inline, за исключением того, что вы можете установить значения высоты и ширины.
4. Как скрыть элементы
display: none: такой элемент не будет отображаться, поэтому он не будет занимать место на странице, и событие, привязанное к такому элементу, не будет запущено.
visibility: hidden: элемент по-прежнему будет удерживаться на странице и будет реагировать на события.
opacity: 0: устанавливает прозрачность элемента на 0, ведет себя так же, как visibility: hidden
position: absolute: используйте абсолютное положение, чтобы переместить элемент за пределы области просмотра.
z-index: negative value: используйте другие элементы, чтобы полностью накрыть текущий.
transform: scale (0,0): масштабируйте размер элемента до 0,0, такой элемент все еще будет существовать на странице, однако он не будет прослушивать связанные события.
5. В чем разница между link и @import?
Оба они используются для ссылок на внешние файлы CSS.
link — это тег html, который может загружать не только файлы css. @import, с другой стороны, может загружать только css.
link может загружать CSS одновременно с загрузкой веб-страницы, @import может загружать CSS только после завершения загрузки веб-страницы.
Javascript может изменять атрибуты link, обращаясь к DOM, @import не поддерживает такой способ.
6. Тransitions и Animation
transitions (переходы): чтобы произошел переход, элемент должен иметь изменение состояния, и для каждого состояния должны быть определены разные стили. Самый простой способ определить стили для разных состояний — использовать :hover, :focus, :active, и :target pseudo-classes.
animations (анимации): когда требуется больший контроль, переходы должны иметь несколько состояний. Вот почему нам нужна анимация. Она не должен запускаться какими-либо событиями, и анимация может быть зациклена. Мы можем установить несколько точек ключевых кадров, используя @keyframe
7. Псевдокласс и псевдоэлемент
Псевдоклассы действуют как простые селекторы в последовательности селекторов и, таким образом, классифицируют элементы по непрезентабельным характеристикам. Псевдоэлементы создают новые виртуальные элементы.
8. Как понять requestAnimationframe
Раньше в JavaScript был только один способ сделать временной цикл: setInterval(). Если вам нужно повторить что-то довольно быстро (но не настолько быстро, насколько это возможно, как цикл for), вы бы использовали это. Для анимации цель — шестьдесят «кадров» в секунду, чтобы изображение выглядело плавно, поэтому вы должны выполнить такой цикл:
setInterval(function() { // animiate something
}, 1000/60);Теперь есть лучший способ — использовать requestAnimationframe.
Метод window.requestAnimationFrame() сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию для обновления анимации перед следующей перерисовкой. Метод принимает обратный вызов в качестве аргумента, который должен быть вызван перед перерисовкой.
Ваша процедура обратного вызова должна снова вызвать requestAnimationFrame (), если вы хотите анимировать другой кадр при следующей перерисовке.
requestAnimationFrame() — это 1 кадр. Количество обратных вызовов обычно составляет 60 раз в секунду. В чем преимущества:
Экономия ресурсов ЦП: с анимацией, реализованной SetTinterval, когда страница скрыта или свернута, SetTinterval по-прежнему выполняет задачи анимации в фоновом режиме. Поскольку в это время страница находится в невидимом или недоступном состоянии, обновление анимации бессмысленно и просто расходует ресурсы ЦП. RequestAnimationFrame совершенно другая функция. Если обработка страницы не активирована, задача обновления экрана страницы также будет приостановлена системой. Следовательно, RequestAnimationFrame, также прекратит рендеринг. Когда страница активирована, анимация восстановится с последней позиции. Продолжение выполнения, где бы оно ни находилось, эффективно снижает нагрузку на ЦП.
Регулирование: в высокочастотных событиях (изменение размера, прокрутка и т. д.). Чтобы предотвратить выполнение нескольких функций за один интервал обновления, RequestAnimationFrame может гарантировать, что функция выполняется только один раз в каждом интервале обновления, чтобы обеспечить плавность. также может лучше сэкономить затраты на выполнение функции. Это бессмысленно, когда функция выполняется несколько раз в пределах интервала обновления, потому что большинство дисплеев обновляются каждые 16,7 мс, и несколько отрисовок не будут отображаться на экране.
Уменьшение количества операций DOM: requestAnimationFrame соберет все операции DOM в каждом кадре и выполнит их за одну перерисовку.
Почему не следует использовать setTimeout для управления анимацией:
Поскольку setTimeout является асинхронной задачей, она будет выполняться только тогда, когда все синхронные задачи будут выполнены, всегда есть временная задержка.
Период времени его исправления не будет точно соответствовать частоте обновления экрана, что приводит к потере кадра.
9. Сontent-box и border-box
content-box: ширина и высота элемента включают только содержимое. Другими словами, граница, отступы и поля не являются частью ширины или высоты. Это значение по умолчанию.
border-box: отступ и граница включены в ширину и высоту.
10. Почему перемещение элементов с помощью Translate() лучше, чем Рosition:absolute Top/left
Translate — это метод в свойстве преобразования. Изменение трансформации или непрозрачности не заставит браузер переформатировать и перерисовать, а только вызовет композицию.
Однако изменение абсолютного позиционирования вызовет повторную компоновку, которая вызовет повторную раскраску и композицию. Преобразование просит браузер создать GPU слой для элемента, но при изменении абсолютного позиционирования будет задействован CPU. Поэтому translate() более эффективен и может сократить время рисования плавной анимации. Когда translate меняет свое положение, элемент по-прежнему занимает исходное пространство, чего не произойдет при абсолютном позиционировании.
11. Как вы понимаете CSS-спрайты
CSS-спрайты — это средство объединения нескольких изображений в один файл изображения для использования на веб-сайте с целью повышения производительности. Мы можем использовать background-image, background-repeat, background-position для указания изображения.
Плюсы:
Возможность минимизировать http-запрос, который клиентская сторона должна сделать для получения ресурсов изображения с сервера.
Объединение нескольких изображений в одно также уменьшит размер изображения.
Минусы:
Требуются точные измерения размера каждого изображения.
Когда какая-то часть изображения изменилась, мы должны отредактировать объединенное изображение.
12. Каковы меры по оптимизации производительности CSS?
Производительность загрузки:
сжать файл CSS, чтобы уменьшить размер файла
использовать одно свойство css вместо сокращения
не использовать @import, вместо этого использовать link
Селекторы:
используйте ключевые селекторы вместо комбинатора Descendant, поскольку последний будет перебирать всех своих потомков в дереве.
при использовании селектора идентификатора не добавляйте ненужные селекторы
не используйте селектор *
используйте селектор классов вместо селектора тегов HTML
избегайте повторного присвоения стилей элементам, пользуйтесь наследованием.
Производительность рендеринга:
осторожно используйте float и position, поскольку они потребляют много ресурсов.
избегайте частых повторных рендеров
эффективно использовать CSS spirte
13. Почему мы используем препроцессор и постпроцессор css
Препроцессор css: less, sass, stylus
постпроцессор: postCss
Причина использования:
Чтобы сделать четкую структуру CSS, легко расширить.
Предотвращение различий синтаксиса разных браузеров.
Достижение множественного наследования.
Совместимость с кодом CSS и применение к старым проектам.
14. Как определить, появился ли элемент в нашем окне просмотра
window.innerHeight — высота области просмотра
document.body.scrollTop || document.documentElement.scrollTop — расстояние прокрутки документа браузером.
imgs.offsetTop — расстояние от верха элемента до верха документа
Если img.offsetTop < window.innerHeight + document.body.scrollTop || document.documentElement.scrollTop, то это означает, что img уже появился в области просмотра.
15. Как разобраться в медиа-запросе
Медиа-запросы в CSS3 расширили идею CSS2-типов мультимедиа: вместо того, чтобы искать тип устройства, они смотрят на возможности устройства. Медиа-запросы можно использовать для проверки многих вещей, например:
ширина и высота области просмотра
ширина и высота устройства
ориентации устройства (планшет / телефон в альбомном или портретном режиме?)
разрешение
Использование мультимедийных запросов — популярный метод доставки адаптированной таблицы стилей на настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, телефоны iPhone и Android).
16. Когда не работает z-index
Свойство z-index работает только с элементами в которых значение позиции отличается от static (например: position: absolute; position: relative; или position: fixed). Оно не будет работать должным образом, если:
Положение родительского контейнера относительное
элемент с z-index также был установлен с помощью float
17. Макет CSS
Единицы CSS можно разделить на следующие категории:
Абсолютные единицы
Относительные единицы шрифта
Относительные единицы области просмотра
Абсолютные единицы
Некоторые единицы зависят от определенных абсолютных значений и не зависят от размера экрана или шрифтов. Эти единицы отображения могут отличаться в зависимости от различных разрешений экрана, так как они зависят от DPI (точек на дюйм) экрана. Эти единицы: px (пиксели), in (дюймы), cm (сантиметр), mm (миллиметры), pc, pt.
Относительные единицы шрифта
Есть некоторые единицы, которые зависят от размера шрифта или семейства шрифтов документа или его элементов родительского уровня. Сюда входят такие единицы, как: em, rem, ex, ch.
Относительные единицы области просмотра
Есть несколько единиц, которые зависят от высоты и ширины области просмотра, например: vh (высота области просмотра), vw (ширина области просмотра), vmin (минимум области просмотра), vmax (максимум области просмотра).
Единица процента (%) не относится ни к одной из вышеперечисленных категорий.
18. Как получить макет с двумя столбцами
Макет с двумя столбцами обычно относится к макету, который имеет левый столбец фиксированной ширины и правый столбец с автоматическим заполнением. Сместите левый элемент влево, установите ширину на 200 пикселей, установите margin-left для правого элемента на ширину левого элемента.
.outer { height: 100px;
}
.left { float: left; width: 200px; background: tomato;
}
.right { margin-left: 200px; width: auto; background: gold;
}Используйте абсолютную позицию. Перед этим мы должны установить свойству position родительского контейнера любое значение кроме static. Затем установите абсолютное положение левого элемента с шириной 200 пикселей. Установите правому элементу margin-left значение 200 пикселей.
.outer { position: relative; height: 100px;
}
.left { position: absolute; width: 200px; height: 100px; background: tomato;
}
.right { margin-left: 200px; background: gold;
}Используйте гибкий макет, установите ширину левого элемента 200 пикселей, установите свойству flex правого элемента значение 1.
.outer { display: flex; height: 100px;
}
.left { width: 200px; background: tomato;
}
.right { flex: 1; background: gold;
}19. Как получить макет с тремя столбцами
Макет с тремя столбцами означает наличие левого и правого элементов с фиксированной шириной, средний элемент автоматически заполнит пробел.
Используйте абсолютное положение, установите левый элемент на определенную ширину. Для атрибутов top и right правого элемента установите значение 0, чтобы он прилипал к правой стороне контейнера. Наконец, установите для полей margin-left и margin-right центрированного элемента соответствующую ширину левого и правого элемента.
.outer { position: relative; height: 100px;
} .left { position: absolute; width: 100px; height: 100px; background: tomato;
} .right { position: absolute; top: 0; right: 0; width: 200px; height: 100px; background: gold;
} .center { margin-left: 100px; margin-right: 200px; height: 100px; background: lightgreen;
}Используйте гибкий макет, установите для левого и правого элемента фиксированную ширину, для flex центрального элемента установите значение 1:
.outer { display: flex; height: 100px;
} .left { width: 100px; background: tomato;
} .right { width: 100px; background: gold;
} .center { flex: 1; background: lightgreen;
}20. Горизонтальное и вертикальное центрирование
используйте абсолютное положение, установите left и top на 50%, чтобы левый угол элемента находился в центре элемента. Используйте translate, чтобы отрегулировать центральную точку дочернего элемента, чтобы она соответствовала родительской.
.parent{position: relative;}
.child {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}Используйте гибкий макет, установите align-items:center и justify-content: center.
.parent { display: flex; justify-content:center; align-items:center;
}21. Основные сведения о модели Flex Box
Flex — это новое значение, добавленное к свойству отображения CSS. Наряду с inline-flex оно приводит к тому, что элемент, к которому применяется flex, становится гибким контейнером, а дочерние элементы каждого элемента становятся гибкими элементами. Затем элементы участвуют в гибкой компоновке, и к ним могут применяться все свойства, определенные в модуле CSS Flexible Box Layout.
22. Отзывчивый дизайн
Адаптивный веб-дизайн означает что веб-сайт может быть совместим с несколькими терминалами, вместо того, чтобы создавать отдельную версию для каждого терминала. Основной принцип заключается в использовании медиа-запроса (@media) для обнаружения различных размеров экрана устройства для обработки.
О совместимости: header страницы должен содержать viewport, объявленный в meta.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
23. Position и Floating
Прочтите документацию BFC, чтобы продолжить.
Контекст форматирования блока — это часть визуального CSS-рендеринга веб-страницы. Это область, в которой происходит компоновка блок-боксов и в которой элементы floats взаимодействуют с другими элементами.
Контексты форматирования влияют на макет, но обычно мы создаем новый контекст форматирования блока для позиционирования и очистки floats элементов, а не изменяем макет, потому что элемент, который устанавливает новый контекст форматирования блока, будет:
содержать внутренние floats элементы.
исключать внешние floats элементы.
подавлять схлопывание внешних отступов (margin collapsing).
Автор: WEI FENG
Источник: dev.to
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен