Вы знаете, по отношению к кому мы обычно пишем % в CSS?

внешний интерфейс Шаблоны проектирования Апплет WeChat CSS

     

0 Предисловие

Когда мы пишем CSS, мы часто используем процентное присвоение (%) для достижения адаптивности. Как и в наиболее часто используемом шаблоне дизайна гибкого макета, ширина практически всех столбцов оценивается в процентах. Или, например, горизонтальное и вертикальное центрирование элементов, с которыми мы часто сталкиваемся, мы часто используем следующий код CSS для достижения (абсолютная идея + преобразование):

.wrap {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Поскольку все используют его часто, они должны знать, что первые две 50 % относятся к 50 % ширины и высоты эталонного объекта позиционирования обтекания, а 50 % в translate() относятся к самому обтеканию. сомневаюсь в этом. , но в этих простых трех строках кода есть два разных значения %, одно относительно поля ссылки, а другое относительно самого себя. Но вы думаете, что в мире CSS есть только два типа процентных значений? Все не так просто, ниже я перечислю эталонные объекты значения % в разных ситуациях, и слушайте меня.


1. Первая категория - категория позиционирования

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

  • static: Излишне говорить, что значение позиции по умолчанию не играет роли в позиционировании элемента, поэтому атрибуты позиции, такие как левая и правая, не могут быть эффективно назначены, поэтому в функции позиционирования нет значения %.
  • Абсолют: как один из наиболее часто используемых атрибутов позиционирования, абсолют вырыл бесчисленное количество дыр для внешнего интерфейса Xiaobai, Я считаю, что процесс изучения этого в первые годы был трудным. Не слишком далеко, после абсолютного позиционирования элемента, вы можете присвоить значение позиции, например, слева.Ссылочный объект — это позиционированный элемент в элементе-предке, поэтому, естественно, если значение позиции равно%, то относительный элемент этого% равен ссылка вещь. Слева и справа относятся к ширине, верх и низ относятся к высоте, поэтому мне не нужно говорить больше.
  • относительный: Маленькие друзья, должно быть, слышали о сыне и отце, и их нужно часто использовать.Тогда относительный позиционируется относительно самого себя, поэтому значение позиции, естественно, относится к его собственной ширине и высоте.
  • fixed: это очень специальное значение позиционирования, потому что мы знаем, что оно позиционируется относительно области просмотра, поэтому естественная ссылка % — это область просмотра.

2. Вторая категория - коробочная модель

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

  • margin&padding: эти два элемента очень особенные.Если установлено значение %, то они относятся к ширине родительского элемента! ! Ширина родительского элемента! ! !Родительский элемент! ! ! ширина! ! ! Важные вещи говорят трижды, если не верите, можем попробовать сами. Это действительно странно, но вы действительно должны помнить, не смущайтесь, когда вы разрабатываете это и думаете, что это ошибка. Мы можем использовать это особое свойство отступов, чтобы реализовать создание адаптивных блоков изображений и видео в различных соотношениях, таких как 16:9 или 4:3.
  • Для границы: граница, я никогда не видел, чтобы кто-то использовал значение %.Если вы используете % при разработке, пожалуйста, примите мое колено. То, о чем мы хотим поговорить здесь, на самом деле является шириной границы, потому что граница на самом деле является сокращенным свойством. На самом деле я вам соврал.Border-width в настоящее время не разрешено вводить значение %.Пока неизвестно будет ли разрешено в будущем и к кому оно относится.Если вы напишете значение %,браузер не будет визуализировать его, поэтому значение границы% не существует.
  • border-radius: Раз уж мы говорили о границе, давайте упомянем радиус границы, закругленные углы. Обычно, когда мы используем этот атрибут, мы в основном назначаем ему 4 параметра, представляющих четыре угла: верхний левый, верхний правый, нижний правый и нижний левый, отсортированные по часовой стрелке. Но на самом деле border-radius может принимать до восьми значений.Первые четыре значения и последние четыре значения разделены символом /.Передняя часть косой черты указывает радиус угла в горизонтальном направлении каждого угла, а задняя часть косой черты указывает вертикаль каждого угла Радиус угла в направлении. Примеры следующие:
border-radius：top-left|top-right|bottom-right|border-left / top-left|top-right|bottom-right|border-left

3. Третья категория - фоновое значение

  • background-size: часто используемое свойство при установке фона.Хотя вместо этого мы обычно используем contains или cover, когда мы хотим заполнить весь блок фоном, мы также напишем это так:
background-size:100% 100%;

Следовательно, эталонный объект background-size совпадает с border-radius, который представляет собой ширину и высоту самого блока.

  • background-position: это свойство аналогично относительному, и оно также влияет на позиционирование, поэтому его ссылочным объектом является исходный блок. Но этот атрибут особенный.Он относится не к ширине и высоте оригинального бокса, а к оставшемуся значению, полученному путем вычитания ширины и высоты фонового изображения из ширины и высоты исходного бокса.Чтобы выразиться более наглядно , следующие два значения атрибута эквивалентны: «центр по центру» и «50% 50%», если вы установите последнее, фоновое изображение будет автоматически центрировано, нет необходимости преобразовывать смещение, например позиционирование. Это должно быть потому, что превосходные предшественники учитывали его будущее применение при разработке этого свойства.

4. Четвертая категория - трансформация

  • translate(): В первом модуле мы говорили о таком атрибуте: translate(). В CSS3 также есть translate3d(). Всем известно значение этого атрибута, которое заключается в выполнении 2d-смещения в указанном направлении. его ссылка - его собственная ширина и высота. Третий атрибут transform3d() относится к смещению по оси Z. Поскольку значением по умолчанию для z-index является auto, значение % не работает, то есть назначать значение в процентах для translateZ(). бессмысленный.
  • transform-origin: Этот атрибут предназначен для изменения источника преобразования элемента.Он имеет те же характеристики, что и ширина и высота, поэтому я не буду вдаваться здесь в подробности.
  • Масштабирование (): масштабирование элемента управления, параметр пропускается вообще поплавок, относится к пропорции самого элемента относительно увеличения или уменьшенного.
  • масштабирование: масштабирование не является значением свойства преобразования, это независимое свойство CSS, причина, по которой оно обсуждается в модуле преобразования, заключается в том, что оно имеет те же характеристики, что и масштаб(), и его значение может быть либо с плавающей запятой числа или %, включая ссылки, эквивалентны scale().

5. Категория 5 — Шрифты

  • размер шрифта: это свойство, как и наша высота, относится к размеру шрифта родительского блока.
  • line-height: высота строки, о которой мы говорим, также является особым свойством, и если вы присвоите ему разные типы значений, у него будут разные характеристики. Если его значение свойства является безразмерным числом, то конечным результатом является произведение этого числа и размера шрифта элемента. Это наш предпочтительный метод для установки высоты строки, потому что размер шрифта font-size наследуется от элемента-предка, и значение, установленное этим методом, в основном не будет ненормальным. Но если наше значение равно %, конечным результатом будет заданное процентное значение, умноженное на последний рассчитанный размер шрифта элемента.
  • text-indent: Это свойство используется для установки отступа первой строки. Самый длинный, который мы используем, — 2em, а первая строка имеет отступ в два символа. 2em здесь означает удвоенный размер шрифта. Логически говоря, если требуется %, он также должен относиться к своему собственному размеру шрифта, но он настолько особенный, как отступы и поля, если он установлен в %, он относится к ширине родительского элемента. Это должен быть особый случай.

6. Заключение

Вы можете посмотреть на него один раз и все равно выглядеть сбитым с толку.Чтобы укрепить вашу память, я сделаю резюме, основанное на различных категориях эталонных объектов:

  • Относительно родительского поля:

Наиболее распространенный должен относиться к свойствам родительского блока (содержащего блока), но есть некоторые особые случаи, которые относятся к ширине родительского блока.Только эту категорию необходимо обсуждать в двух категориях:

  • Относительно самой коробки:

Существует много атрибутов, которые относятся к самому блоку. Атрибуты, на которые ссылаются, как правило, являются атрибутами, связанными с самим собой. Значения атрибутов, принадлежащие к этой категории: относительный в позиционировании; радиус границы в модели блока; фон в фоновом режиме -size; фоновая позиция в фоновом режиме особенная, помните, она должна вычитать ширину и высоту вашего фонового изображения, вы можете думать о значении свойства flex в макете flex; в трансформации преобразования, translate(), transform -origin, scale() и свойство масштабирования, которое мы расширили по аналогии с transform, все они ссылаются сами на себя; высота строки line-height связана с размером шрифта, поэтому ссылка — это собственный размер шрифта.

  • Относительно позиционированных элементов:

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

Для всех атрибутов, перечисленных в статье, вы можете обратиться к официальному сайту MDN за конкретными характеристиками некоторых значений атрибутов, На самом деле, как и атрибуты, перечисленные выше, нам не нужно запоминать их все, и запомнить их сложно. много раз нам просто нужно проверить это в браузере, чтобы узнать, на кого ссылается CSS.

Наконец, есть небольшой вопрос, как получить квадратный div с одинаковой шириной и высотой, если вместо px используется только %?

Нелегко писать документ. Я надеюсь, что каждый может оказать ему большую поддержку. Если у вас есть какие-либо дополнения, пожалуйста, оставьте их в области комментариев, спасибо.


Автор: IMWeb jerryOnlyZRJ
Оригинал: Вы знаете, по отношению к кому мы обычно пишем % в CSS? - Сообщество команды Tencent Web Front-end IMWeb



Разработка мини-программы WeChat — курс СЛЕДУЮЩАЯ степень горячо регистрируется, заинтересованные друзья торопятсящелкните изображениечтобы узнать больше о курсе!



Категории