Zusammenfassung der Verwendung des width-Attributs width in CSS

CSS-Breite bezieht sich auf das Festlegen der entsprechenden Div-Breite über CSS-Stile. Das CSS-Breitenattribut ist die Breite des Wortes. Die Breite kann als Prozentsatz berechnet und die Breite als Pixelwert festgelegt werden in relativen Längeneinheiten usw. Dieses Attribut wird von allen gängigen Browsern unterstützt. Im Folgenden wird die Verwendung des Breitenattributs zusammengefasst.

Verwendung des Breitenattributs

1. Der Unterschied zwischen der Analyse von width:100%; und width:auto;

Wenn die Breite von p 100 % beträgt, bedeutet dies, dass die Breite von p 980 Pixel beträgt und p wird die volle Fläche sein, und dann hat es eine Polsterung, sodass es p überschreiten wird. Und wenn width: auto, ist die Gesamtbreite (einschließlich Breite, Rand, Innenabstand, Rand) gleich der Breite des übergeordneten Elements (Breite, ohne Rand, Innenabstand und Rand des übergeordneten Elements). Wenn also der Innenabstand 10 Pixel Platz belegt hat, dann Der durch die Breite angegebene Wert beträgt 960 Pixel. Aber egal, ob width: 100 % oder auto, die Berechnungsreferenz ist der Breitenwert des übergeordneten Inhaltsbereichs, nicht der Gesamtbreitenwert

2. CSS passt die Größe des Bildes an muss die Breite und Höhe kennen

So passen Sie die Größe eines Bildes mithilfe der beiden Attribute Breite und Höhe an. Diese beiden Attribute werden verwendet, um die Breite bzw. Höhe des Elements festzulegen. In der Anfangsphase von CSS verwendet alles Pixel als Einheiten.

3.

CSS-Breite Breite

Die Breite dient dazu, die Breite des Beschriftungsobjekts direkt festzulegen und auf das „Gleichheitszeichen“ gefolgt von der spezifischen Zahl zu achten Breitenwert (oder Prozentsatz), die spezifische Breite. Dem Wert muss nicht die Längeneinheit folgen. Die Standardeinheit ist Pixel (px). Beim Festlegen der Breite im TABLE-Tabellen-Tag oder Bild-IMG-Tag ist dies nicht der Fall Folgen Sie der HTML-Einheit. Die Standardeinheit ist Pixel.

4.

CSS2.1SPEC: Detaillierte Erläuterung des Breitenattributs des visuellen Formatierungsmodells (Teil 1)

Das Breitenattribut hat verschiedene Möglichkeiten, Werte zu übernehmen, Hier sind einige Typ:

(1) Breitenwert: Das heißt, der CSS-Längenwert wird verwendet, um die Breite einer Box eindeutig anzugeben. Die Werteinheit kann die in CSS unterstützte Längeneinheit sein, z px, em usw.

(2) Prozentsatz: Der Prozentsatz wird basierend auf der Breite des enthaltenden Blocks berechnet. Wenn jedoch die Breite des enthaltenden Blocks anhand des enthaltenen Inhalts bestimmt werden muss, ist das endgültige Layout undefiniert, d. h. der Standard legt nicht klar fest, wie der Breitenwert berechnet wird. Wenn die Box außerdem absolut positioniert ist, wird ihre prozentuale Länge basierend auf der Breite der Füllkante des enthaltenden Blocks berechnet.

(3)auto: Berechnet gemäß der im CSS-Standard angegebenen Breitenberechnungsmethode. Der spezifische Algorithmus wird im Folgenden detailliert vorgestellt

(4)inherit: Tatsächlich das Breitenattribut ist nicht vererbbar, es ist seltsam, warum es eine Vererbungsoption gibt. In tatsächlichen Situationen wird das Breitenattribut im Allgemeinen selten als Vererbungswert verwendet

5.CSS2.1SPEC: Detaillierte Erklärung der Breite Attribut des visuellen Formatierungsmodells (Teil 2)

Der Berechnungsprozess des „Shrink-to-Fit“-Algorithmus:

[1] Berechnen Sie die bevorzugte Breite: Sofern der Inhalt nicht enthalten ist hat einen expliziten Zeilenumbruch (z. B.
-Tag), andernfalls die Breite, die erforderlich ist, um den darin enthaltenen Inhalt ohne Umbruch aufzunehmen.

[2] Berechnen Sie die bevorzugte Mindestbreite: wenn Zeilenumbrüche möglich sind (Englisch trifft auf Leerzeichen oder Satzzeichen, Elemente auf Blockebene erscheinen und natürlich, wenn
-Tags erscheinen) Die Breite erforderlich, um den enthaltenen Inhalt aufzunehmen, ohne Verpackung.

[3] Berechnen Sie die verfügbare Breite: Verwenden Sie die Formel in Abschnitt 2.2.3:

verfügbare Breite = Breite des enthaltenden Blocks - 'margin-left' - 'border-left- width ' - 'padding-left' - 'padding-right' - 'border-right-width' - 'margin-right', dazu gehört auch die Breite aller Scrollvorgänge.

Die endgültige Breite ist: min(bevorzugte Breite, max(bevorzugte Mindestbreite, verfügbare Breite)). Die endgültige Formel lässt sich wie folgt zusammenfassen: Die endgültige Breite basiert auf der verfügbaren Breite, wobei sichergestellt wird, dass sie nicht größer als die bevorzugte Breite und nicht kleiner als die bevorzugte Mindestbreite sein kann

Relevante Verwendung des Breitenattributs: Fragen und Antworten1. Die Liste kann nicht zentriert werden, nachdem die Breite auf 100 % eingestellt wurde.

2 🎜>So fügen Sie Bilder zu Artikeln im PHP-Editor hinzu. Verwenden Sie reguläre Regeln, um width: 100%; height: auto

zu ändern

3. Warum sehe ich viele Leute, die adaptive Webseiten-Außencontainer schreiben, die keine Breite festlegen, sondern nur so etwas wie Abschnitt {display: block } haben?

[Verwandte Empfehlungen]

1. PHP chinesischer Website-Eintrag: Breite

2. Kostenloses PHP-Video-Tutorial für die chinesische Website: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des width-Attributs width in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!