Концепции CSS - единственное руководство, которое вам нужно

«Я просто суммирую свою рутину обучения CSS, ваша подпись будет моей мотивацией обновления. Надеюсь, это поможет вам улучшить ваше понимание и CSS. Не стесняйтесь проверять остальную часть моего контента (регулярно обновляются) “

1. Приоритет селектора CSS 2. Наследуемые и невосприимчивые свойства в CSS 3. Разница между блоком дисплея, встроенным и встроенным блоком 4. Как скрыть элементы 5. В чем разница между Link и @Import 6. Переход и анимация 7. Псевдо класс и псевдо -элемент 8. Как понять requestAnimationFrame 9. Коробка контента против пограничной коробки 10. Почему движущиеся элементы с Translate () лучше, чем позиция: абсолютный верхний/слева 11. Как вы понимаете спрайты CSS 12. Каковы меры для оптимизации производительности CSS 13. Почему мы используем препроцессор CSS и постпроцессор 14. Как определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить, чтобы определить Элемент появился в нашем Viewport 15. Центрирование 21. Понимание Flex Box Model 22. Ответственный дизайн 23.position и Плавающий

Другое содержимое

HTML – Единственное руководство, которое вам нужно (в процессе) React Concepts Part.1 – Единственное руководство, которое вам нужно, чтобы реагировать концепции, часть. 2 – единственное руководство, которое вам нужны – Единственное, что направляет тебя необходимость

1. Приоритет селектора CSS

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

10	Встроенный стиль
Ли: Первый ребенок	Псевдо -класс Селектор	10
дивизион	HTML -селектор тегов	1
Ли: после	Селектор псевдо -элементов	1

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

p {
  background-color: red !important;
}

Если применяемые два стиля имеют одинаковый приоритет, последний будет выбран.

2. Наследуемые и невосприимчивые свойства в CSS

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

Отображать
Атрибуты текста: Вертикальный аровка 、 Текстовое декорация 、 Текстовые тени 、 Белое пространство 、 Unicode-bidi
Атрибуты модели коробки: Ширина 、 Высота 、 край 、 граница 、 прокладка
Фоновые атрибуты: Фон 、 Фоновое цвета 、 Фоновое изображение 、 Право-повторное восхищение 、 Фоновая позиция
Атрибуты позиции: Float 、 Clear 、 Положение 、 Вверху 、 справа 、 внизу 、 левый 、 мин-ширина 、 мин-высот 、 максимальная ширина 、 максимальная высота 、 переполнение 、、 z-index
Сгенерированные атрибуты контента: Содержание 、 Контр-резит 、 Counter- приращение
** Атрибуты стиля наброска: ** Схема контура
Атрибуты стиля страницы: размер 、 страница-разрывы до 、 страницы-разрывы-после
Атрибуты звука: Пауза-то, прежде чем пауза-паутер 、 пауза 、 cue-befor

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

Атрибуты шрифта : семейство шрифта 、 Font-Weight 、 размер шрифта
текстовые атрибуты : Текст-интент 、 Текст-альбом 、-высота 、 Расхождение слов 、 Страница букв 、 Текстовая преобразование 、 Цвет.
Видимость
Список атрибутов макета : Список стиля
курсор

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

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

4. Как скрыть элементы

дисплей: нет: Такой элемент не будет отображаться, поэтому он не займет места на странице, и событие, которое обращено к такому элементу, не будет вызвано.
Видимость: скрыта: Элемент все еще будет удерживаться на странице, и он будет отвечать на события.
непрозрачность: 0: Установите прозрачность элемента на 0, ведет себя так же, как видимость: скрытый
позиция: абсолют: Используйте абсолютную позицию, чтобы переместить элемент за пределами видового порта.
z-index: отрицательное значение: Используйте другие элементы, чтобы полностью покрыть его.
Преобразование: масштаб (0,0): Размер элемента до 0,0. Такой элемент все еще будет существовать на странице, однако он не будет слушать события, которые Бенс.

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

Они оба используются для ссылки на внешние файлы CSS.

Ссылка – это тег HTML, который может загружать больше, чем просто файлы CSS. @Import, с другой стороны, может загружать только CSS.
Ссылка может загружать CSS одновременно с загрузкой веб -страницы, @IMPORT может загружать CSS только после того, как веб -страница была завершена.
JavaScript может мутировать атрибуты ссылки, получив доступ к DOM, @Import не поддерживает такой путь.

6. Переход и анимация

