Essentielle CSS Styles zusammengefasst und erklärt

Die 2 CSS Boxmodele bei width:

Das alte Box-Model:

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

Das neue Box-Model

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

Beispiele:

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, relative zur aktuellen Position des Elements. Wobei die ursprüngliche Stelle des Elements nicht mit den Elementen ausgefüllt wird.
Beispiele:

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. Sollten die Elemente größer sein, als die Begrenzungen des absolut positionierten Elements, überfließen diese diese Grenzen.

Beispiele:

Position Fixed (div {position: fixed})

Die Positionierung ist besonders, weil sie sich immer relativ zum sichtbaren Fenster gefindet in dem es drinnen ist und an der festgelegten Stelle verbleibt, auch beim Scrollen.

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. 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.

Schreibe einen Kommentar

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