So legen Sie die minimale und maximale Breite von CSS fest

Heute zeige ich Ihnen, wie Sie die Stile min-width und max-width von CSS festlegen. Viele Freunde fragen sich, was die minimale Breite, die maximale Breite und die maximale Breite sind. Wo wird die Mindestbreite und Maximalbreite verwendet? Wie bewerbe ich mich? Deshalb werden wir es Ihnen heute einzeln erklären.

HTML-IMG-Bild in die Webseite im DIV+CSS-Layout einfügen

Als Nächstes wird DIVCSS5 es jedem ermöglichen, die grundlegende Syntaxstruktur von Min-Breite und Max-Breite zu beherrschen und die Verwendung zu erlernen Fälle.

min-width max-width-Verzeichnis

CSS-GrundsyntaxStruktur

min-width und max-width werden beide von spezifischen Zahlen + HTML gefolgt Einheiten

min-width:50px Die minimale Breite beträgt 50px

max-width:50px Die maximale Breite beträgt 50px

CSS-Stilstruktur

p{ min-width:50px>

p{max-width:50px🎜>

1 max-height

3. CSS-Breite

4. CSS-HöhePraktische Anwendungshinweise

Mindestbreite (Mindestbreite) und Maximum width (max -width) wird verwendet, um die minimalen und maximalen Breitenbeschränkungen des Bildes festzulegen. Wenn beispielsweise ein Bild als Hauptliste verwendet wird und die Größe des Bildes im Objekt variabel ist, können wir den CSS-Stil mit minimaler Breite verwenden, um zu vermeiden, dass es zu klein und inkonsistent wird. Ein weiteres Beispiel: Wenn Artikel und Bilder in einer Box gemischt sind, kann die Breite des Bildes manchmal nicht bestimmt werden. Wenn die Breite des HTML-IMG-Bildes zu diesem Zeitpunkt die Breite der P-Box überschreitet, kann es passieren, dass das Bild platzt p-Box und sorgen für Verwirrung.

Erweiterte Lektüre:

1. CSS zum Festlegen der Höhe und Breite des Bildes

2. CSS löst das Problem, dass übergroße Bilder die DIV-Webseite beschädigen

3. CSS-Bild

4. HTML

img-Tag

Mindestbreite und Höchstbreite-Nutzungsfälle

Wir haben 2 Seiten eingerichtet Felder und legen Sie die maximale bzw. minimale Breite fest und stellen Sie den CSS-Rahmen auf 1 Pixel, die CSS-Farbe auf das rote Feld mit durchgezogener Linie und die CSS-Höhe auf 100 Pixel ein. Die CSS-Namen des ersten und zweiten Felds lauten „css-min-width“ bzw. „css-max-width“. Die ursprüngliche Bildgröße des Bildes im ersten Feld beträgt 165 Pixel in der Breite und 60 Pixel in der Höhe Das zweite Feld hat eine Breite von 375 Pixel und eine Höhe von 65 Pixel. Fall-CSS-Code

CSS+DIV-Fall-HTML-Quellcodefragment

Die Breite beträgt 375 Pixel und die Höhe beträgt 65 Pixel

.css-min-width,.css-max-width{ height:100px; border:1px solid #F00} 
.css-min-width img{ min-width:200px} 
.css-max-width{margin-top:10px} 
/* css注释：margin-top设置css-max-width对象上间距为10px */ 
.css-max-width img{ max-width:200px; }

Der Fall ist wie folgt:

<p>原图片大小：<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br /> 
宽为165px 高度60px<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br />

Das ist alles für die Festlegung der Mindest- und Höchstbreite von CSS. Freunde, die es benötigen, können es speichern Bitte achten Sie weiterhin auf diese Website.

<p class="css-min-width"> 
    <img src="http://www.PHP.com/img201301/PHP-logo-2013.gif" /> 
</p> 
<p class="css-max-width"> 
    <img src="http://www.PHP.com/img201301/topad1.gif" />

Empfohlene Lektüre:

Welche Rolle spielt die CSS-Marge?

So erstellen Sie abgerundete Ecken in CSS3

So legen Sie den Tabellenrahmenstil in CSS fest

Das obige ist der detaillierte Inhalt vonSo legen Sie die minimale und maximale Breite von CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!