diedVIPs

html knowhow

Boxen











Boxen
Der Begriff "Box" wird verwendet, wenn es um Design und Layout geht.
Das CSS-Box-Modell ist im Wesentlichen eine Box, die jedes HTML-Element umschließt.
Es besteht aus: Rändern, Rahmen, Padding und dem eigentlichen Inhalt. Siehe auch Abstände
box     div {width: 300px; border: 15px solid green; padding: 50px; margin: 20px;}
textarea textarea definiert ein mehrzeiliges Texteingabesteuerelement.  Ein Textbereich kann eine unbegrenzte Anzahl von Zeichen enthalten. <textarea id="view" name="view" rows="4" cols="50">
At technologies.
</textarea>

textarea { background: url(images/benice.png) center center no-repeat; border: 1px solid #888;}
box-shadow Box mit Schatten
  • <length>
  • <color>
  • none
  • inset
#example1 {box-shadow: 5px 10px;}
#example2 {box-shadow: 5px 10px #888888;}
resize resize gibt an, ob und wie ein Element vom Benutzer in der Größe geändert werden soll.   div {resize: horizontal; overflow: auto;}
div {resize: vertical; overflow: auto;}
textarea {resize: none;}
container container ist wie ein leerer Rahmen auf Ihrer Webseite. Ein DIV-Container begrenzt also einen bestimmten Bereich.   .container {position: relative;width: 100%;left: 0%;}
box-sizing Höhen- und Breitenberechnung einer Box.
box-sizing ermöglicht, die Auffüllung und den Rahmen in die Gesamtbreite und -höhe eines Elements einzubeziehen.
  • content-box
  • padding-box
  • border-box
  • inherit
.div1 {width: 300px; height: 100px; border: 1px solid blue;}

.div2 {width: 300px; height: 100px; padding: 50px;
border: 1px solid red;}
.div2 {width: 300px; height: 100px; padding: 50px;
border: 1px solid red; box-sizing: border-box;}

* {box-sizing: border-box;}









Kontakt    Datenschutz   Impressum