HTML & CSS Hands-On - Units - Start

by Karin Huber

HTML

<h2>Absolute</h2>

<div id="div1">Div 1: Breite 3cm, Höhe 2cm</div>

<div id="div2">Div 1: Breite 200px, Höhe 50px</div>

<h2>Relative</h2>

<div class="container">
  <div id="div3">Div 1: Breite 50% vom Container, Höhe 3x so hoch wie die Schrift</div>

  <div id="div4">Div 1: Breite 75% vom Container, Höhe 3x so hoch wie die Schrift</div>

  <div id="div5">Div 1: Breite 100% vom Container, Höhe 3x so hoch wie die Default-Schrift</div>
</div>

<h2>Viewport</h2>

<div class="container">
  <div id="div6">Div 1: Breite 75% vom Bildschirm, Höhe 10% vom Bildschirm</div>

  <div id="div7">Div 1: Breite 50% vom Bildschirm, Höhe 10% vom Bildschirm</div>

  <div id="div8">Div 1: Breite 50% vom Bildschirm, Höhe 10% vom Bildschirm</div>
</div>

CSS

div {
  border: 1px solid blue;
}

div.container {
  border: 1px solid red;
  width: 50%;
}