Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Breite der Spanne in CSS fest
So legen Sie die Breite der Spanne in CSS fest
- 青灯夜游Original
- 2021-05-13 17:16:189888Durchsuche
So legen Sie die Span-Breite in CSS fest: Verwenden Sie zuerst den Stil „display:block;“ oder „display:inline-block;“, um das Span-Element auf ein Blockelement oder Inline-Blockelement festzulegen value; „Style legt die Breite der Spanne fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In HTML ist span ein Inline-Element mit den folgenden Eigenschaften:
1 Es befindet sich in derselben Zeile wie andere Elemente
2 . Die Breite entspricht der Breite des Textes oder Bildes und kann nicht geändert werden.
Es ist ersichtlich, dass die Spannweitenbreite und -höhe im Allgemeinen unveränderlich sind. Aber manchmal müssen wir die Spannweite festlegen. Was sollen wir tun?
Problemumgehung: Verwenden Sie das Anzeigeattribut, um das Span-Element auf ein Blockelement oder ein Inline-Blockelement festzulegen. Verwenden Sie dann das Breitenattribut, um die Breite festzulegen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.inline{
width: 150px;
background-color: palevioletred;
}
.block{
display: block;
width: 150px;
background-color: palevioletred;
}
.inline-block{
display: inline-block;
width: 150px;
background-color: palevioletred;
}
</style>
</head>
<body>
<div>测试文本，<span class="inline">测试文本</span>，<span class="block">测试文本</span>，<span class="inline-block">测试文本</span></div>
</body>
</html>Rendering:
1. Blockelemente
in HTML
,
,
, < ;Formular> , und - Inline-Elemente können als Blockelemente angezeigt werden, indem
display:block; festgelegt wird. Syntax: display:block;显示为块状元素。
语法：
span{display:block;}块级元素的特点：
1、每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行）；
2、元素的高度、宽度、行高以及顶和底边距都可设置；
3、元素宽度在不设置的情况下，占它本身父容器的100%（和父元素宽度一致）；
2、内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block
span{display:inline-block;}Eigenschaften von Elementen auf Blockebene: 1. Jedes Blockelement beginnt in einer neuen Zeile und nachfolgende Elemente beginnen ebenfalls in einer neuen Zeile ( Ausschließlich in einer Zeile 2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden 3 übergeordneter Container (und die Breite des übergeordneten Elements ist gleich);
2. Inline-Blockelement (Inline-Block) hat die Eigenschaften von Inline-Elementen und Blockelementen display:inline-block dient dazu, das Element als Inline-Blockelement festzulegen. Syntax:
rrreee🎜Merkmale von Inline-Blockelementen: 🎜🎜1. Es befindet sich in derselben Zeile wie andere Elemente; 🎜🎜2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden . 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜
display:block; festgelegt wird. Syntax: display:block;显示为块状元素。
语法：
span{display:block;}块级元素的特点：
1、每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行）；
2、元素的高度、宽度、行高以及顶和底边距都可设置；
3、元素宽度在不设置的情况下，占它本身父容器的100%（和父元素宽度一致）；
2、内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block
span{display:inline-block;}Eigenschaften von Elementen auf Blockebene: 1. Jedes Blockelement beginnt in einer neuen Zeile und nachfolgende Elemente beginnen ebenfalls in einer neuen Zeile ( Ausschließlich in einer Zeile 2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden 3 übergeordneter Container (und die Breite des übergeordneten Elements ist gleich);
2. Inline-Blockelement (Inline-Block) hat die Eigenschaften von Inline-Elementen und Blockelementen display:inline-block dient dazu, das Element als Inline-Blockelement festzulegen. Syntax:
rrreee🎜Merkmale von Inline-Blockelementen: 🎜🎜1. Es befindet sich in derselben Zeile wie andere Elemente; 🎜🎜2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden . 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜Das obige ist der detaillierte Inhalt vonSo legen Sie die Breite der Spanne in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!