Dieser Artikel vermittelt Ihnen relevantes Wissen über css, in dem hauptsächlich verwandte Themen zum Festlegen der Höhen- und Breitenattribute von Elementen vorgestellt werden. Die Höhen- und Breitenattribute werden nicht zum Festlegen der Höhen- und Breitenattribute verwendet Fügen Sie Abstände, Ränder oder Ränder hinzu. Schauen wir es uns gemeinsam an, ich hoffe, es wird für alle hilfreich sein. .
(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)
Höhe- und Breitenattribute werden verwendet, um die Höhe und Breite von Elementen festzulegen.
height- und width-Eigenschaften umfassen keine Polsterung, Rahmen oder Ränder. Es legt die Höhe oder Breite des Bereichs innerhalb des Abstands, des Rahmens und der Ränder des Elements fest.
CSS-Höhen- und Breitenwerte
Die Eigenschaften height und width können auf die folgenden Werte gesetzt werden: height 和 width 属性可设置如下值：
auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit
auto – Standard. Der Browser berechnet die Höhe und Breite.
length – Höhe/Breite in px, cm usw. definieren.
% – Definieren Sie Höhe/Breite als Prozentsatz des enthaltenden Blocks. initial – Höhe/Breite auf Standardwerte setzen.
inherit – Erbt Höhe/Breite vom übergeordneten Wert. Legen Sie die Höhe und Breite des
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的高度和宽度</h1>
<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>
<div></div>
</body>
</html>Ausgabeergebnis:
Denken Sie daran, dass die Höhen- und Breitenattribute keine Auffüllung enthalten. Rand oder Ränder! Sie legen die Höhe/Breite des Bereichs innerhalb der Polsterung, Ränder und Ränder des Elements fest!Maximale Breite festlegen
Wenn das Browserfenster kleiner als die Breite des Elements (500 Pixel) ist, tritt das vorherige
In diesem Fall kann die Verwendung von max-width die Handhabung kleiner Fenster durch den Browser verbessern. Tipp: Ziehen Sie Ihr Browserfenster auf eine Breite von weniger als 500 Pixeln, um den Unterschied zwischen den beiden Divs zu sehen! Hinweis: Der Wert des Attributs „max-width“ überschreibt die Breite.
Das Beispiel sieht wie folgt aus: 🎜<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h1>设置元素的最大宽度</h1>
<p>这个 div 元素的高度为 100 像素，最大宽度为 500 像素：</p>
<div></div>
<p>请调整浏览器窗口来查看效果。</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Eigenschaften Breite und Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
