Модель анализа принципов CSS

Пишите впереди:

1. Что такое блочная модель и какие свойства ей управляют?
2. Margin, Padding, Border, Width, Height — эти свойства изменяют/влияют на блочную модель, но будет ли каждое свойство действовать на все элементы?
3. Если есть разница, связана ли она с типом элемента или его расположением?
4. Что такое плавающий элемент? Как определяется местоположение? Если пойти плавать?
5. Как судить о приоритете каскадных отношений? Чем больше, тем ближе к пользователю?

содержание

содержащий блок

1. Для корневого элемента элемент с position=fixed, содержащим блоком является область просмотра
2. Если элемент является относительным или статическим, это область содержимого (содержимое) его ближайшего родительского элемента в форме блока. Примечание. Он указывает, что родительский элемент должен быть блочным контейнером.
3. Если элемент абсолютный, содержащий его блок — это область Padding ближайшего нестатического родительского элемента — примечание: тип родительского элемента не указан

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

коробочная модель

1. ширина. Разделены на четыре направления, все поддерживают процент и конкретные пиксели. И процент поля рассчитывается в соответствии с шириной содержащего блока элемента. Дело не в том, что margin-top/bottom соответствует высоте.образец кода
2. Верхнее поле и нижнее поле встроенных элементов (отображение: встроенное) недействительны. Браузер не позволяет настройки.
3. сливаться.

• Горизонтальные поля не объединены (поддерживаются как встроенные блоки, так и встроенные)образец кода
• Оба принадлежат обычным блок-блокам в потоке, родственным элементам в одном и том же контексте. Решение. Превратите один из блок-блоков в BFC, чтобы предотвратить слияние полей.образец кода
• Когда родительский элемент блочного уровня и его дочерние элементы не разделены отступами, рамкой, высотой или промежутками, поля дочернего элемента будут проникать в родительский элемент. Проще говоря, между родительским и дочерним элементами нет других элементов.образец кода

• Для элемента position=static отрицательное значение эквивалентно перемещению элемента в отрицательном направлении для покрытия, но оно закроет только цвет, а не текст.образец кода
• Для элементов position=relative отрицательное значение по-прежнему останется и переместит элемент ниже, но полностью закроет предыдущий элемент.образец кода
• Для элемента position=absolute, поскольку элемент находится вне потока документов, отрицательное значение будет смещено только само по себе и не повлияет на предшествующие и последующие элементы.образец кода
• Для элементов с плавающей запятой это может быть переопределено отрицательными значениями, и наиболее распространенным приложением является приложение с тремя столбцами.образец кода

1. ширина. То же, что маржа.
2. Заполнение встроенного элемента (display: inline) вступает в силу, но верх и низ не будут толкать, а только закрывать другие элементы, а покрытие следует принципу z-index.образец кода
3. сливаться. В Padding нет ситуации слиянияобразец кода
4. Отрицательные значения не допускаются.

1. ширина. Только px, проценты не поддерживаются.
2. сливаться. Строчные элементы не объединяются слева и справа, но будут объединяться вверх и вниз. Элементы встроенного блока и блока не будут сливаться во всех четырех направлениях.образец кода

1. У встроенных элементов не может быть задана ширина и высота.
2. Процентные настройки невстроенных элементов (см. содержащий блок выше)

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

режим позиционирования

1. Что происходит с BFC (выберите одно из четырех)

• плавать
• абсолютное позиционирование
• Блок-контейнеры, не являющиеся блок-боксами (встроенный блок)
• Overflow не является блок-боксом для Visible

• Расположите вертикально от верхней части содержащего блока
• Поля между соседними блоками внутри BFC будут объединены — слияние может быть разрешено путем превращения одного из братьев и сестер в BFC.
• BFC может предотвратить слияние маржи

1. Как сгенерировать: Генерируется только в том случае, если элемент блочного уровня содержит только элементы встроенного уровня.
2. характеристика

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

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

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

• Введите пробелы, родительский элемент использует псевдоэлемент ::after
• Плавающие элементы ограничены BFC, используйте overflow:hidden
• Очистить свойство

абсолютное позиционирование

Position=absolute задает абсолютное позиционирование элемента, что приведет к тому, что элемент станет абсолютным позиционированием, вне потока документа, и в это время элемент находится в макете BFC, а Margin не будет объединен. Используйте верхний/нижний/левый/правый (сокращенно TBLR ниже) для управления изменением положения, а определенные пиксели и проценты смещаются относительно содержащего блока.

Сравните другие значения свойства положения

1. position = статическая обычная схема потока, не может контролировать позицию через TBLR
2. Position = Относительная коробка смещена относительно его нормального положения потока, а элементы брата расположены относительно их позиции предварительной смещения. При использовании элемента управления TBLR, если он является фиксированным пикселем, коробка смещена относительно собственной границы, и если это процент, это относится к смещению содержащего блока.
3. Position = Fixed содержит блоки в виде окна, использование элементов управления TBLR относится к смещению блока
4. Для процентов: слева/справа относительно ширины содержащего блока, сверху/снизу относительно высоты содержащего блока

Каскадные отношения

Всего существует 7 уровней стекирования в контексте стекирования, перечисленных ниже:образец кода

1. Фон и граница — фон и граница элементов, формирующих контекст наложения. Самый низкий уровень в контексте стека.
2. Отрицательные значения z-index — дочерние элементы с отрицательными значениями z-index в контексте стека.
3. Блочные блоки — невстроенные, непозиционированные дочерние элементы в потоке документа.
4. Floating Box — непозиционированный плавающий элемент.
5. Встроенное поле — непозиционированный дочерний элемент встроенного уровня в потоке документа.
6. z-index: 0 - позиционировать элемент. Эти элементы формируют новый контекст стека.
7. Положительные значения z-index — позиционирование элемента. Самый высокий уровень в контексте стека.

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

Порядок сравнения становится следующим: сначала сравните z-индекс каждого контекста наложения. Затем приоритет дочерних элементов сравнивается в контексте стека.

Суммировать

1. В этой статье объясняется содержащий блок и блочная модель, определенная на основе содержащего блока, и обобщается метод расчета четырех границ блочной модели.
2. Обобщаются методы позиционирования элементов и изменения положения между элементами, вызванные различными методами позиционирования.
3. Дальнейшие действия продолжат разбирать общие, но запутанные места в CSS в краткой форме.
4. Если есть какая-либо ошибка, пожалуйста, укажите на нее, и давайте вместе добиваться прогресса~