Ein Einstieg in die grundlegenden Begriffe zu CSS3 14.12.2015
Layout: responsive oder besser fluid?
Per media query kann man für verschiedene Endgeräte verschiedene CSS-Angaben definieren:Die Punkte, an denen sich die Mediaqueries unterscheiden und somit unterschiedliche CSS-Eigenschaften definieren, heißen Breakpoints.
Somit verhält sich die Seite responsive. Solche Mediaqueries lassen sich auch gebrauchen, um das gesamte Layout umzubrechen und z.B für Endgeräte im Portraitmodus einspaltige und für den Landscapemodus mehrspaltige Layouts zu definieren.
Von da an ist es aber nur noch ein Schritt zu:
Diese Seite ist optimiert für ...!
Also in Sachen Layout besser keine Abhängigkeiten von breakpoints schaffen und fluid gestalten, so dass der Browser die Elemente nach Platz anordnen kann.
Boxmodell
Mit box-sizing wird das Boxmodell eingestellt. Standard ist box-sizing: content-box;.Der Vorteil von border-box ist, dass Breitenberechnungen bequemer werden, da in der Breiten-/Höhenangabe padding und border enthalten sind - ein Beispiel:
Eine Box soll insgesamt 10rem breit sein, mit border (grau) und padding (weiss) zu je 1rem.
Inhalt
Selektoren
descendent selector (alle Nachfahren, Kinder aller Generationen) ' ':
div p { /* alle p unter einem div */
}child selector (alle Kinder erster Generation) '>':
div>p { /* alle p mit Eltern div */
}
general successor sibling selector (alle nachfolgende Geschwister) '~':
div ~ p { /* alle p nach einem div mit den gleichen Eltern */
}
adjacent sibling selector (direkt nachfolgendes Geschwister) '+':
div + p { /* nur die p direkt nach einem div mit den gleichen Eltern */
}
css-reset
Jeder Browser hat seine Standardeinstellungen, per css-reset werden diese vereinheitlicht oder genullt.Als CSS-Selektor dient der Stern, um alle Elemente zu selektieren.
Somit haben alle Elemente auf allen Browsern gleiche Abstände. Das css-reset lässt sich natürlich beliebig erweitern.
clearfix
Will man eine Nebeneinanderanordnung erreichen, gibt es mehrere Möglichkeiten:- display:inline
- position:...
- float:...
- flex:
Hat man sich für float entschieden, muss der float per clear wieder aufgehoben werden, sonst wirkt sich die Einstellung auf nachfolgende Elemente aus.
Ohne clear
zurück
zoom
weiter
nachfolgende Elemente
clear mit zusätzlichem html-Tag
zurück
zoom
weiter
nachfolgende Elemente
clearfix mit Pseudoelement
zurück
zoom
weiter
nachfolgende Elemente
Mit dem Pseudoelement ::after wird dynamischer Inhalt eingefügt, der die entsprechenden CSS-Eigenschaften bekommt, um wieder den normalen Elementfluss herzustellen.
Übrigens, da war doch noch display:inline-block ...