Свойства размера CSS относятся к свойствам ширины и высоты элементов. Хотя это очень просто, это навык, который необходимо освоить. CSS предоставляет несколько атрибутов, таких как ширина, высота, максимальная ширина, минимальная ширина, максимальная высота и минимальная высота, для установки ширины и высоты элементов. Эти элементы очень просты в использовании. Давайте кратко представим их ниже.
1.высота
(1) Установите высоту элемента: атрибут высоты.
Высота: свойство определяет высоту элемента.
① Область применения и объекты применения: Область содержимого по умолчанию.
Применимые объекты: все элементы
незаменяемые строчные элементы, столбцы таблицы, группы столбцов
Область применения: По умолчанию этот атрибут определяет высоту области контента.
② Изменение области применения:
Если для параметра box-sizing установлено значение border-box, это свойство определяет высоту области границы.
③ Не применимо
Встроенные незаменяемые элементы: этот атрибут игнорируется.
Встроенные элементы: невозможно установить высоту.
④ Переопределение значения атрибута
Свойства min-height и max-height переопределяют высоту.
(2) Высокий уровень грамматики
высота: авто|длина|%|наследовать;
Содержит экспериментальные значения атрибутов: [ <длина> | <процент> ] && [рамка-поле содержимого] | минимальное содержимое | максимальное содержимое |
/*Значение ключевого словаЗначение ключевого слова*/height:auto;/*Значение длины<длина>значения*/height:120px;height:10em;/*Процентное значение<percentage>value*/height:75%;/*Глобальное ключевое слово ValueGlobalvalues*/ высота: наследовать; высота: начальная; высота: не установлена;
2.ширина
(1) Установите ширину элемента: атрибут ширины.
① Применимая область
Область содержимого: по умолчанию задается ширина области содержимого.
Не включено: вы можете добавить отступы, границы и поля за пределами области содержимого.
Измените применимую область: Но если для размера окна установлено значение border-box, он задает ширину области границы.
② Применимые элементы
Все элементы, кроме следующих элементов
Неприменимые элементы: незаменяемые строчные элементы, строки таблицы и группы строк.
Встроенные незаменяемые элементы будут игнорировать этот атрибут.
③ Крышка
Свойства min-width и max-width могут переопределять ширину.
(2) Синтаксис ширины
ширина: авто | длина | наследовать;
Содержит экспериментальные значения атрибутов: [ <длина> | <процент> ] && [рамка-поле содержимого] | минимальное содержимое | максимальное содержимое |
/*Значение длины<length>values*/width:300px;width:25em;/*Процентное значение<percentage>value*/width:75%;/*Значение ключевого слова Keywordvalues*/width:25emborder-box;width:75 % поле содержимого ;ширина:макс-контент;ширина:мин-контент;ширина:доступно;ширина:подходит-контент;ширина:авто;/*Глобальные значенияГлобальные значения*/ширина:наследовать;ширина:начальная;ширина:не установлена;
3. максимальная ширина и максимальная высота
Атрибуты max-width и max-height используются для установки максимальной ширины и максимальной высоты области содержимого элемента соответственно. Когда свойства max-width и max-height определены, фактические значения свойств width и height будут меньше или равны значениям свойств max-width и max-height, независимо от фактического значения. значения свойств ширины или высоты. Необязательные значения свойств max-width и max-height следующие:
В качестве примера возьмем атрибут max-width: (характеристики атрибута max-height аналогичны)
(1) Когда значение атрибута max-width меньше атрибута ширины, значение атрибута ширины будет переопределено до того же значения, что и атрибут max-width;
(2) Если значение атрибута max-width больше ширины, атрибут max-width будет игнорироваться;
(3) Если значение атрибута max-width меньше min-width, атрибут max-width будет игнорироваться.
4.минимальная ширина и минимальная высота
Атрибуты min-width и min-height используются для установки минимальной ширины и минимальной высоты области содержимого элемента. Когда атрибуты min-width и min-height определены, независимо от фактического значения атрибута ширины или высоты. атрибуты ширины и высоты. Фактические значения будут больше или равны значениям свойств min-width и min-height. Необязательные значения свойств min-width и min-height следующие:
В качестве примера возьмем атрибут min-width: (атрибут min-height имеет аналогичные характеристики)
(1) Если значение атрибута min-width меньше ширины, атрибут min-width будет игнорироваться;
(2) Когда значение атрибута min-width превышает ширину, значение атрибута min-width будет переопределено до того же значения, что и атрибут min-width;
(3) Если значение атрибута min-width больше, чем max-width, атрибут max-width будет игнорироваться.