Переходы: Для того, чтобы проходить переход, элемент должен иметь изменение состояния, и для каждого состояния должны быть идентифицированы различные стили. Самый простой способ определения стилей для разных состояний – это использование : hover ,: Focus ,: активные и: Target Pseudo-Classes Анкет
анимация: Когда требуется больше контроля, переходы должны иметь несколько состояний. В свою очередь, именно поэтому нам нужна анимация. Это не должно быть вызвано любыми событиями, и анимация может быть зациклена. Мы можем установить несколько точек кадра с использованием @KeyFrame

7. Псевдо класс и псевдо -элемент

Псевдо-классы действуют как простые селекторы в последовательности селекторов, и, таким образом, классифицируют элементы по непретенсионным характеристикам, псевдоэлементы создают новые виртуальные элементы.

8. Как понять requestAnimationFrame

Раньше был только один способ сделать временный цикл в JavaScript: setInterval (). Если вам нужно было повторить что-то довольно быстрое (но не так быстро, как уполномоченное, как петля), вы бы это использовали. Для целей анимации цель составляет шестьдесят «кадров» в секунду, чтобы казаться гладкой, так что вы запустите петлю, как это:

setInterval(function() {
  // animiate something
}, 1000/60);

Теперь есть лучший способ, используя requestAnimationFrame

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

Ваша процедура обратного вызова должна сама по себе вызовать requestAnimationFrame (), если вы хотите оживить другой кадр при следующем перекраске. requestAnimationFrame () – 1 выстрел. Количество обратных вызовов обычно 60 раз в секунду.

* Каковы преимущества *

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

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

Дроссельная: в высокочастотных событиях (изменение размера, прокрутка и т. Д.), Чтобы предотвратить выполнение нескольких функций в одном интервале обновления, requestAnimationFrame может гарантировать, что функция выполняется только один раз в каждом интервале обновления, чтобы обеспечить беглость, ее Также может лучше сэкономить стоимость выполнения функции. Это бессмысленно, когда функция выполняется несколько раз в интервале обновления, потому что большинство отображает обновление каждые 16,7 мс, а несколько рисунков не будут отражены на экране.

Как дроссельная заслока запроса анимации до определенной частоты кадров

Уменьшение операций DOM: requestAnimationFrame собирает все операции DOM в каждом кадре и заполняют его в одном перекраске

Почему мы не должны использовать settimeout Для управления анимацией:

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

9. Коробка для контента против пограничной коробки

Контент-бокс: Ширина и высота элемента включают только содержание. Другими словами, граница, заполнение и маржа не являются частью ширины или высоты. Это значение по умолчанию.
пограничная коробка: Заполнение и граница включены в ширину и высоту.

10. Почему движущиеся элементы с Translate () лучше, чем позиция: Абсолютный верх/слева

Перевод – это метод в свойстве преобразования. Изменение преобразования или непрозрачности не запустит браузер к рефальному и перекраски, он только запустит композиции.

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

11. Как вы понимаете спрайты CSS

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

Мы можем использовать фоновое изображение, повторное предложение, фона, чтобы найти изображение.

Плюсы:

Это может минимизировать HTTP -запрос, который должен был сделать клиентскую сторону для извлечения ресурсов изображений с сервера.
Объединение нескольких изображений в одно также уменьшит размер изображения

Минусы:

Требовать точные измерения на размере каждого изображения.
Когда какая -то часть изображения изменилась, мы должны редактировать комбинированное изображение.

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

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

Сжатие файла CSS для уменьшения размера файла
Используйте отдельное свойство CSS вместо сокращение имущество
Не используйте @Import, используйте ссылку вместо этого

Селекторы:

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

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

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

13. Почему мы используем препроцессор и постпроцессор CSS

CSS препроцессор: меньше, sass, stylus
Постпроцессор: postcss

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

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

14. Как определить, появился ли элемент в нашем просмотре

window.innerheight Высота видового порта
document.body.scrolltop
document.documentelement.scrolltop - это расстояние, которое прокрутил Brower. imgs.offsettop

Если img.offsettop

15. Постолькайте в СМИ запрос

СМИ запросов в CSS3 расширили идею CSS2 Media Types: вместо того, чтобы искать тип устройства, они рассматривают возможность устройства.

СМИ запросы могут быть использованы для проверки многих вещей, например:

Ширина и высота ширины просмотра и высоты ориентации устройства (планшет/телефон в ландшафте или портретном режиме?) Разрешение с использованием медиа -запросов является популярной техникой для предоставления адаптированного листа стиля для рабочих столов, ноутбуков, планшетов и мобильных телефонов (таких как телефоны iPhone и Android).

16. Когда Z-Index не работает

