Атрибуты: Параметры размеров блочных элементов.

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



  То есть фактические размеры поля элемента должны учитывать все эти размеры.
  Высота области.
  Атрибуты:
  height - Устанавливает высоту области контента (или рамки) в поле элемента.

Формат:

  • height:
      auto
      |Размер
      |initial
      |inherit
      |unset

Значения:

  • auto - Высота устанавливается автоматически исходя из формата контента в поле элемента и высоты окна браузера.
      Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Если формат контента не позволит полю элемента поместиться в окно браузера, то возможное переполнение можно оформить атрибутом стиля overflow.
  • Размер - Линейная величина с единицей измерения.
      Если пользовательское представление контента не будет помещаться в размер, то в поле элемента может появится строка для вертикального скроллинга.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Для определения этого размера в строке таблицы, атрибут стиля height связывается с элементом тега первой ячейки, входящей в эту строку.
  max-height - Устанавливает максимальную высоту области контента (или рамки) в поле элемента.

Формат:

  • max-height:
      Размер
      |none

Значения:

  • Размер - Линейная величина с единицей измерения.
      Браузер не будет устанавливать высоту области контента (или рамки) в поле элемента больше указанной величины, вследствие чего в поле элемента на Web-странице может появиться строка для вертикального скроллинга.
  • none - Нет никаких ограничений по этому размеру поля элемента (умолчание).
  Для определения этого размера в строке таблицы, атрибут стиля max-height связывается с элементом тега первой ячейки, входящей в эту строку.
  min-height - Устанавливает минимальную высоту области контента (или рамки) в поле элемента.

Формат:

  • min-height:
      Размер
      |auto

Значения:

  • Размер - Линейная величина с единицей измерения.
      Браузер не будет устанавливать высоту области контента (или рамки) в поле элемента меньше указанной величины, вследствие чего в окне браузера может появиться строка для вертикального скроллинга.
  • auto - Минимальная высота устанавливается автоматически исходя из формата контента в поле элемента и высоты окна браузера.
      Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Если формат контента не позволит полю элемента поместиться в окно браузера, то возможное переполнение можно оформить атрибутом стиля overflow.
  Для определения этого размера в строке таблицы, атрибут стиля min-height связывается с элементом тега первой ячейки, входящей в эту строку.
  Ширина области.
  Атрибуты:
  width - Устанавливает ширину области контента (или рамки) в поле элемента.

Формат:

  • width:
      auto
      |Размер
      |initial
      |inherit
      |unset

Значения:

  • auto - Ширина устанавливается автоматически исходя из формата контента в поле элемента и ширины окна браузера.
      Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Если формат контента не позволит полю элемента поместиться в окно браузера, то возможное переполнение можно оформить атрибутом стиля overflow.
  • Размер - Линейная величина с единицей измерения.
      Если пользовательское представление контента не будет помещаться в размер, то в поле элемента может появиться строка для горизонтального скроллинга.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Для определения этого размера в столбце таблицы, атрибут стиля width связывается с элементом тега первой ячейки, входящей в этот столбец.
  max-width - Устанавливает максимальную ширину области контента (или рамки) в поле элемента.

Формат:

  • max-width:
      Размер
      |none

Значения:

  • Размер - Линейная величина с единицей измерения.
      Браузер не будет устанавливать ширину области контента (или рамки) в поле элемента больше указанной величины, вследствие чего в поле элемента на Web-странице может появиться строка для горизонтального скроллинга.
  • none - Нет никаких ограничений по этому размеру поля элемента (умолчание).
  Для определения этого размера в столбце таблицы, атрибут стиля max-width связывается с элементом тега первой ячейки, входящей в этот столбец.
  min-width - Устанавливает минимальную ширину области контента (или рамки) в поле элемента.

Формат:

  • min-width:
      Размер
      |auto

Значения:

  • Размер - Линейная величина с единицей измерения.
      Браузер не будет устанавливать ширину области контента (или рамки) в поле элемента меньше указанной величины, вследствие чего в окне браузера может появиться строка для горизонтального скроллинга.
  • auto - Минимальная ширина устанавливается автоматически исходя из формата контента в поле элемента и ширины окна браузера.
      Нормальное состояние. Наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Если формат контента не позволит полю элемента поместиться в окно браузера, то возможное переполнение можно оформить атрибутом стиля overflow.
  Для определения этого размера в столбце таблицы, атрибут стиля min-width связывается с элементом тега первой ячейки, входящей в этот столбец.
  Интерпретация размеров.
  Атрибуты:
  box-sizing - Устанавливает, как интерпретировать значения размеров поля элемента.
  По умолчанию значения атрибутов width, height, min-width, min-height, max-width, max-height задают размеры области контента, и не включают размеры внутренних отступов, рамок и внешних отступов.
  Атрибут стиля box-sizing позволяет переопределить смысл значений атрибутов width, height, min-width, min-height, max-width, max-height.

Формат:

  • box-sizing:
      border-box
      |content-box

Значения:

  Динамическая изменяемость размеров.
  Атрибуты:
  resize - Устанавливает изменяемость размеров поля элемента.
  Атрибут resize даёт возможность пользователю интерактивно изменять размеры поля элемента.
  В любом случае, соответствующий размер поля элемента не может быть интерактивно установлен больше заданного максимального - max-height, max-width, и меньше заданного минимального - min-height, height, min-width, width.
  Атрибут resize применим к элементам, для которых атрибут стиля overflow не имеет значение visible.

Формат:

  • resize:
      both
      |horizontal
      |vertical
      |none
      |initial
      |inherit
      |unset

Значения:

  • both - Пользователь может включить (указателем мышки) механизм, позволяющий ему изменять установленные размеры поля элемента на экране по горизонтали и вертикали.
  • horizontal - Пользователь может включить (указателем мышки) механизм, позволяющий ему изменять установленные размеры поля элемента на экране по горизонтали.
  • vertical - Пользователь может включить (указателем мышки) механизм, позволяющий ему изменять установленные размеры поля элемента на экране по вертикали.
  • none - Означает, что установленные размеры поля элемента не могут быть изменены пользователем на экране.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.