css-positioning

CSS - Positioning

Box

Box-Model

Standardlayout

<h4>Standardlayout</h4>
<ul>
    <li>Block-Elemente untereinander</li>
    <li>Block-Elemente nehmen 100% Breite ein</li>
    <li><strong>Inline</strong>-Elemente erzeugen 
        <em>keinen</em> Umbruch
    </li>
</ul>
  • Block-Elemente untereinander
  • Block-Elemente nehmen 100% Breite ein
  • Inline-Elemente erzeugen keinen Umbruch 
<p>1</p>
<span>2</span>
<span>3</span>
<p>4</p>
<span>5</span>
<p>6</p><p>7</p>

1

2 3

4

5

6

7

display

block
100% Breite
Zeilenumbrüche vorher und nachher
respektiert width/height
inline
so breit wie nötig
keine Zeilenumbrüche
ignoriert width/height

weitere values

Use Case Nav bar

<ul>
    <li><a href="#">POS</a></li>
    <li><a href="#">AM</a></li>
    <li><a href="#">TINF</a></li>
</ul>

Demo

Flexbox

eindimensionale Layouts

Demo

flex-layout

Customization

Grid

  • zweidimensionale Layouts

grid-layout

Demo

Customization