CSS Referenz: Darstellung
Anzeige Hier werben
Einleitung Boxmodel ...
display: Anzeige von Elementen
Werte: none, block, inline, inline-block, list-item, run-in, table, inline-table, ...
visibility: Sichtbarkeit von Elementen
Werte: visible, hidden, collapse
visibility steht für die Sichtbarkeit. visibility: visible zeigt etwas an, visibility: hidden zeigt etwas nicht an. Im Gegensatz zu display: none, wird bei visibility: hidden der Platz für das Element frei gehalten.
Breite/Höhe
Werte: Länge, Prozentangabe
...
width: Elementbreite
...
height: Elementhöhe
...
min-width/max-width: Mindestbreite/Maximalbreite
...
min-height/max-height: Mindesthöhe/Maximalhöhe
...
overflow: Behandlung von übergroßem Inhalt
Werte: auto, hidden, scroll, visible
Bei Boxen und Tabellenzellen mit einer festgelegten Größe (height / width)
kann es vorkommen, dass ein Text oder anderer Inhalt in
diesem Element mehr Raum einnimmt, als das Element bieten kann. Durch
die Eigenschaft overflow besteht die Möglichkeit in CSS zu definieren, wie dieser übergroße Inhalt behandelt werden soll.
overflow-x/overflow-y
Mit overflow-x und overflow-y kann horizonal und vertikal überfließender Inhalt verschieden behandelt werden. Somit ist es z.B. möglich nur in einer Richtung eine Scrolleiste anzuzeigen.
opacity: Deckkraft/Transparenz von Elementen
Mit der opacity Eigenschaft kann die Deckkraft/Transparenz von Elementen gesteuert werden. Diese Eigenschaft wird zwar so nicht im Internet Explorer unterstützt, es gibt aber eine ebenbürtige Eigenschaft, wodurch in allen Browsern Transparenz genutzt werden kann.
clip: nur Ausschnitt anzeigen
Werte: rect(oben recht unten links)
Mit clip kann man eine rechteckige Maske über ein Element legen: Alles was nicht in diesem Rechteck ist, wird ausgeblendet.
box-sizing: Einstellunen auf was sich die Angabe der Breite und Höhe bezieht
Werte: border-box, conten-box, padding-box
Einstellung auf was sich die Angabe der Breite und Höhe bezieht (auf den Inhalt oder auf den Inhalt + Innenabstand, ...)
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 8 Personen an der Seite "CSS Referenz: Darstellung" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Referenz: Darstellung" hier bearbeiten.
David Danier
Thomas H
Fabian Ziegler
Philipe Fatio
Yichuan Shen
Michael Zaversnik
Moritz Kern
Holger V
Zusammenspiel des Ganzen
man sollte auch erwähnen, dass padding & margin einfluss auf die gesamtgröße eines objektes haben. beipsiel: habe ich ein div mit einer breite von 200px, gebe ich dem div nun zusätzlich 10px padding, muss ich den angegebenen faktor *2 von der breite (und auch der höhe) des div abziehen. tut man dies nicht, so hätte das div plötzlich eine breite von 220px
Grafik?
Soll ich noch eine Grafik erstellen, die den Unterschied zwischen Padding und Margin visuell darstellt?
Re: Grafik?
Upps, ich hab schon eine Hintergrundfarbe für den
bodydefiniert^^Re: Grafik?
Jo, gerne
Re: Grafik?
Ist drin.
alter
@michael: bist du wirklich 12? mit 12 hab ich noch nicht mal gewusst das es sowas wie internet gibt geschweige denn von html... ;)
hab deinen artikel erstmal offline genommen bis er fertig ist...
Re: alter
Ja ich bin 12 und html ist so was wie mein hobby
Re: alter
Respekt!
Dieses Feld ist zwingend erforderlich.
Nichts für Ungut, aber:
Re: Dieses Feld ist zwingend erforderlich.
Hab die beiden mal verlinkt, finds eigentlich nicht schlecht einen Artikel als Übersicht zu haben und die genauen Details in eigenen Artikeln zu behandeln. Alles in einem Artikel wär zu umfangreich, aber irgendwie muss die Zusammengehörigkeit ja auch klargestellt sein. Ein zusammenfassender Artikel über Abstände war auch geplant, siehe das CSS-Subportal.
Re: Dieses Feld ist zwingend erforderlich.
Vorallem, so ein unfertiger Post ô.0