Свойство Z-Index работает только на элементах со значением позиции, отличным от статического (например, позиция: абсолютная;, позиция: относительно;, или позиция: фиксированная).

Это не будет функционировать должным образом, если:

Позиция родительского контейнера относительно
Элемент с z-индексом также был установлен с помощью плавания

17.css Mayout Unit

Единицы CSS могут быть разделены в следующих категориях:

Абсолютные единицы
Относительные единицы шрифта
ViewPort относительные единицы

Абсолютные единицы:

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

Эти единицы:

PX (пиксели)
в дюймах)
см (сантиметр)
мм (миллиметр)
ПК (PICAS)
Pt (очки)

Относительные единицы шрифта:

Есть несколько единиц, которые зависят от размера шрифта или семейства шрифтов документа или элементов его родительского уровня. Это включает в себя такие единицы, как:

Эм
перепончаться
бывший
гнездо

Относительные единицы ViewPort:

Есть несколько единиц, которые зависят от высоты и ширины просмотра, таких как:

vh (высота видоульдоника)
VW (ширина просмотра)
Vmin (минимум ViewPort)
Vmax (максимум ViewPort)

Процент (%) Единица не принадлежит ни к какой категории выше.

18. Как достичь макета с двумя столбцами

Два макета столбца обычно относится к макету, которая имеет левый столбец ширины фикса

1. Флоат левый элемент слева, установите ширину на 200px, установите левый край правого элемента на ширину левого элемента.

.outer { Высота: 100px; } .оставил { плыть налево; Ширина: 200px; Фон: помидор; } .Правильно { Мяботая маржа: 200px; Ширина: Авто; Фон: золото; }

2. Используйте абсолютную позицию, до того, как мы должны установить свойство позиции родительского контейнера на что -либо, кроме статического. Затем установите положение левого элемента на абсолютную ширину 200px. Следуйте по маржинальному левому элементу до 200px.

.outer { позиция: относительно; Высота: 100px; } .оставил { позиция: абсолютно; Ширина: 200px; Высота: 100px; Фон: помидор; } .Правильно { Мяботая маржа: 200px; Фон: золото; }

3. Используйте гибкую макету, установите ширину левого элемента на 200 пикселей, установите свойство правого элемента Flex на 1

.outer { дисплей: Flex; Высота: 100px; } .оставил { Ширина: 200px; Фон: помидор; } .Правильно { сгибание: 1; Фон: золото; }

19. Как добиться трехстороннего макета

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

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

`.outer {позиция: относительно; Высота: 100px; }

.left {позиция: абсолют; Ширина: 100px; Высота: 100px; Фон: помидор; }

.right {позиция: абсолют; Верх: 0; Справа: 0; Ширина: 200px; Высота: 100px; Фон: золото; }

.center {Margin-left: 100px; Право маржи: 200px; Высота: 100px; Фон: Lightgreen; } `

2. Используйте гибкую макету, установите влево и правый элемент с фиксированной шириной, пусть гибкость центрального элемента: 1

`.outer {Display: Flex; Высота: 100px; }

.left {ширина: 100px; Фон: помидор; }

.right {ширина: 100px; Фон: золото; }

.center {Flex: 1; Фон: Lightgreen; } `

20. Хоризонтальный и вертикальный центрирование

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

.parent {позиция: родственник;} .child {позиция: абсолют; Слева: 50%; Верх: 50%; Преобразование: перевод (-50%,-50%); }

Используйте гибкий макет, установите Account-Eitems: Center и Levify-Content: Center

.parent { дисплей: Flex; uslify-content: center; Выравнивающие элементы: Центр; }

21. Понимание модели Flex Box

Flex – это новое значение, добавленное в свойство Display CSS. Наряду с Inline-Flex он вызывает элемент, к которому он применяется, чтобы стать гибким контейнером, и дети элемента становятся изгибным элементом. Затем элементы участвуют в макете Flex, и могут быть применены все свойства, определенные в модуле макета CSS Flexible Box. Получите в свои руки опыт в MDN

22. Ответственный дизайн

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

Основным принципом является использование запроса Media Query (@Media) для обнаружения различных размеров экрана устройства для обработки.

О совместимости: В заголовке страницы должен быть объявлен опорт Meta.

<Мета-ширина, “”/>

23.позиция и плавание

Прочитайте документацию BFC, чтобы продолжить

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

содержать внутренние поплавки. Исключить внешние поплавки. подавить крах крах.

В ходе выполнения…

Оригинал: “https://dev.to/weifengnusceg/css-concepts-the-one-and-only-guide-you-need-bb6”

Оглавление