Box Modell
Breite
Höhe
Polsterung
Rand
Rand
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
Border - Attribut:
Randbreite border-width
Grenzfarbe border-color
Grenze Stil border-style
Randbreite: dünn | mittel | dick | Längenwert Randfarbe
: Farbe | transparent
Set Randstil, Randfarbe, Randbreite, um den gleichen Stil in den vier Richtungen des Randes zu haben .
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
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.
.one{
width:300px;height:308px;background-color: #acacac;padding : 20px 10px 10px;}
.content{
width:100%;height:100%;background-color:#ececec;}
Ränder
ä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
Standardfelds für den Randkollaps :
Neben dem Standard gibt es auch IE-Felder
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
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
<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
um zusammenzufassen
NÄCHSTER:
float float!
Ein Wort des Tages:
vorherrschend / modisch ersetzen beliebt