Свойства width и height были введены в CSS 1 как часть модели CSS box. Свойства height и width в CSS позволяют нам устанавливать высоту и ширину для блока элемента. Другими словами, эти свойства используются для управления размером ширины или области содержимого.
В принципе, CSS отображает блок элемента в терминах двух типов ширины: ширина содержимого и ширина блока. Ширина содержимого представляет собой ширину области содержимого блока элемента.
Область содержимого — это область, в которой находится содержимое блока. Она вычисляется с помощью свойства width, предоставляемого CSS. Свойство width не включает в себя отступы, границы или поля. Когда вы устанавливаете свойство width для блока элемента, вы фактически устанавливаете ширину области содержимого по умолчанию в блоке.
С другой стороны, ширина блока представляет собой общую ширину всего блока элемента, которая включает ширину содержимого, левый и правый отступ, левую и правую границу, а также левое и правое поле. Ширина блока — это фактическое пространство, которое элемент HTML занимает в макете веб-страницы.
Общую ширину коробки можно рассчитать следующим образом:
Box Width = Content Width+Padding (left+right)+Border (left+right)+Margin (left+right)
Аналогично общую высоту коробки можно рассчитать следующим образом:
Box Height = Content Height+Padding (top+bottom)+Border (top+bottom)+Margin (top+bottom)Посмотрите на рисунок ниже, на котором мы отобразили диаграмму блочной модели CSS с областью содержимого и областью блока элемента.
Как вы можете понять из рисунка, ширина — это пространство, измеряемое от левого внутреннего края padding до правого внутреннего края padding. Аналогично, высота содержимого и высота блока определяются таким же образом.
Свойства width и height являются ненаследуемыми свойствами в CSS, что означает, что эти свойства не наследуются автоматически от родительского элемента к его дочерним элементам. Каждый элемент должен иметь собственную ширину и высоту, явно определенные, если вы хотите контролировать размеры области содержимого.
Возможные значения свойств ширины и высоты CSS
Мы можем использовать свойства width и height для установки размеров блока элемента. Свойства width и height в CSS могут принимать любое из следующих значений:
- px
- %
- em
- rem
- авто (значение ключевого слова)
Свойства ширины и высоты с пиксельными значениями
В CSS мы можем задать свойства ширины и высоты, используя значение пикселя. Пиксель (px) — это абсолютная единица измерения в CSS, которая представляет фиксированный размер. Он не меняется независимо от области просмотра или размера родительского элемента. Например, width: 100px означает, что элемент всегда будет иметь ширину 100 пикселей.
Пример 1:
div {
width: 200px;
height: 100px;
background-color: lightblue;
}Свойства ширины и высоты с процентными значениями
Аналогично, если мы используем процентные значения для свойств ширины и высоты в CSS, размер блока будет относительным к размерам содержащего его элемента (обычно его родительского элемента), а не напрямую к окну браузера. Содержащий элемент обычно является родительским элементом, в котором находится блок элемента. Давайте рассмотрим пример.
Пример 2:
<!DOCTYPE html>
<html>
<head>
<title>Percentage Values Example</title>
<style>
.container {
width: 400px;
height: 200px;
background-color: lightgrey;
padding: 20px;
}
.box {
width: 50%; /* 50% of the parent's width */ height: 50%; /* 50% of the parent's height */ background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
This is a parent container having the width and height of 400px and 200px, respectively.
<div class="box">This is a box inside the parent container having the width and height of 50% and 50% of the parent's width and height, respectively.</div>
</div>
</body>
</html>
Выход:
В этом примере ширина контейнера зафиксирована на уровне 400 пикселей, а высота контейнера зафиксирована на уровне 200 пикселей. Ширина блока установлена на уровне 50% ширины контейнера (50% от 400 пикселей = 200 пикселей). Высота блока установлена на уровне 50% высоты контейнера (50% от 200 пикселей = 100 пикселей).
Свойства ширины и высоты со значениями EM
В CSS em — это относительная единица, которая зависит от размера шрифта элемента, к которому она применяется. Когда вы устанавливаете единицу em для свойств ширины и высоты в поле CSS, размер будет зависеть от размера текста в нем. Однако, если вы явно не зададите размер шрифта, он унаследует размер шрифта от своего родительского элемента.
Давайте рассмотрим пример, в котором мы явно зададим размер шрифта блока элемента. А свойства ширины и высоты будут зависеть от размера текста внутри него.
Пример 3:
<!DOCTYPE html>
<html>
<head>
<title>Example of Width and Height Properties with em value.</title>
<style>
div {
/* Explicitly setting font-size for the div element. */ font-size: 30px;
width: 10em; /* 10 times the font-size of the text within div element. */ height: 5em; /* 5 times the font-size of the text within div element. */ background-color: lightcoral;
}
</style>
</head>
<body>
<div>This is a div element of width 10em and height 5em.</div>
</body>
</html>
В этом примере мы явно установили размер шрифта 30px для элемента div. Ширина элемента div составляет 10em, что равно 10 * 30px = 300px. Аналогично, высота элемента div составляет 5em, что равно 5 * 30px = 150px.
Давайте рассмотрим пример, в котором мы унаследуем размер шрифта родительского элемента для свойств ширины и высоты.
Пример 4:
<!DOCTYPE html>
<html>
<head>
<title>Example of Inheriting Font-size to Determine Width and Height</title>
<style>
.parent {
font-size: 15px; /* Parent element with a font-size of 20px */ background-color: lightgrey;
padding: 10px;
}
.child {
width: 20em; /* 20 times the font-size of the parent element. */ height: 10em; /* 10 times the font-size of the parent element. */ background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">This div element will use the font-size of its parent div element to determine its width and height if the font-size is not explicitly set for this div element.</div>
</div>
</body>
</html>
Выход:
В этом примере мы не установили размер шрифта для дочернего элемента div. Поэтому для определения его ширины и высоты будет использоваться размер шрифта родительского элемента div. Элемент .parent установил размер шрифта 16px. Ширина элемента .child div составляет 20em, что равно 20 * 15px = 300px. Аналогично, высота элемента .child div составляет 10em, что равно 10 * 15px = 150px.
Свойства ширины и высоты со значениями REM
В CSS rem — это относительная единица, которая зависит от размера шрифта корневого элемента (обычно элемента <html>). Это делает единицы rem более предсказуемыми и простыми в управлении между различными элементами.
Пример 5:
<!DOCTYPE html>
<html>
<head>
<title>Example of Width and Height Properties with REM Values</title>
<style>
html {
font-size: 16px; /* Setting the font-size for the root element. */}
div {
width: 20rem; /* 20 times the font-size of the root element */ height: 10rem; /* 10 times the font-size of the root element */ background-color: lightblue;
}
</style>
</head>
<body>
<div>This div element has a width of 20 times the font-size of the root element and a height of 10 times the font-size of the root element.</div>
</body>
</html>
Автоматические значения ширины и высоты
Значение auto позволяет элементу автоматически регулировать высоту или ширину в зависимости от его содержимого. По умолчанию свойства width и height устанавливаются на значение auto, что означает, что если вы не указываете ширину или высоту, значением будет ключевое слово auto. Значение auto позволяет браузеру вычислять размер на основе содержимого элемента. Например:
div {
height: auto; /* Automatically calculated width */ width: auto;
background-color: lightblue;
padding: 20px;
}
Пример 6:
<!DOCTYPE html>
<html>
<head>
<title>Auto Value for Width and Height Example</title>
<style>
div {
width: auto;
height: auto;
background-color:lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>This div element has an auto value for its width and height properties.</div>
</body>
</html>Выход:
В этом примере мы установили ширину и высоту с помощью значения auto. Таким образом, элемент div будет корректировать свою высоту и ширину в зависимости от содержимого внутри него.
Давайте рассмотрим пример, в котором мы установим все возможные значения для свойств ширины и высоты в CSS. Этот пример демонстрирует использование значений пикселей, процентов, em, rem, auto и calc.
Пример 7:
<!DOCTYPE html>
<html>
<head>
<title>All Possible Values for CSS Width and Height Properties</title>
<style>
.container {
width: 80%; /* The container takes 80% of the width of its parent element. */ margin: 0 auto; /* Centers the container horizontally. */ background-color: #f0f0f0; /* Sets a light gray background color. */ padding: 20px; /* Adds padding inside the container. */}
.box-px {
width: 200px; /* Sets the width to 200 pixels. */ height: 100px; /* Sets the height to 100 pixels. */ background-color: lightblue;
margin-bottom: 10px;
}
.box-percent {
width: 50%; /* Sets the width to 50% of its parent container's width. */ height: 50%; /* Sets the height to 50% of its parent container's height. */ background-color: lightgreen;
margin-bottom: 10px;
}
.box-em {
font-size: 16px; /* Sets the font size for calculations. */ width: 20em; /* Sets the width to 20 times the font-size (20 * 16px = 320px). */ height: 10em; /* Sets the height to 10 times the font-size (10 * 16px = 160px). */ background-color: lightcoral;
margin-bottom: 10px;
}
.box-rem {
/* Sets the width to 20 times the root font-size (assuming root font-size is 16px, 20 * 16px = 320px). */ width: 20rem;
/* Sets the height to 10 times the root font-size (10 * 16px = 160px). */ height: 10rem;
background-color: lightyellow;
margin-bottom: 20px;
}
.box-auto {
width: auto;
height: auto;
background-color: lightpink;
margin-bottom: 20px;
}
.box-calc {
/* The width is 100% of the parent container's width minus 50 pixels. */ width: calc(100% - 50px);
/* The height is 100% of the viewport height minus 100 pixels. */
height: calc(100vh - 100px);
background-color: lightgray;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-px">Width: 200px, Height: 100px</div>
<div class="box-percent">Width: 50%, Height: 50%</div>
<div class="box-em">Width: 20em, Height: 10em</div>
<div class="box-rem">Width: 20rem, Height: 10rem</div>
<div class="box-auto">Width: auto, Height: auto</div>
<div class="box-calc">Width: calc(100% - 50px), Height: calc(100vh - 100px)</div>
</div>
</body>
</html>
В этом уроке мы объяснили, как использовать свойства высоты и ширины в CSS с различными возможными значениями. Эти свойства определяют размер или измерение блока элемента на веб-странице. Спасибо за прочтение этого урока.
