Heim  >  Artikel  >  Web-Frontend  >  So stellen Sie die CSS-Breite auf 100 vw ein

So stellen Sie die CSS-Breite auf 100 vw ein

青灯夜游
青灯夜游Original
2021-02-22 16:57:219004Durchsuche

In CSS können Sie den Stil „width:100vw;“ verwenden, um die Breite auf 100vw festzulegen, und das width-Attribut kann die Breite des Elements festlegen. vw ist eine Ansichtsfenstereinheit, die sich auf die Breite relativ zum Ansichtsfenster bezieht. 1 vw entspricht 1 % der Ansichtsfensterbreite. Beispielsweise beträgt die Breite des Browsers 1920 Pixel, also „1vw = 19,2 Pixel“.

So stellen Sie die CSS-Breite auf 100 vw ein

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

In CSS können Sie den Stil „width:100vw;“ verwenden, um die Breite auf 100 vw festzulegen.

css width attribute

width attribute legt die Breite des Elements fest; es definiert die Breite des Inhaltsbereichs des Elements, und Auffüllung, Rahmen und Ränder können außerhalb des Inhaltsbereichs hinzugefügt werden.

Hinweis: Nicht ersetzte Inline-Elemente ignorieren dieses Attribut.

Attributwert:

So stellen Sie die CSS-Breite auf 100 vw ein

[Empfohlenes Tutorial: CSS-Video-Tutorial ]

CSS-Ansichtsfenstereinheiten (Ansichtsfenstereinheiten)

Auf der PC-Seite bezieht sich das Ansichtsfenster auf die PC-Seite und bezieht sich auf It ist der sichtbare Bereich des Browsers;

Auf der mobilen Seite handelt es sich um 3 Ansichtsfenster: Layout-Ansichtsfenster (Layout-Ansichtsfenster), Visuelles Ansichtsfenster (visuelles Ansichtsfenster) und Ideales Ansichtsfenster (ideales Ansichtsfenster).

Das „Ansichtsfenster“ in der Ansichtsfenstereinheit bezieht sich auf den sichtbaren Bereich des Browsers auf der PC-Seite; auf der mobilen Seite bezieht es sich auf das Layout-Ansichtsfenster im Ansichtsfenster.

Gemäß der CSS3-Spezifikation umfassen die Ansichtsfenstereinheiten hauptsächlich die folgenden 4 Einheiten:

1.vw: Bezogen auf die Breite des Ansichtsfensters ist das Ansichtsfenster gleichmäßig in 100 vw-Einheiten unterteilt, und 1 vw entspricht 1 % der Breite des Ansichtsfensters.

2.vh: Relativ zur Breite des Ansichtsfensters ist das Ansichtsfenster in 100 vh-Einheiten unterteilt, und 1vh entspricht 1 % der Höhe des Ansichtsfensters.

3.vmin: Wählen Sie die kleinste zwischen vw und vh aus.

4.vmax: Wählen Sie den größten zwischen vw und vh aus. Die vollständigen Namen von

vw und vh

sind Viewport-Breite und Viewport-Höhe. Die Breite und Höhe des Fensters entsprechen 1 % der Bildschirmbreite und -höhe.

vh und vw: Höhe und Breite relativ zum Ansichtsfenster, nicht zum übergeordneten Element (CSS-Prozentsätze beziehen sich auf die Höhe und Breite des nächstgelegenen übergeordneten Elements, das es enthält). 1vh entspricht 1/100 der Höhe des Ansichtsfensters und 1vw entspricht 1/100 der Breite des Ansichtsfensters.

Zum Beispiel: Die Browserhöhe beträgt 950 Pixel, die Breite beträgt 1920 Pixel, 1 vh = 950 px/100 = 9,5 px, 1vw = 1920 px/100 = 19,2 px.

Der Unterschied zwischen vh/vw und %

So stellen Sie die CSS-Breite auf 100 vw ein

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonSo stellen Sie die CSS-Breite auf 100 vw ein. 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