Box und Border Eigenschaften von Cascading Style Sheets (CSS)

Mit den Box-Eigenschaften können Sie Stil Objekte überall in einem Browser-Fenster zu positionieren, Position zu den anderen Objekten auf der Seite relativ Objekte wird, und die Polsterung und Marge Box-Stil Regeln selektiv zu einem oder allen vier Seiten des gestylt Objekt, wie links und unten oder oben, links und rechts.

Wenn weniger als allen vier Seiten Styling, sollten Sie hinzufügen 0 Werte zu den Seiten, die keine Werte enthalten sollte, anstatt sie leer zu lassen.

Breite/Höhe: Verwenden Sie die Breite und Höhe Attribute, die Abmessungen eines Objekts oder Behälter, beispielsweise einem Tisch, Tabellenzelle oder Schicht einzustellen. Legen Sie die Attribute Auto die Größe des Objekts zu zwingen, um den Inhalt des Objekts zu entsprechen, oder geben Sie einen beliebigen Wert, positiv oder negativ, in px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (Prozentsatz).

#rings {height: Auto Breite: 475px; }

schweben: Diese Art Verwenden Sie die Seite zu steuern (links, Recht, oder keiner), Auf dem andere Objekte rund um den Stil Objekt schweben.

.saleitems {float: right; }

klar: Häufig in Verbindung mit der verwendeten schweben Eigenschaft, diese Art Attribut steuert, ob andere Objekte neben dem Stil Objekt erscheinen kann. Variablen für dieses Attribut enthalten links, Recht, beide, und keiner. Wenn beispielsweise eine Schicht wird auf der Seite eines Objekts mit dem klar Seite angegeben ist, wird das Objekt in den Bereich unterhalb der Schicht gestoßen.

.Nachrichten {clear: both-}

Polsterung: Diese Eigenschaft ist wie der Rand, nur mit Polsterung Sie zusätzlichen Platz zwischen dem Stil Objekt und jeder Rahmen um es anzuwenden, wie mit einem Satz oder ein Wort in einer Tabellenzelle. Stellen Sie die Polsterung Größe auf der linken Seite, rechts, oben und / oder unten Seiten einen beliebigen Wert verwenden, positiv oder negativ, in px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (Prozentsatz).

Wenn einheitliche Größen werden an allen vier Seiten des gestylt Objekt angewendet, nur einen Wert, wie in padding: 10px;, muss in der Erklärung aufgeführt werden. Andernfalls geben Sie Werte für alle vier Seiten:

.sidebarimage {padding: 10px 0px 10px 0px; }

Marge: Verwenden Sie die Marge Eigenschaft hinzufügen oder zusätzlichen Raum zwischen dem Seitenrand subtrahieren (oder übergeordneten Container) und das Objekt wird gestylt, wie die Fläche ein Wort oder eine Schicht umgibt. Stellen Sie die Randgröße auf der linken Seite, rechts, oben und / oder unten Seiten einen beliebigen Wert verwenden, positiv oder negativ, in px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (Prozentsatz).

Sie können auch die Tasten Auto Wert auf beiden Seiten eines gestylt Objekt, das Objekt innerhalb der übergeordneten Container zu zentrieren. Wenn einheitliche Werte auf allen vier Seiten angelegt werden, muss nur ein Wert in der Erklärung aufgeführt werden. Andernfalls geben Sie Werte für alle vier Seiten:

#contact {margin: 0px auto 0px} auto-

Border Eigenschaften definieren die Farbe, Stil und Breite der Ränder um jeden Stil Objekt. Da grenzt an allen vier Seiten eines Objekts gehen kann, kann jede Seite haben ganz andere Grenze Attribute! Die besten Ergebnisse erzielen, als mit Margen und Polsterung, müssen Sie eine hinzufügen 0 oder keiner auf jeder Seite Eigenschaft ist nicht gestylt:

.Tablecell {border-top: 0px none; border-right: 2px gepunkteten # 069-border-bottom: 1px solid # 09C-border-left: 2px gepunkteten # 069-}

Stil: Sie können die Grenzen in einem der folgenden Formate angeben: solide, punktierte, gestrichelte, doppelt, Rille, Grat, Einsatz, Anfang, oder keiner. Style muss mit der Farbe und Breite in Verbindung angegeben werden.

.Tablecell {border: 2px gestrichelte # 330066-}

Breite: Sie können für die Dicke der Grenzoptionen zu dünn, Mittel, oder dick. Oder, für genauere Messungen, die Verwendung als einen beliebigen Wert in px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (In Prozent. Legen Sie die Breite zusammen mit der Farbe und Rahmenstil.

.Tablecell {border: 1px gepunkteten # 660033-}

Farbe: Um das border-Attribut, geben Sie den hexadezimalen Wert der gewünschten Farbe und sicher sein, die Nummer Symbol enthalten kolorieren (#) Vor dem Hex-Wert. Auch sind eine Art Art und Breite für den Rand.

.Tablecell {border: 5px solide # 003366- }