greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/russian/css/height-and-width-dimensions/index.md

6.4 KiB
Raw Blame History

title localeTitle
Height and Width Dimensions Высота и ширина Размеры

Высота и ширина Размеры

Определение

Программисты могут использовать свойства высоты и ширины для изменения высоты и ширины конкретных элементов. Чтобы их размеры были изменены, значение свойства display этих элементов должно быть установлено на block или inline-block .

Синтаксис

Высота:

  • height: auto|length|initial|inherit;
  • min-height: length|initial|inherit;
  • max-height: none|length|initial|inherit;

Ширина:

  • width: auto|value|initial|inherit;
  • min-width: length|initial|inherit;
  • max-width: none|length|initial|inherit;

Использование и примеры

Все упомянутые выше свойства могут иметь только одно значение.

Высота:

Свойство height задает точную высоту элемента. Значение auto является значением по умолчанию и позволяет браузеру автоматически устанавливать высоту. Обычно это определяется тем, сколько вертикального пространства занимает элемент элемента. Длина высоты может быть установлена ​​в px отношению к высоте ближайшего родительского элемента с использованием единицы % или относительно высоты vh просмотра с помощью модуля vh . initial значение будет иметь тот же эффект, что и auto значение в то время как в inherit значение даст элементу ту же высоту, что и его ближайший родительский элемента.

Пример:


<p id="red">Example text</p> 

p#red { 
    margin: 0; 
  background-color: red; 
  height: 50vh; 
    line-height: 50vh; 
    text-align:center; 
 }

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

Свойство min-height устанавливает минимальную высоту, которую должен иметь элемент. Это свойство полезно при вертикальном изменении размера страницы, так как программист может помешать слишком большому элементу и не появиться. Значение по умолчанию для min-height элемента равно 0. Код CSS, приведенный ниже, не позволит абзацу с ID примера сокращаться до высоты менее 400 пикселей.

Пример:

p#example { 
  min-height: 400px; 
 }

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

Пример:

p { 
  max-height: 40px; 
  background-color: red; 
 }

Результат: Пример 3.

Ширина:

Объяснения свойств ширины CSS точно такие же, как и свойства высоты, за исключением того, что они изменяют ширину элемента. Поэтому я покажу несколько примеров использования этих свойств ниже.

Пример:

p { 
  width: 150px; 
  background-color: red; 
 }

Результат: Пример 4.

Примечание. Содержимое не переполняется вправо, оно занимает только указанную ширину и затем разбивается на следующую строку.

Пример:

p { 
  min-width: 50px; 
 }

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

Пример:

p { 
  max-width: 300px; 
  background-color: red; 
 }

Приведенный выше код не позволит ширине элемента больше 300 пикселей.

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

Дополнительная информация: