120 lines
6.4 KiB
Markdown
120 lines
6.4 KiB
Markdown
---
|
||
title: Height and Width Dimensions
|
||
localeTitle: Высота и ширина Размеры
|
||
---
|
||
## Высота и ширина Размеры
|
||
|
||
### Определение
|
||
|
||
Программисты могут использовать свойства высоты и ширины для изменения высоты и ширины конкретных элементов. Чтобы их размеры были изменены, значение свойства `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` значение даст элементу ту же высоту, что и его ближайший родительский элемента.
|
||
|
||
**Пример:**
|
||
|
||
```html
|
||
|
||
<p id="red">Example text</p>
|
||
```
|
||
|
||
```css
|
||
p#red {
|
||
margin: 0;
|
||
background-color: red;
|
||
height: 50vh;
|
||
line-height: 50vh;
|
||
text-align:center;
|
||
}
|
||
```
|
||
|
||
**Результат:**  В приведенном выше примере используется единица `vh` для установки высоты. Этот блок используется для установки высоты элемента относительно высоты окна просмотра. В этом случае красной абзаце присваивается высота половины высоты видового экрана, поэтому она занимает 50% экрана. _Примечание. Все поля по умолчанию должны быть удалены из тела, чтобы результат выглядел как следует._
|
||
|
||
Свойство `min-height` устанавливает минимальную высоту, которую должен иметь элемент. Это свойство полезно при вертикальном изменении размера страницы, так как программист может помешать слишком большому элементу и не появиться. Значение по умолчанию для `min-height` элемента равно 0. Код CSS, приведенный ниже, не позволит абзацу с `ID` **примера** сокращаться до высоты менее 400 пикселей.
|
||
|
||
**Пример:**
|
||
|
||
```css
|
||
p#example {
|
||
min-height: 400px;
|
||
}
|
||
```
|
||
|
||
Свойство `max-height` устанавливает максимальную высоту, которую может достигнуть элемент. Это может быть полезно, если вы не хотите, чтобы элемент был больше определенного размера. Если содержимое элемента имеет большую высоту, чем значение `max-height` , содержимое будет переполняться.
|
||
|
||
**Пример:**
|
||
|
||
```css
|
||
p {
|
||
max-height: 40px;
|
||
background-color: red;
|
||
}
|
||
```
|
||
|
||
**Результат:** 
|
||
|
||
#### Ширина:
|
||
|
||
Объяснения свойств ширины CSS точно такие же, как и свойства высоты, за исключением того, что они изменяют ширину элемента. Поэтому я покажу несколько примеров использования этих свойств ниже.
|
||
|
||
**Пример:**
|
||
|
||
```css
|
||
p {
|
||
width: 150px;
|
||
background-color: red;
|
||
}
|
||
```
|
||
|
||
**Результат:** 
|
||
|
||
_Примечание. Содержимое не переполняется вправо, оно занимает только указанную ширину и затем разбивается на следующую строку._
|
||
|
||
**Пример:**
|
||
|
||
```css
|
||
p {
|
||
min-width: 50px;
|
||
}
|
||
```
|
||
|
||
Приведенный выше код просто не позволит элементу абзаца сжиматься горизонтально до менее 50 пикселей.
|
||
|
||
**Пример:**
|
||
|
||
```css
|
||
p {
|
||
max-width: 300px;
|
||
background-color: red;
|
||
}
|
||
```
|
||
|
||
Приведенный выше код не позволит ширине элемента больше 300 пикселей.
|
||
|
||
Я надеюсь, что эта статья поможет вам получить удобные размеры и ширину CSS. Я добавил некоторые ссылки ниже, если вы хотите больше узнать об этих свойствах.
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* Размеры и ширина CSS: https://www.w3schools.com/css/css\_dimension.asp
|
||
* Свойство высоты CSS: https://www.w3schools.com/cssref/pr _dim_ height.asp
|
||
* Свойство ширины CSS: https://css-tricks.com/almanac/properties/w/width/
|
||
* Длина CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/length |