Umfassende Liste von CSS-Layout-Eigenschaften: Anzeige, Position und Float-CSS-Tutorial-php.cn

CSS 布局属性大全：display，position 和 float

CSS-Layoutattribute: Anzeige, Position und Float

CSS ist eine Auszeichnungssprache, die zur Steuerung des Stils von Webseiten verwendet wird. Layouteigenschaften sind beim Entwerfen des Webseitenlayouts sehr wichtig. CSS bietet eine Vielzahl von Layouteigenschaften, die am häufigsten verwendeten sind Anzeige, Position und Float. In diesem Artikel stellen wir diese drei Layouteigenschaften im Detail vor und stellen spezifische Codebeispiele bereit.

Anzeigeattribut
Das Anzeigeattribut wird verwendet, um den Anzeigetyp des Elements anzugeben. Übliche Anzeigeattributwerte sind wie folgt:

1.1. Das Blockelement belegt eine exklusive Zeile, beginnt immer mit der Anzeige in einer neuen Zeile und füllt die Breite des übergeordneten Elements aus. Beispielsweise ist das

-Element ein typisches Blockelement.

div { display: block; }

Nach dem Login kopieren

1.2. Inline-Elemente belegen keine Zeile für sich, sondern nur den Platz, den sie benötigen. Beispielsweise ist das -Element ein typisches Inline-Element.

span { display: inline; }

Nach dem Login kopieren

1.3. Inline-Block-Elemente belegen keine Zeile, aber die Breite und Höhe können festgelegt werden. Beispielsweise ist das-Element ein typisches Inline-Block-Element.

img { display: inline-block; }

Nach dem Login kopieren

1.4. keine
keine Elemente werden nicht angezeigt und aus dem Dokumentenfluss entfernt. Sie können beispielsweise ein Element ausblenden, indem Sie display: none festlegen.

.hidden { display: none; }

Nach dem Login kopieren

Positionsattribut

Das Positionsattribut wird verwendet, um anzugeben, wie ein Element positioniert wird. Übliche Positionsattributwerte lauten wie folgt:

2.1 statisch

div { position: static; }

Nach dem Login kopieren

2.2. relative
relative Position relativ zur eigenen Ausgangsposition. Die Position eines Elements kann mithilfe der Eigenschaften oben, unten, links und rechts angepasst werden.

div { position: relative; top: 10px; left: 20px; }

Nach dem Login kopieren

2.3. absolute
absolute Position relativ zum übergeordneten Element oder Position relativ zum nächsten Vorgängerelement mit Positionierungsattributen (Position ist nicht statisch).

div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Nach dem Login kopieren

2.4. behoben
behoben ist relativ zum Browserfenster positioniert und ändert seine Position nicht, wenn die Bildlaufleiste scrollt.

div { position: fixed; top: 0; right: 0; }

Nach dem Login kopieren

float-Attribut

float-Attribut wird verwendet, um anzugeben, wie ein Element schwimmt. Wenn ein Element auf „Float“ eingestellt ist, wird es aus dem normalen Dokumentfluss entfernt und so weit wie möglich nach links oder rechts verschoben. Andere Elemente werden um das schwebende Element herum angeordnet.

```
img { float: left; }
```
Nach dem Login kopieren
Das Obige ist die Einführung und die Codebeispiele der drei gängigen Layouteigenschaften Anzeige, Position und Float. In der Praxis können wir basierend auf den spezifischen Anforderungen auswählen, welches Layoutattribut verwendet werden soll, um ein Webseiten-Layoutdesign zu erreichen. Ich hoffe, dass dieser Artikel den Lesern beim CSS-Layout helfen kann.
Das obige ist der detaillierte Inhalt vonUmfassende Liste von CSS-Layout-Eigenschaften: Anzeige, Position und Float. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!