Heim  >  Artikel  >  Web-Frontend  >  So legen Sie die Div-Größe mit CSS fest

So legen Sie die Div-Größe mit CSS fest

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-20 16:59:135240Durchsuche

In CSS können Sie das Attribut width und height verwenden, um die Div-Größe festzulegen. Sie müssen nur die Stile „width: value“ und „height: value“ für das div-Element festlegen. Das width-Attribut definiert die Breite des Inhaltsbereichs des Elements und das height-Attribut definiert die Höhe des Inhaltsbereichs des Elements.

So legen Sie die Div-Größe mit CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Erstellen Sie eine neue HTML-Datei und nennen Sie sie test.html. Verwenden Sie das div-Tag, um ein Modul zu erstellen und Textinhalte zum div hinzuzufügen.

Legen Sie in der test.html-Datei das Klassenattribut fest des div-Tags zu erliu, wird hauptsächlich verwendet, um den CSS-Stil des div über dieses CSS unten festzulegen.

Schreiben Sie in die Datei test.html das Tag und der CSS-Stil der Seite wird in dieses Tag geschrieben.

Schreiben Sie im CSS-Tag den Stil des Div und verwenden Sie das Hintergrundattribut, um die Hintergrundfarbe des Div auf Rot festzulegen.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
.erliu{
    background: red;
}
</style>
</head>
<body>
    <div class="erliu">
        测试
    </div>
</body>
</html>

Ansicht:

So legen Sie die Div-Größe mit CSS fest

Schreiben Sie im CSS-Tag den Stil des Div, verwenden Sie das Attribut width, um die Breite des Div auf 200 Pixel festzulegen, und verwenden Sie das Attribut height, um die Höhe des Div auf 100 Pixel festzulegen .

.erliu{
    /* width: 200px;
    height: 100px; */
    background: red;
}

Sehen Sie sich den Effekt an:

So legen Sie die Div-Größe mit CSS fest

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Div-Größe mit CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn