Essentielle CSS Styles erklärt

Die 2 CSS Boxmodele bei width:

Das alte Box-Model:

[content-box]=width+margin+padding+border(1px+1px+1px+1px=4px width);
Erklärung:
margin,padding,border werden auf “width” Wert addiert.

//der übliche Defaultwert der Browser:
box-sizing: content-box;

Das neue Box-Model

[border-box]=(1px+1px+1px=1px width); witdh, padding, border werden nicht auf die “width” addiert.

box-sizing: border-box;

Schon in Bootstrap3 findest du das “border-box” Model für die Elemente angewendet, weil du so relativ sicher dein Template Layout gestalten kannst, ohne es aus versehen mit padding, border etc. zu zerschießen.

Für Texte:

  • color,
  • font-family
  • font-size
  • font-weightline-height.
  • font-style
  • word-spacing
  • letter-spacing
  • text- align
  • text-indent
  • font-strech
  • text-transform
  • text- shadow

Für Blockelemente:

  • background
  • border
  • margin
  • padding
  • box-sizing
  • position
  • opacity
  • clear
  • display
  • float
  • list- style
  • (min/max)-width
  • left,right,top,bottom
  • table
  • table-row
  • table-cell
  • visibility
  • z-index

Für Links:

  • Pseudoklassen: a:link,a:visited,a:focus,a:hover;a:active
  • text-decoration
  • display (Für die Position von meist Blockelementen)
  • position: static,relative,absolute,fixed;

Für Positionierung:

Das ist so ein komplexes Thema, schaue dir deshalb unbedingt die Beispiele mit Erklärungen dazu an.
Bei Positionierung von Htmlelementen mit CSS ist das Boxmodel wichtig, deshalb:

Neben den neuen CSS3 Eigenschaften wie flex, ist es von nutzen auch die alten Methoden zu kennen, wie float. Die Positionierung mit der CSS Eigenschaft position zu verstehen ist auch wichtig.

Position Relative:(div {position: relative;})

Das Element bewegen wird mit left,right,bottom,top in die jeweiligen Richtungen, relativ zur aktuellen Position des Elements. Wobei die ursprüngliche Stelle des Elements nicht von den Elementen davor oder danach im Code wieder aufgefüllt wird.

Beispiele: https://github.com/webhomeschool/das-wichtigste-in-css/blob/master/relative.html

Position Absolute: (div {position: absolute;})

Das absolute positionierte Element steht in Relation zum nächsten relative oder absolute positionierten Element in dem es sich befindet.
Wird auch mit left,right, bottom, top relativ positioniert und wird aus dem normalen Objektfluss herausgenommen. Deshalb beeinflusst es nicht den Objektfluss der üblich positionierten Elemente. Blockelemente mit dieser Positionierung schrumpfen auf die größe der Elemente, die sich in Ihnen befinden.

Beispiele: https://github.com/webhomeschool/das-wichtigste-in-css/blob/master/absolute.html

Position Fixed (div {position: fixed})

Die Positionierung ist besonders, weil sie sich immer relativ zum sichtbaren Fenster (viewport) befindet in dem es drinnen ist und an der festgelegten Stelle verbleibt, auch beim Scrollen. (nicht zu verwechseln mit einem “Sticky Footer” Template, was ein ganz anderes Konzept ist.

Display: (div {display: table;})

Mit “display” können wir das Verhalten von Inlineelementen verändern. Wir können Blockelemeten das Verhalten von Inlinelementen beibringen, Listenpunkte anzeigen lassen etc. Für die Position von Elementen sind die Werte table,flex und grid wichtig, wobei flex und grid erst vom IE10 umgesetzt werden und table ab IE8.

Float: (div {float: left;})

Mit der Eigenschaft float (float: left;float: right;) kannst du ein Element unter einem Element von unten nach oben links fließen lassen oder statt nach links nach rechts oben. In den alten Browsers wurde es eingesetzt um Elemente nebeneinander zu positionieren, weil es in den alten Browsern einwandfrei funktionert hat.

Ein gefloatetes Element wird aus dem normalen Elementfluss herausgenommen und es fließt nur nebeneinander, wenn es genug Platz hat um dies zu tun.

Beispiele:

https://github.com/webhomeschool/das-wichtigste-in-css/blob/master/float.html

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Please reload

Please Wait