9. Was kann in der Front-End-CSS-Box installiert werden?

Box Modell
Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein
Breite
Höhe
Polsterung
Rand
Rand
Fügen Sie hier eine Bildbeschreibung ein
Breite :
Breite: Länge Wert | Prozentsatz | Auto
maximale Breite;
Max-Breite: Länge Wert | Prozentsatz | Auto
Minimale Breite:
Min-Breite: Länge Wert | Prozentsatz | Auto

Beschreibung: Legen Sie die Inhaltsbreite von Elementen auf Blockebene und Ersatzelementen fest

ie6 unterstützt nicht die maximale und minimale Breite / Höhe

Die Blockbeschriftung nimmt eine ganze Linie ein, wobei Hintergrundfarbe, Breite und Höhe eingestellt werden können

Höhe:
Höhe: Längenwert | Prozentsatz | Auto
Maximale Höhe:
Max-Höhe: Längenwert | Prozentsatz | Auto
Minimale Höhe:
Min-Höhe: Längenwert | Prozentsatz | Auto

Beschreibung: Legen Sie die Inhaltshöhe von Elementen auf Blockebene und Ersatzelementen fest

Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein
Border - Attribut:
Randbreite border-width
Grenzfarbe border-color
Grenze Stil border-style

Randbreite: dünn | mittel | dick | Längenwert Randfarbe
: Farbe | transparent
Fügen Sie hier eine Bildbeschreibung ein
Set Randstil, Randfarbe, Randbreite, um den gleichen Stil in den vier Richtungen des Randes zu haben . Fügen Sie hier eine Bildbeschreibung ein
Abkürzung:
Rand: Breite Stilfarbe
Rand-links: Breite Stilfarbe

.one{
    
    border: 10px #e899ee solid;}
.two{
    
    
border-top:5px red solid;
border-Left:1epx blue dotted;
border-right:1epx blue dotted;
border-bottom :5px red solid;
}

Der Füllattributwert darf nicht negativ sein
Fügen Sie hier eine Bildbeschreibung ein
Der Platz, den das Feld auf der Webseite einnimmt, hängt nicht nur mit den Attributen width und height zusammen, sondern auch mit dem Auffüllen.

Fügen Sie hier eine Bildbeschreibung ein

.one{
    
    width:300px;height:308px;background-color: #acacac;padding : 20px 10px 10px;}
.content{
    
    width:100%;height:100%;background-color:#ececec;}

Ränder
Fügen Sie hier eine Bildbeschreibung ein
ähnlicher Rand wie Abkürzungen und Polsterung

Standardmäßig hat das entsprechende HTML-Element auf Blockebene Ränder, und der Hauptteil ist standardmäßig 8px
Überschreiben Sie normalerweise den Standardstil

body,h1,h2,h3,h4,h5,h6,p{
    
    margin:0;}

Der Randwert ist automatisch, wodurch der Anzeigeeffekt der Zentrierung in horizontaler Richtung realisiert wird
. Der Rand wird vom Browser berechnet

Berechnung der Breite und Höhe des
Fügen Sie hier eine Bildbeschreibung ein
Standardfelds für den Randkollaps :
Fügen Sie hier eine Bildbeschreibung ein
Neben dem Standard gibt es auch IE-Felder

Fügen Sie hier eine Bildbeschreibung ein
Welche Webseite soll ich wählen?
In der Tat, wenn es eine Doctype-Dokumenttypdeklaration gibt, verwenden Sie den Standard, andernfalls wählt der Browser die
Fügen Sie hier eine Bildbeschreibung ein
HTML-Elementklassifizierung: Element auf
Blockebene, belegt eine Zeile
p div h1 ~ h6 ul li ol dl dt dd usw.

Inline-Elemente (Inline-Elemente), eine Zeile zeigt die
Spannweite usw.
Inline-Elemente haben keine Attributeinstellungen für Breite und Höhe
Es gibt auch ein spezielles Bild, das ein Inline-Block-Inline-Blockelement ist, das als Inline dargestellt wird, aber die entsprechenden Eigenschaften des Blocks aufweist

Anzeige: Keine wird nicht angezeigt

Ist es möglich, die Blockebene als Inline-Element durch Setzen festzulegen? Die Antwort lautet Ja.

Kann mit dem Anzeigeattribut eingestellt werden
Fügen Sie hier eine Bildbeschreibung ein

<head>
.one{font-size:Opx;}
div{dispLay:inline;
font-size:16px;}
</head>
<div class="one">
	<div>display </div>
	<div>display </div>
	<div>display </div>
</div>

zumEs gibt Lücken zwischen Inline-ElementenZusätzlich zum Entfernen des Zeilenumbruchs zur Lösung des Problems kann dies auch durch Festlegen der entsprechenden CSS-Eigenschaft oben erreicht werden

Fügen Sie hier eine Bildbeschreibung ein

um zusammenzufassen

Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein

NÄCHSTER:
float float!
Ein Wort des Tages:
vorherrschend / modisch ersetzen beliebt

Fügen Sie hier eine Bildbeschreibung ein

Ich denke du magst

Origin blog.csdn.net/qq_44682019/article/details/108873091
Empfohlen
Rangfolge