Breite Eigenschaft in CSS erklärt

Die Breite Eigenschaft passt die Breite eines Elements an, indem es sich in horizontaler Richtung (innerhalb der Polsterung) erstreckt, indem sie sich in horizontaler Richtung erstreckt (innerhalb der Polsterung). Die Breite Eigenschaft ist mit Polsterung, Grenze und Rand verbunden, wirkt sich jedoch weder aus und wird von diesen nicht verändert. Die Blockelemente erhalten die Breite gemäß der Seitenbreite. Mit der Breite Eigenschaft können Sie jedoch die Breite gemäß den Anforderungen anpassen.

Dieser beschreibende Leitfaden bietet die Arbeit und Verwendung von Breiteneigenschaften in CSS. Die Arbeit der Breite des Eigentums wird von der verwendeten Syntax geleitet, und mehrere Beispiele werden zitiert, um die Verwendung der Breite Eigenschaft zu veranschaulichen.

Wie Breite Eigenschaft in CSS funktioniert

Die Breite eines Elements kann mit der unten geschriebenen Syntax eingestellt werden.

Selector Breite: Wert;

Der Selektor kann jedes Element sein oder sich auf die CSS -Klasse im Styling -Blatt beziehen. Der Wert der Breite kann in verschiedenen unten angegebenen Messeinheiten festgelegt werden:

• Länge: Der Wert ist in PX, EM definiert. Der Wert von EM variiert je nach der Standardgröße für das übergeordnete Element. Wenn beispielsweise die Standardgröße auf 15px festgelegt wird, würde sie als 1EM gezählt und die Standardeinstellung auf 15px beibehalten, der Größenwert 2EM entspricht 30px.
• Auto: Browser passen den Wert automatisch an
• Prozentsatz ( %): Der Wert (in %) assoziiert die Breite des übergeordneten Elements. Beispielsweise würde der Wert von 50% die Breite auf 50% anpassen (des übergeordneten Elements oder in dem das Zielelement enthalten ist).
• Erbe: Der Wert der Breite des übergeordneten Elements wird abgerufen
• Initial: Der Standardwert der Breite wird verwendet

Die Arbeit der Breite in CSS hängt hauptsächlich von der verwendeten Messeinheit ab.

So verwenden Sie die Breite Eigenschaft in CSS

Dieser Abschnitt enthält mehrere Beispiele, die die Funktionalität der Breite in CSS demonstrieren.

Beispiel 1: Verwenden der Breite Eigenschaft mit Länge/Prozentsatz

In diesem Beispiel wird die Verwendung der Breite von Eigenschaften mit verschiedenen Längen- und Prozentsatzmaßen erläutert. Der nachstehende Code bezieht sich auf dieses Beispiel:

Einstellen der Breite

Breite in PX

Breite in em

Breite in %

Die Beschreibung des Codes ist unten bereitgestellt:

• Drei CSS -Klassen werden mit dem Namen "PX", "EM" und "PER" erstellt
• Die „PX“, „EM“ und „PER“ verwendet PX, EM und % für die Breitenmessung
• Diese drei Klassen werden in drei Absätzen verwendet, um ihre Verwendung zu demonstrieren

Das Bild des Code ist unten bereitgestellt

Ausgang:

Beispiel 2: Verwenden Sie Breite mit anfänglichen, Erben und Autowerten

Die anfänglichen, Erben- und Autowerte werden in diesem Beispiel verwendet, um die Breite des Elements zu verändern. Dazu wird der folgende Code ausgeübt:

Einstellen der Breite mit automatischen/initialen/Erbenwerten einstellen

Anfangsbreite

Erbbreite

Autobreite

Der Code wird als beschrieben als

• Drei CSS -Klassen werden als "initial", "erben" und "automatisch" bezeichnet
• Diese Klassen werden in drei Absätzen verwendet, die die Werte "initial", "erben" und "automatisch" der Breite darstellen
• Ein DIV wird mit einer Breite von 50% und der Hintergrundfarbe gestaltet, die als Elternteil für einen Absatz verwendet wird (der mit der Erb-CSS-Klasse verwendet wird)

Das Bild des Code ist unten angezeigt

Ausgang:

Aus der Ausgabe wird beobachtet, dass die Breite des zweiten Absatzes aus der Div (deren Breite 50% beträgt) geerbt wird und der Absatz somit auf die 50% seines Elternteils (DIV) beschränkt wäre.

Beispiel 3: Verwenden Sie die Breite mit maximaler Breite und Minute

Die maximale Breite und die Minute definieren die obere und untere Breite der Breite jeweils. Wenn die Breite Eigenschaft mit Min-Width/Max-Breite verwendet wird, besteht die Chancen, dass das Ergebnis möglicherweise nicht mit Ihrer Anforderung übereinstimmt. Der Wert der Breite kann unter einer der folgenden Bedingungen beeinträchtigt werden:

• Wenn Breite < max-width then value of max-width will be used and
• Wenn Breite < min-width then the width would be set according to the min-width value

Üben wir es mit dem unten geschriebenen Code, der unten geschrieben wurde.

Verwenden von Breite mit Minwidth und Max-Breite

Breite mit Minwidth

Breite mit maximaler Breite

Die Beschreibung des Codes ist unten bereitgestellt

• Zwei CSS-Klasse werden als „Min“ und „Max“ erstellt, die Breite mit Minbreite und Breite mit maximaler Breite verwenden
• Die Werte der Breite in „max “- und„ max “-Kassen betragen 25% bzw. 75%, während die Min-Breite 75% und maximal 50% beträgt
• Diese CSS -Klassen werden in zwei Absätzen verwendet

Das Bild des Code-Editors ist unten dargestellt:

Ausgang:

Aus der obigen Ausgabe wird die Breite von der Min-Breite und der maximalen Breite beeinflusst. Daher wird vermutet, dass die Breite separat verwendet werden muss, da die Eigenschaft zu seltsamer Ausgabe führen kann.

Abschluss

Die Breite Eigenschaft in CSS wird verwendet, um die Breite (horizontale Länge) des Elements anzupassen. Es stellt die Verbindung mit der Polsterung, der Grenze und den Rändern eines Elements her. Weder weder die Breite noch die Polsterung/Rand/Rand wirkt sich gegenseitig aus. Dieser Artikel bietet die Arbeit und Verwendung von Breiteneigenschaften in CSS. Die Breiteneigenschaft kann durch die MAX-Höhe und die Mindesthöhe von CSS beeinflusst werden. Es wird also empfohlen, die Breite zu verwenden, indem Sie die maximale Breite und die Minenbreite beibehalten. Darüber hinaus haben wir Beispiele gezeigt, die Breite und Max/Minwidth-Eigenschaft in CSS verwenden.