Wondershare EdrawMind
Галерея диаграмм связей Селекторы для HTML и CSS
- 1
Селекторы для HTML и CSS
В HTML и CSS базовые селекторы, составные селекторы, псевдоселекторы и т. д. являются важным содержимым. На этой карте это содержимое подробно разделено, чтобы вам было легче его понять.
Отредактировано в 2021-07-26 11:47:06
- Рекомендовано вам
- Структура
CSS-селектор
Представляем таблицу стилей
1. Встроенные таблицы стилей
2. Внутренняя таблица стилей.
3. Внешние таблицы стилей
Селектор
базовый селектор
1. Универсальный селектор*
2. Селектор элемента h2
3. Селектор классов .class
4.селектор идентификатора #id
составной селектор
1. Селектор пересечений e#id || e.class
2. Селекторы объединения e1,e2,e3
3. Селектор потомков e1 e2 e3
4. Селектор потомков e1>e2>e3
5. Селектор соседнего родственного элемента e1 e2
6. Универсальный селектор одного уровня e1~e2.
Псевдоселектор
Селектор псевдоэлементов
1::первая линия
2::первая буква
3 ::до ::после;
4::выбор
Селектор псевдоклассов
1. Динамический селектор псевдоклассов
1:ссылка; (ссылка), когда нет доступа
2:посещенный (ссылка) после посещения;
3: наведение;
4: активировать при активации (при нажатии мыши)
5: фокус Когда фокусируешься
2. Селектор псевдоклассов пользовательского интерфейса
1: включено;
2: проверено
3: обязательно;
4: по умолчанию
5 :действительно;
6 :в пределах диапазона;
7: только чтение;
3. Структурный селектор псевдоклассов
1: селектор корневого элемента
2: пустой пустой элемент
3
:первый-ребенок; :последний-ребенок;
:первый тип :последний тип :только тип;
4
:nth-ребенок() :nth-последний-ребенок();
:nth-типа() :nth-последнего типа();
4. Другие селекторы псевдоклассов
1: целевая точка привязки страницы;
2: язык;
3:нет(селектор) Отрицательный селектор
селектор атрибутов
1 [атрибут]
2 [attr="значение"]
3 [attr^="значение"]
4 [attr$="значение"]
5 [attr*="значение"]
6 [attr~="значение"]
7 [attr|="значение"]
CSS
цветовое выражение
RGB (РГБА)
шестигранник
ХСЛ (ХСЛА)
фон
фон
Цвет фона Цвет фона
фоновое изображение
фоновое повторение
не повторяющийся
повторить-х
повторение
пространство (регулировка интервала между изображениями)
круглый (изменить размер изображения)
фоновая позиция
(сверху, слева, справа, снизу, в центре) попарное сочетание
(х% у%)
(х у)
фоновое происхождение
прокладка
рамка
поле содержимого
фоновый клип
прокладка
рамка
поле содержимого
размер фона
авто (исходный размер)
x,y (ширина, высота)
x%,y% (процент родительского элемента)
крышка (регулируется для покрытия всего контейнера)
содержать (отрегулировано для полного отображения)
фоновое вложение
локальный (прокручивает содержимое)
прокрутка (не прокручивает содержимое, а прокручивает страницу)
фиксированный (фиксированный, неконтролируемый размер)
коробочная модель
поля
Процент — это процент ширины родительского контейнера.
прокладка
допуск
граница
граница границы
ширина рамки
цвет границы
бордюрный стиль
граница-райус
изображение границы
источник-пограничного изображения
фрагмент изображения границы
ширина изображения границы
граница-изображения-начало
повторение границ изображения
коробка-тень
контур
цвет контура, стиль, ширина
Outline-Offset (внешнее смещение контура от границы)
размер
ширина
высота
минимальная ширина (высота)
максимальная ширина (высота)
Сценарий применения?
калибровка коробки
поле поля
рамка
прокладка
поле содержимого
переполнение
переполнение
авто
скрытый
прокрутка
видимый (по умолчанию)
наследовать
переполнение-x, переполнение-y
отображать
проблема с коллапсом полей
Вертикальный коллапс (обвал границы)
Вложенный коллапс
Расположение
плавать
Несколько способов очистки поплавков:
Принцип плавания
1. После того как элемент будет плавающим, он вырвется из документооборота и повысит уровень.
2. На положение плавающего элемента влияет предыдущий плавающий элемент. Если предыдущий элемент является плавающим и позиция за ним достаточна, он будет отображаться в той же строке, если позиция за ним недостаточна; элемент будет перенесен на следующую строку для отображения.
3. После размещения элемента, если предыдущий элемент не является плавающим, текущий элемент будет плавающим в отдельной строке.
4. Если элемент перемещается на следующую строку после плавания, на позицию текущего элемента влияет предыдущий элемент с тем же направлением плавания.
Уведомление
1. Плавающее значение приведет к уменьшению высоты родительского элемента.
2. Элементы обладают «свойствами переноса» после размещения в плавающем состоянии (аналогично встроенным блокам).
позиция
Атрибуты
статический (по умолчанию, обычный макет)
относительный (относительное позиционирование)
абсолютный (абсолютное позиционирование)
фиксированный (фиксированное позиционирование)
липкий (липкое позиционирование)
Уведомление
1. Чем позже позиционируется элемент, тем выше уровень (z-индекс)
2. После позиционирования элемента он приобретает «свойства переноса» (аналогично встроенным блокам).
Очистить поплавок: очистить
BFC (контекст форматирования на уровне блока)
1. Если соблюдены следующие условия, новый BFC будет создан автоматически.
Атрибут float не равен none
Атрибут позиции не является статическим или относительным.
Значение атрибута переполнения не отображается
Атрибут отображения — flex, inline-flex, inline-block, table-cell или table-caption.
2.Правила BFC: вертикальный крах поля, вложенный коллапс.
Решение: поместите div в другой BFC.
3. Методы размещения плавающих элементов
1. Также установите поплавок для контейнера
2. Используйте команду «clear», чтобы очистить плавающие значения.
3. Создайте новый BFC для внешнего элемента.
4. Используйте BFC, чтобы предотвратить перенос текста
многоколоночный макет
Column-count: укажите количество столбцов.
ширина столбца: укажите ширину столбца
столбцы
Column-Gap: расстояние между столбцами
длина
нормальный
Column-fill: как контент распределяется между столбцами
баланс (контент распределяется равномерно)
авто (содержимое заполняется по порядку)
Column-span: указывает, сколько столбцов элемент охватывает по горизонтали.
число
все
ширина правила столбца: укажите ширину между столбцами.
coloum-rule-style: укажите стиль между столбцами.
Column-rule-color: определяет цвет между столбцами
правило столбца
Случай: схема водопадного потока
Вопрос на собеседовании: Несколько методов реализации многоколоночного макета
плавать
позиция
столбец
Макет веб-страницы Trinity
Центрированный макет
встроенные элементы
Горизонтально по центру: родительский элемент text-align: center;
Вертикально по центру: line-height: (высота);
элементы уровня блока
По центру по горизонтали: поле: 0 авто;
Центрировать по вертикали:
ШАГ 1: позиция: абсолютная;
ШАГ 2: вверху, внизу (слева, справа): 0;
ШАГ 3: поле: авто;
макет с одной колонкой
макет в две колонки
Макет с фиксированной шириной и двумя столбцами по центру
Боковая панель имеет фиксированную ширину, а основной контент является адаптивным.
Используйте реализацию с плавающей запятой
Используйте позиционирование для достижения
макет в три столбца
метод с плавающей запятой
метод абсолютного позиционирования
Метод отрицательной маржи
классическая планировка
Компоновка двойного летающего крыла
макет Святого Грааля
Схема водопадного потока
Использование отрицательных полей
Отрицательные поля для статических элементов
Сверху и слева: переместите сам элемент в левый верхний угол.
Внизу и справа: позвольте последующим элементам вторгаться снизу или справа, чтобы покрыть себя.
Отрицательные поля для плавающих элементов
То же, что и плавающее направление: элемент перемещается на соответствующее расстояние в соответствующем направлении.
В противоположность плавающему направлению: сам элемент не перемещается, а элементы до или после элемента будут перемещаться на соответствующее расстояние в направлении элемента.
Применение отрицательных полей
Трехколоночный макет для списков
флексбокс-макет
дисплей (установлен в гибкую рамку)
flex (гибкий блок на уровне блока)
inline-flex (встроенная гибкая коробка)
flex-wrap (укажите перенос элемента)
обертка (укажите гибкий элемент для автоматической обертки)
nowrap (значение по умолчанию, без автоматического переноса строк)
Wrap-Reverse (гибкие элементы автоматически переворачиваются в обратном направлении)
flex-direction (задает направление расположения элементов)
ряд (значение по умолчанию, гибкие элементы располагаются горизонтально)
колонна (вертикальное расположение)
рядно-обратное (обратное горизонтальное расположение)
колонна-реверс (вертикальное реверсивное расположение)
Может быть объединен в гибкий поток
Выравнивание макета флексбокса
Две важные концепции
Главная ось: определяет порядок расположения упругих элементов.
Вертикальная ось: определяет направление, в котором добавляются элементы во второй строке после разрыва строки.
Выравнивание
justify-content (выравнивание по главной оси)
flex-start (значение по умолчанию, упругий элемент начинается близко к главной оси)
flex-end (упругий элемент расположен близко к торцевой кромке главной оси)
центр (гибкий элемент центрируется по главной оси)
пространство между (расположите каждый элемент равномерно, при этом первый элемент будет ближе к начальному краю главной оси, а последний элемент - к конечному краю главной оси.)
space-around (Все гибкие элементы расположены равномерно, и расстояние между элементами не сокращается.) (Располагайте каждый элемент равномерно, выделяйте одинаковое пространство вокруг каждого элемента)
равномерно по пространству (Все гибкие элементы расположены равномерно, а расстояние между элементами уменьшено.) (Каждый элемент расположен равномерно, с одинаковым расстоянием между каждым элементом)
Выравнивание по вертикальной оси
align-items (выравнивание всех элементов по вертикальной оси)
flex-start (гибкие элементы начинаются близко к вертикальной оси)
flex-end (упругий элемент расположен близко к торцевому краю вертикальной оси)
центр (гибкий элемент центрируется по вертикальной оси)
базовая линия (гибкие элементы выравниваются по базовой линии)
растянуть (значение по умолчанию, упругий элемент растягивается на весь размер вертикальной оси)
align-self (выравнивание по вертикальной оси элемента)
align-content (выравнивание многострочных гибких элементов)
гибкий старт
гибкий конец
центр
пространство-между
разворот
равномерно по пространству
порядок (порядок отображения)
эластичность
flex-grow (Определяет, как увеличивается гибкий элемент.)
flex-shrink (определяет, как сжимаются гибкие элементы)
flex-basis (гибкая основа)
flex-basis устанавливает начальный размер (не ширину), занимаемый гибким элементом на главной оси.
Если одновременно заданы flex-basis, ширина и высота, последние будут автоматически перезаписаны.
гибкий (0 1 авто)
Характеристики гибких элементов
1. Края двух упругих элементов не сплющиваются и не разрушаются.
2. Недопустимо устанавливать плавающие элементы на гибкие элементы (но можно задать позиционирование).
Сетка (сетка)
основная терминология
Линия сетки
Сетка трека
Сетка Ячейка
Область сетки
дисплей (установлен как контейнер сетки)
сетка
встроенная сетка
Определения строк и столбцов
столбцы-шаблона сетки
fr (например: 1fr 1fr 1fr; 100px 50% 1fr)
строки-шаблона сетки
fr: Здесь fr пропорционален высоте контейнера сетки. (Если высота отсутствует, она будет рассчитываться в соответствии с высотой содержимого.)
Определение шаблонов на основе регионов
Grid-template-area: необходимо использовать с Grid-Area.
Уведомление
1. Каждую строку необходимо обернуть строкой
2. Должен быть прямоугольным.
Навык
...значит оставить это поле пустым