public/web-development/presentation.git

Parent: 935b3687 | Patch | Commit | ignore whitespace

start new css chapter with display, position and variables

Sascha Schulz

2023-08-30 e6906452d832bcea6b120854df306e6e41bde7fb

start new css chapter with display, position and variables

1 Dateien geändert

12 Dateien hinzugefügt

	assets/drawio/css-display-block.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/drawio/css-display-inline-block.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/drawio/css-display-inline.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/drawio/css-position-absolute.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/drawio/css-position-relative.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/drawio/css-position-static.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-display-block.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-display-inline-block.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-display-inline.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-position-absolute.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-position-relative.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/css-position-static.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	index.html	205 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie

 assets/drawio/css-display-block.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-08-29T12:21:18.014Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="DPWw0AALEGWy5TgxIzfN" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVRT4MwEMc/DY9LoN3Y9uhwzpgYH2Y0PlZ60maF1tIJ89NbpB2QbYkmmiV74vjfv3fXXxsIcJLXK00Uu5cURIBCWgf4OkAIzcfIPhpl5xQ8xa2SaU5bLeqENf8EJ4ZO3XIK5cBopBSGq6GYyqKA1Aw0orWshrY3KYZdFcngQFinRByqz5wa1qozNO30W+AZ852jeN5mcuLNbiclI1RWPQkvA5xoKU0b5XUCoqHnubTrbk5k94NpKMxPFsyfVkiK9zv1WE1nL/whQclmNG6rfBCxdRt2w5qdJ6DltqDQFAkDvKgYN7BWJG2ylT10qzGTC/sW2dCVA22gPjlntN+9vTcgczB6Zy3uiow6hlVHfBI7jKxPe+KMxJ1ytq/WgbCBY/ELLvgIl1jYtotSkcLGWRNTXipB7NxX1vsqZLrxLtu0bzwfVL/A0esxDg8Zj48w9tqfI55cPOLo3IjjS0cc/uMttq/dx/k71/vH4eUX</diagram></mxfile>

 assets/drawio/css-display-inline-block.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-08-29T12:57:48.488Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="AnwePxmuu2hy53zhMpJs" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">jZJNT8MwDIZ/TY+T2gRt6xHKGEJCHIZAHKPGNBFpHVJv7fj1pDT90jSJU5zHjh2/dsSzst07YdUzSjARi2Ub8fuIMRaz1B8dOfckSdNACqdlYBM46B8IMA70qCXUi0BCNKTtEuZYVZDTggnnsFmGfaJZVrWigAtwyIW5pO9akurplm0m/gi6UEPlZB36K8UQHDqplZDYzBDfRTxziNRbZZuB6dQbdOnfPVzxjh9zUNF/HqRve4bm+8m+Npvth37JWPa14n2WkzDH0HDE1sbnu6utqLxddLbFWpPGKuK3XSMkSOdDnC84Dw290nkQ0OGxktD9IfbuRmmCgxV55238znimqDT+loyvT+AI2qttJqN4fu0ASyB39iFhw1bTCJppYMkmTEHNhnUTmAg7UozJJhm9EZQcrtPE/nyzxee7Xw==</diagram></mxfile>

 assets/drawio/css-display-inline.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-08-29T12:23:16.359Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="O3r_fg3Z8A-NHZnA0_VS" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVdT4MwFIZ/DZcz0I4Blw7njInxYkbjZUOP0Fgolk6Yv94i7YCwJTPxI9kVp29Pz8fTE+rgOG/WkpTZnaDAHeTSxsFXDkLIRZH+tMquU7woMkoqGTVaL2zYBxjRNeqWUahGjkoIrlg5FhNRFJCokUakFPXY7UXwcdaSpDARNgnhU/WJUZV1aoiCXr8BlmY2s7cw/eXEOptOqoxQUQ8kvHJwLIVQnZU3MfCWnuXSnbs+srsvTEKhTjkQPa6R4G+35UMdhM/sPkbx62zeRXknfGsaNsWqnSUgxbag0AZxHbysM6ZgU5Kk3a31pWstUznXK0+bJhxIBc3ROr1993puQOSg5E67mBGZ9Qzrnri/MBizAW3f+BFzyek+WM9BGwbFN7DgA1gWXGddViUptJ22NmVVyYku+7KNV3BWgHXTWYee/wfVHjD0esZ+dOFPKHvBAcpz95coB2dHOZpgtmM7hBz+JeTw3CDj8CTIPzTJetn/or/2Bi8dXn0C</diagram></mxfile>

 assets/drawio/css-position-absolute.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-08-29T15:39:42.353Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="8Abe0gdre3hiula6WsDI" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">5VZRb5swEP41PEYCnJL0MaVdp0nTJmXa1kcXX8Cqwcw4hezX76hNwDGttlVVNO0J3+fz2ffddzYBScvuVtG6+CgZiCAOWReQ6yCO43W4xk+PHAxCosQiueLMYNEIbPlPsGBo0T1n0DiOWkqhee2CmawqyLSDUaVk67rtpHB3rWkOHrDNqPDRb5zpwqDreDXi74HnxbBzlFyamZIOzjaTpqBMthOI3AQkVVJqMyq7FETP3sCLWffumdnjwRRU+ncWXH69jaX48aH+0q7Wd/xTGqcPC2KiPFKxtwnXsuGayyogG5xQIKjmj2BT0IeBFyX3FYM+dBiQq7bgGrY1zfrZFqWAWKFLgVaEQ7sJKA3ds6ePjpygmkCWoNUBXaxwFiOz7ViHaGXJLSY1WFqM2tLnx2AjOziwBP0BWVHkseXxAhXb9LJDKxO0aXjmUuHyhsmrw/epcTc1rjvHOljLbArMU+4JmdgqVOWgX0opmWd9wvHFDMUDdpSH03YzvNsdPkuOJ5wr6rCokXuVgfWbqnlY2rlFHiPFJ5FM7l6kp8ofM32FGPzWEbDTpm2isO48aaD4tSuGRiv5AKkUUiFSyQo9r3ZciBOICp5XvaKwvoD4Vd9KHC+pjZ0oOWP9NrON6EqO0aZ4Ml7bmHbBYuVVIll6jZrMiIi8WZ8uvdJoWZvKkP+6MuTizJUJZ27QRPTkNzWtcJz3Y/cNajTeMdngd68GrwHBk0wXn++p6lz2RtqHy+p8L1fyF7zT+0aKvYZ/h/nYYz56O+bRHH/ezKsy/gOTm18=</diagram></mxfile>

 assets/drawio/css-position-relative.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-08-29T13:03:52.435Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="LDoKMm7A0thygrm6bKuW" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">zZXbbtswDIafxpcFfFhzuEzcrsOAYQUybNilYDG2UFn0ZKV2+vSjavmgOEFbBAN2ZekXRUofSTlI0rJ90KwqviEHGcQhb4PkLojjeBWu6GOVY6dE6/W6U3ItuNNGYSdewImhUw+CQ+0ZGkRpROWLGSoFmfE0pjU2vtkepR+1YjnMhF3G5Fz9JbgpOnUVL0f9C4i86CNHC3e/kvXG7iZ1wTg2Eym5D5JUI5puVLYpSEuv59Lt+3xhdTiYBmXes2H98yFG+edr9aNZrn6L72mcPt0knZdnJg/uwu6w5tgT0HhQHKyTMEi2TSEM7CqW2dWGkk5aYUpJs4iGnNXFq62dON+gDbQXDx0NKKiIAEsw+kgmrl5uRqDNiD9aOqbFBP0npzGX8XxwNkKhgePyAUZ9KXqQFpLCbuuKKRrndlxhLYxAFSQbMtYgmRHP0FtS5KnxdZSvAdv6tP4nztHbxQiKb2xX0yyTrK5F5pPxMXbbgc9a/E1KEwi3Zxj02pBl79k5A8ZFeERBgafUoxOaNR50Bs5u2s391ov5O/VkmM7BzDy9pma46RXZmj8dEvamq35i3M5yR8Vq/GzVRuMTpChRk6JQkeV2L6Q8kZgUubIpp7QB6Vtb+oIe6Y1bKAXnNszZxvFr4h+8UGE465zFmaJJPt44NB1/EF3mxv9scv8X</diagram></mxfile>

 assets/drawio/css-position-static.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-08-29T13:01:42.314Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="qFVua-Gj_dB85dpMiA_l" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">jZJNT8MwDIZ/TY6T1gSt6xHKGEJCHIZAHKPGNBFpHdJs7fj1pDTph6ZJnOI8duz4tQnLq25vuZHPKEATuhYdYfeE0iTbJv7oyTmSLBtIaZUIbAIH9QMBrgM9KgHNItAhaqfMEhZY11C4BePWYrsM+0S9rGp4CRfgUHB9Sd+VcHKgW5pO/BFUKWPlZBP6q3gMDp00kgtsZ4jtCMstohusqstB9+pFXYZ3D1e848cs1O4/D7K3PUX9/WRe23T7oV5ymn+t2JDlxPUxNEzoRvt8d43htbfL3jbYKKewJuy2b8Rxp4oY5wvOQ0Ov7hwFtHisBfR/WHt3K5WDg+FF7239zngmXaX9LRlfn8A66K62mYzi+bUDrMDZsw8JG7aaRtBOA0vSMAU5G9ZNYDzsSDkmm2T0RlAyXqeJ/flmi892vw==</diagram></mxfile>

 assets/images/css-display-block.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="200px" viewBox="-0.5 -0.5 601 200" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-08-29T12:21:51.421Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;VxGXzOKg4UfxLWPBsm4U&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;BGdbwjortsLvGND2NXud&quot; name=&quot;Page-1&quot;&gt;3ZVRT4MwEMc/DY9LoN3Y9uhwzpgYH2Y0PlZ60maF1tIJ89NbpB2QbYkmmiV74vjfv3fXXxsIcJLXK00Uu5cURIBCWgf4OkAIzcfIPhpl5xQ8xa2SaU5bLeqENf8EJ4ZO3XIK5cBopBSGq6GYyqKA1Aw0orWshrY3KYZdFcngQFinRByqz5wa1qozNO30W+AZ852jeN5mcuLNbiclI1RWPQkvA5xoKU0b5XUCoqHnubTrbk5k94NpKMxPFsyfVkiK9zv1WE1nL/whQclmNG6rfBCxdRt2w5qdJ6DltqDQFAkDvKgYN7BWJG2ylT10qzGTC/sW2dCVA22gPjlntN+9vTcgczB6Zy3uiow6hlVHfBI7jKxPe+KMxJ1ytq/WgbCBY/ELLvgIl1jYtotSkcLGWRNTXipB7NxX1vsqZLrxLtu0bzwfVL/A0esxDg8Zj48w9tqfI55cPOLo3IjjS0cc/uMttq/dx/k71/vH4eUX&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><rect x="20" y="20" width="560" height="159" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="29" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 49px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g><rect x="30" y="79" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 99px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="103" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g><rect x="30" y="129" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 149px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="153" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 assets/images/css-display-inline-block.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="101px" viewBox="-0.5 -0.5 601 101" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-08-29T12:47:20.803Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;EFHDFcC-lXVga_wXoOKl&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;BGdbwjortsLvGND2NXud&quot; name=&quot;Page-1&quot;&gt;1ZVdT4MwFIZ/DZcz0I4Blw7njInxYkbjZaUVmhWKpRPmr7fIYUDYlpmoi1ecvj09H09PqIXDtFoqkid3kjJhIZtWFr6yEEI2CsynVraN4gQBKLHiFLROWPEPBqIN6oZTVgwctZRC83woRjLLWKQHGlFKlkO3VymGWXMSs5GwiogYq0+c6qRRfeR1+g3jcdJmdmbQX0paZ+ikSAiVZU/CCwuHSkrdWGkVMlHTa7k0564P7O4KUyzTpxwIHpdIirfb/KH0/Gd+H6JwPZk2Ud6J2EDDUKzetgSU3GSU1UFsC8/LhGu2yklU75bm0o2W6FSYlWNMCMeUZtXBOp1d92ZumEyZVlvjAiMy6RiWHXF3BhiTHm0X/AhccrwL1nEwBqD4Bha8B8tMmKzzIieZsePaprzIBTFlX9bxMsEzNnkRMlq3ziZ33/98aNsDwLAj7QYX7oi14+1hPbV/ibU3Yn2E67kBBiOC7Vz2+fl/yc//R/ywfxK/H5o/s+x+r197vVcKLz4B&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="29.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline-block</span></div></div></div></foreignObject><text x="115" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline-block</text></switch></g><rect x="210" y="29" width="180" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 49px; margin-left: 211px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">display: inline-block</div></div></div></foreignObject><text x="300" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline-block</text></switch></g><rect x="400" y="29" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 401px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">display: inline-block</div></div></div></foreignObject><text x="485" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline-block</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 assets/images/css-display-inline.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="101px" viewBox="-0.5 -0.5 601 101" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-08-29T12:23:26.685Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;skcvZPTlOynlrjnsL0HU&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;BGdbwjortsLvGND2NXud&quot; name=&quot;Page-1&quot;&gt;3ZVdT4MwFIZ/DZcz0I4Blw7njInxYkbjZUOP0Fgolk6Yv94i7YCwJTPxI9kVp29Pz8fTE+rgOG/WkpTZnaDAHeTSxsFXDkLIRZH+tMquU7woMkoqGTVaL2zYBxjRNeqWUahGjkoIrlg5FhNRFJCokUakFPXY7UXwcdaSpDARNgnhU/WJUZV1aoiCXr8BlmY2s7cw/eXEOptOqoxQUQ8kvHJwLIVQnZU3MfCWnuXSnbs+srsvTEKhTjkQPa6R4G+35UMdhM/sPkbx62zeRXknfGsaNsWqnSUgxbag0AZxHbysM6ZgU5Kk3a31pWstUznXK0+bJhxIBc3ROr1993puQOSg5E67mBGZ9Qzrnri/MBizAW3f+BFzyek+WM9BGwbFN7DgA1gWXGddViUptJ22NmVVyYku+7KNV3BWgHXTWYee/wfVHjD0esZ+dOFPKHvBAcpz95coB2dHOZpgtmM7hBz+JeTw3CDj8CTIPzTJetn/or/2Bi8dXn0C&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="29.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="115" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="210" y="29" width="180" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 178px; height: 1px; padding-top: 49px; margin-left: 211px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="300" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="400" y="29" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 49px; margin-left: 401px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="485" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 assets/images/css-position-absolute.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="311px" height="148px" viewBox="-0.5 -0.5 311 148" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-08-29T15:39:46.837Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;PeUxOrFBqwBmuO2_eTbH&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;BGdbwjortsLvGND2NXud&quot; name=&quot;Page-1&quot;&gt;5VZRb5swEP41PEYCnJL0MaVdp0nTJmXa1kcXX8Cqwcw4hezX76hNwDGttlVVNO0J3+fz2ffddzYBScvuVtG6+CgZiCAOWReQ6yCO43W4xk+PHAxCosQiueLMYNEIbPlPsGBo0T1n0DiOWkqhee2CmawqyLSDUaVk67rtpHB3rWkOHrDNqPDRb5zpwqDreDXi74HnxbBzlFyamZIOzjaTpqBMthOI3AQkVVJqMyq7FETP3sCLWffumdnjwRRU+ncWXH69jaX48aH+0q7Wd/xTGqcPC2KiPFKxtwnXsuGayyogG5xQIKjmj2BT0IeBFyX3FYM+dBiQq7bgGrY1zfrZFqWAWKFLgVaEQ7sJKA3ds6ePjpygmkCWoNUBXaxwFiOz7ViHaGXJLSY1WFqM2tLnx2AjOziwBP0BWVHkseXxAhXb9LJDKxO0aXjmUuHyhsmrw/epcTc1rjvHOljLbArMU+4JmdgqVOWgX0opmWd9wvHFDMUDdpSH03YzvNsdPkuOJ5wr6rCokXuVgfWbqnlY2rlFHiPFJ5FM7l6kp8ofM32FGPzWEbDTpm2isO48aaD4tSuGRiv5AKkUUiFSyQo9r3ZciBOICp5XvaKwvoD4Vd9KHC+pjZ0oOWP9NrON6EqO0aZ4Ml7bmHbBYuVVIll6jZrMiIi8WZ8uvdJoWZvKkP+6MuTizJUJZ27QRPTkNzWtcJz3Y/cNajTeMdngd68GrwHBk0wXn++p6lz2RtqHy+p8L1fyF7zT+0aKvYZ/h/nYYz56O+bRHH/ezKsy/gOTm18=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="90" y="27" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 47px; margin-left: 91px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">position: relative</div></div></div></foreignObject><text x="175" y="51" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: relative</text></switch></g><path d="M 90 27 L 107.96 79.97" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 109.64 84.94 L 104.08 79.44 L 107.96 79.97 L 110.71 77.19 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><rect x="20" y="32" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 47px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">left: 10px</div></div></div></foreignObject><text x="50" y="51" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">left: 10px</text></switch></g><rect x="20" y="61" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 76px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">top: 30px</div></div></div></foreignObject><text x="50" y="80" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">top: 30px</text></switch></g><rect x="120" y="56" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 76px; margin-left: 121px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: static<br /></span></div></div></div></foreignObject><text x="205" y="80" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: static&#xa;</text></switch></g><rect x="110" y="86" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 106px; margin-left: 111px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: absolute<br /></span></div></div></div></foreignObject><text x="195" y="110" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: absolute&#xa;</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 assets/images/css-position-relative.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="258px" height="140px" viewBox="-0.5 -0.5 258 140" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-08-29T13:03:58.749Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;oPm1Ld_MIQU0uvIAMbpw&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;BGdbwjortsLvGND2NXud&quot; name=&quot;Page-1&quot;&gt;zZXbbtswDIafxpcFfFhzuEzcrsOAYQUybNilYDG2UFn0ZKV2+vSjavmgOEFbBAN2ZekXRUofSTlI0rJ90KwqviEHGcQhb4PkLojjeBWu6GOVY6dE6/W6U3ItuNNGYSdewImhUw+CQ+0ZGkRpROWLGSoFmfE0pjU2vtkepR+1YjnMhF3G5Fz9JbgpOnUVL0f9C4i86CNHC3e/kvXG7iZ1wTg2Eym5D5JUI5puVLYpSEuv59Lt+3xhdTiYBmXes2H98yFG+edr9aNZrn6L72mcPt0knZdnJg/uwu6w5tgT0HhQHKyTMEi2TSEM7CqW2dWGkk5aYUpJs4iGnNXFq62dON+gDbQXDx0NKKiIAEsw+kgmrl5uRqDNiD9aOqbFBP0npzGX8XxwNkKhgePyAUZ9KXqQFpLCbuuKKRrndlxhLYxAFSQbMtYgmRHP0FtS5KnxdZSvAdv6tP4nztHbxQiKb2xX0yyTrK5F5pPxMXbbgc9a/E1KEwi3Zxj02pBl79k5A8ZFeERBgafUoxOaNR50Bs5u2s391ov5O/VkmM7BzDy9pma46RXZmj8dEvamq35i3M5yR8Vq/GzVRuMTpChRk6JQkeV2L6Q8kZgUubIpp7QB6Vtb+oIe6Y1bKAXnNszZxvFr4h+8UGE465zFmaJJPt44NB1/EF3mxv9scv8X&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="27" y="20" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-dasharray="3 3" pointer-events="all"/><rect x="67" y="20" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 68px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: relative</span></div></div></div></foreignObject><text x="152" y="44" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: relative</text></switch></g><path d="M 27 79 L 60.63 79" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 65.88 79 L 58.88 82.5 L 60.63 79 L 58.88 75.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><rect x="27" y="89" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 104px; margin-left: 28px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">left: 20px</div></div></div></foreignObject><text x="57" y="108" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">left: 20px</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 assets/images/css-position-static.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="211px" height="82px" viewBox="-0.5 -0.5 211 82" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-08-29T13:01:47.694Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;bTcQnLXnavKtkTCAtb4E&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;BGdbwjortsLvGND2NXud&quot; name=&quot;Page-1&quot;&gt;jZJNT8MwDIZ/TY6T1gSt6xHKGEJCHIZAHKPGNBFpHdJs7fj1pDTph6ZJnOI8duz4tQnLq25vuZHPKEATuhYdYfeE0iTbJv7oyTmSLBtIaZUIbAIH9QMBrgM9KgHNItAhaqfMEhZY11C4BePWYrsM+0S9rGp4CRfgUHB9Sd+VcHKgW5pO/BFUKWPlZBP6q3gMDp00kgtsZ4jtCMstohusqstB9+pFXYZ3D1e848cs1O4/D7K3PUX9/WRe23T7oV5ymn+t2JDlxPUxNEzoRvt8d43htbfL3jbYKKewJuy2b8Rxp4oY5wvOQ0Ov7hwFtHisBfR/WHt3K5WDg+FF7239zngmXaX9LRlfn8A66K62mYzi+bUDrMDZsw8JG7aaRtBOA0vSMAU5G9ZNYDzsSDkmm2T0RlAyXqeJ/flmi892vw==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(42, 42, 42);"><defs/><g><rect x="20" y="20" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>position: static</span></div></div></div></foreignObject><text x="105" y="44" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">position: static</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 index.html

@@ -2797,6 +2797,211 @@
                        </pre>
                    </section>
                </section>
                <section>
                    <section>
                        <h2>CSS</h2>
                        <img data-src="/assets/images/css-sucks.png">
                    </section>
                    <section>
                        <h3>Warum CSS?</h3>
                        <ul>
                            <li>Erhöhte Zugänglichkeit des Inhalts</li>
                            <li>Wiederverwendbarkeit</li>
                        </ul>
                    </section>
                    <section>
                        <h3>Syntax</h3>
                        <pre>
                            <code class="css" data-trim data-line-numbers>
                                selector [, selector2, selector3, ...] {
                                    property1: value;
                                    property2: value;
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Beispiel</h3>
                        <pre>
                            <code class="css" data-trim data-line-numbers>
                                html, body {
                                    width: 100%;
                                    height: 100%;
                                    margin: 0;
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Selektoren</h3>
                        <pre>
                            <code class="css" data-trim data-line-numbers>
                                /* Elemente */
                                html, body {...}
								
                                /* IDs */
                                #my-id {...}
								
                                /* Klassen */
                                .my-class {...}
								
                                /* Pseudo-Klassen */
                                div:hover {...}
								
                                /* Attribute */
                                div[my-attribut="abc"] {...}
								
                                /* Kombinationen */
                                div.my-class#my-id {...}
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Variablen</h3>
                        <pre>
                            <code class="css" data-trim data-line-numbers>
                                html {
                                    --my-background-color: #abcdef;
                                }
								
                                html div {
                                    background-color: var(--my-background-color, white);
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Das <code>display</code>-Attribut</h3>
                    </section>
                    <section>
                        <p>block</p>
                        <img data-src="/assets/images/css-display-block.svg">
                        <ul>
                            <li>untereinander angeordnet</li>
                            <li>nehmen sich die volle Breite</li>
                            <li><code>width</code> und <code>height</code> möglich</li>
                        </ul>
                    </section>
                    <section>
                        <p>inline</p>
                        <img data-src="/assets/images/css-display-inline.svg">
                        <ul>
                            <li>Standard bei <code>Custom Elements</code></li>
                            <li>nur so groß wie der content</li>
                            <li><code>width</code> und <code>height</code> nicht möglich</li>
                            <li>nebeneinander angeordnet</li>
                        </ul>
                    </section>
                    <section>
                        <p>inline-block</p>
                        <img data-src="/assets/images/css-display-inline-block.svg">
                        <ul>
                            <li>Mischform von <code>block</code> und <code>inline</code></li>
                            <li>nur so groß wie der content</li>
                            <li><code>width</code> und <code>height</code> möglich</li>
                            <li>nebeneinander angeordnet</li>
                        </ul>
                    </section>
                    <section>
                        <h3>Das <code>position</code>-Attribut</h3>
                    </section>
                    <section>
                        <p>static</p>
                        <img data-src="/assets/images/css-position-static.svg">
                        <ul>
                            <li>Standard</li>
                            <li>Element wird am Ort der Verankerung im HTML dargestellt</li>
                        </ul>
                    </section>
                    <section>
                        <p>relative</p>
                        <img data-src="/assets/images/css-position-relative.svg">
                        <ul>
                            <li>Verschiebung zur eigentlichen <code>static</code>-Position, z.B. mittels <code>left: 20px</code></li>
                        </ul>
                    </section>
                    <section>
                        <p>absolut</p>
                        <img data-src="/assets/images/css-position-absolute.svg">
                        <ul>
                            <li>relative Verschiebung zum nächsten nicht-<code>static</code>-Parent (sonst <code>window</code>)</li>
                        </ul>
                    </section>
                    <section>
                        <h3>Aufgabe</h3>
                        <p>Implementiere folgendes Beispiel-Menü</p>
                        <iframe data-src="/assets/html/css-menu.html"></iframe>
                    </section>
                    <section>
                        <h3>Lösung</h3>
                        <pre>
                            <code class="css" data-trim data-line-numbers>
                                .menu-item {
                                    display: inline-block;

                                    position: relative;
                                }

                                .menu-item .children {
                                    display: none;

                                    position: absolute;
                                }

                                .menu-item:hover .children {
                                    display: block;
                                }
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="html" data-trim data-line-numbers>
                                <script type="text/template">
                                    <div class="menu">
                                        <div class="menu-item">Eins</div>
                                        <div class="menu-item">
                                            Hover Me!
                                            <div class="children">
                                                <div>Item 1</div>
                                                <div>Item 2</div>
                                            </div>
                                        </div>
                                        <div class="menu-item">Drei</div>
                                    </div>
                                </script>
                            </code>
                        </pre>
                    </section>
                    <section>
                        <h3>Viewport</h3>
                        <pre>
                            <code class="html" data-trim data-line-numbers>
                                &lt;!DOCTYPE html>
                                &lt;html>
                                    &lt;head>
                                        &lt;meta charset="utf-8">&lt;/meta>
                                        &lt;meta
                                            name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
                                        >
                                    &lt;/head>
                                    &lt;body>
                                        ...
                                    &lt;/body>
                                &lt;/html>
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="bash" data-trim data-line-numbers="">
                                npm install -g http-server
                                cd pfad/zum/projekt
                                http-server --port 8080
                            </code>
                        </pre>
                    </section>
                </section>
            </div>
        </div>

Neue Datei
			@@ -0,0 +1 @@
			<mxfile host="Electron" modified="2023-08-29T12:21:18.014Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="DPWw0AALEGWy5TgxIzfN" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVRT4MwEMc/DY9LoN3Y9uhwzpgYH2Y0PlZ60maF1tIJ89NbpB2QbYkmmiV74vjfv3fXXxsIcJLXK00Uu5cURIBCWgf4OkAIzcfIPhpl5xQ8xa2SaU5bLeqENf8EJ4ZO3XIK5cBopBSGq6GYyqKA1Aw0orWshrY3KYZdFcngQFinRByqz5wa1qozNO30W+AZ852jeN5mcuLNbiclI1RWPQkvA5xoKU0b5XUCoqHnubTrbk5k94NpKMxPFsyfVkiK9zv1WE1nL/whQclmNG6rfBCxdRt2w5qdJ6DltqDQFAkDvKgYN7BWJG2ylT10qzGTC/sW2dCVA22gPjlntN+9vTcgczB6Zy3uiow6hlVHfBI7jKxPe+KMxJ1ytq/WgbCBY/ELLvgIl1jYtotSkcLGWRNTXipB7NxX1vsqZLrxLtu0bzwfVL/A0esxDg8Zj48w9tqfI55cPOLo3IjjS0cc/uMttq/dx/k71/vH4eUX</diagram></mxfile>

Neue Datei
			@@ -0,0 +1,4 @@
			<?xml version="1.0" encoding="UTF-8"?>
			<!-- Do not edit this file with editors other than diagrams.net -->
			<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="601px" height="200px" viewBox="-0.5 -0.5 601 200" content="<mxfile host="Electron" modified="2023-08-29T12:21:51.421Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="VxGXzOKg4UfxLWPBsm4U" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVRT4MwEMc/DY9LoN3Y9uhwzpgYH2Y0PlZ60maF1tIJ89NbpB2QbYkmmiV74vjfv3fXXxsIcJLXK00Uu5cURIBCWgf4OkAIzcfIPhpl5xQ8xa2SaU5bLeqENf8EJ4ZO3XIK5cBopBSGq6GYyqKA1Aw0orWshrY3KYZdFcngQFinRByqz5wa1qozNO30W+AZ852jeN5mcuLNbiclI1RWPQkvA5xoKU0b5XUCoqHnubTrbk5k94NpKMxPFsyfVkiK9zv1WE1nL/whQclmNG6rfBCxdRt2w5qdJ6DltqDQFAkDvKgYN7BWJG2ylT10qzGTC/sW2dCVA22gPjlntN+9vTcgczB6Zy3uiow6hlVHfBI7jKxPe+KMxJ1ytq/WgbCBY/ELLvgIl1jYtotSkcLGWRNTXipB7NxX1vsqZLrxLtu0bzwfVL/A0esxDg8Zj48w9tqfI55cPOLo3IjjS0cc/uMttq/dx/k71/vH4eUX</diagram></mxfile>"><defs/><g><rect x="20" y="20" width="560" height="159" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="30" y="29" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 49px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="53" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g><rect x="30" y="79" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 99px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="103" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g><rect x="30" y="129" width="540" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 538px; height: 1px; padding-top: 149px; margin-left: 31px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: block</span></div></div></div></foreignObject><text x="300" y="153" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: block</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

			@@ -2797,6 +2797,211 @@
			</pre>
			</section>
			</section>
			<section>
			<section>
			<h2>CSS</h2>
			<img data-src="/assets/images/css-sucks.png">
			</section>
			<section>
			<h3>Warum CSS?</h3>
			<ul>
			<li>Erhöhte Zugänglichkeit des Inhalts</li>
			<li>Wiederverwendbarkeit</li>
			</ul>
			</section>
			<section>
			<h3>Syntax</h3>
			<pre>
			<code class="css" data-trim data-line-numbers>
			selector [, selector2, selector3, ...] {
			property1: value;
			property2: value;
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Beispiel</h3>
			<pre>
			<code class="css" data-trim data-line-numbers>
			html, body {
			width: 100%;
			height: 100%;
			margin: 0;
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Selektoren</h3>
			<pre>
			<code class="css" data-trim data-line-numbers>
			/* Elemente */
			html, body {...}

			/* IDs */
			#my-id {...}

			/* Klassen */
			.my-class {...}

			/* Pseudo-Klassen */
			div:hover {...}

			/* Attribute */
			div[my-attribut="abc"] {...}

			/* Kombinationen */
			div.my-class#my-id {...}
			</code>
			</pre>
			</section>
			<section>
			<h3>Variablen</h3>
			<pre>
			<code class="css" data-trim data-line-numbers>
			html {
			--my-background-color: #abcdef;
			}

			html div {
			background-color: var(--my-background-color, white);
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Das <code>display</code>-Attribut</h3>
			</section>
			<section>
			<p>block</p>
			<img data-src="/assets/images/css-display-block.svg">
			<ul>
			<li>untereinander angeordnet</li>
			<li>nehmen sich die volle Breite</li>
			<li><code>width</code> und <code>height</code> möglich</li>
			</ul>
			</section>
			<section>
			<p>inline</p>
			<img data-src="/assets/images/css-display-inline.svg">
			<ul>
			<li>Standard bei <code>Custom Elements</code></li>
			<li>nur so groß wie der content</li>
			<li><code>width</code> und <code>height</code> nicht möglich</li>
			<li>nebeneinander angeordnet</li>
			</ul>
			</section>
			<section>
			<p>inline-block</p>
			<img data-src="/assets/images/css-display-inline-block.svg">
			<ul>
			<li>Mischform von <code>block</code> und <code>inline</code></li>
			<li>nur so groß wie der content</li>
			<li><code>width</code> und <code>height</code> möglich</li>
			<li>nebeneinander angeordnet</li>
			</ul>
			</section>
			<section>
			<h3>Das <code>position</code>-Attribut</h3>
			</section>
			<section>
			<p>static</p>
			<img data-src="/assets/images/css-position-static.svg">
			<ul>
			<li>Standard</li>
			<li>Element wird am Ort der Verankerung im HTML dargestellt</li>
			</ul>
			</section>
			<section>
			<p>relative</p>
			<img data-src="/assets/images/css-position-relative.svg">
			<ul>
			<li>Verschiebung zur eigentlichen <code>static</code>-Position, z.B. mittels <code>left: 20px</code></li>
			</ul>
			</section>
			<section>
			<p>absolut</p>
			<img data-src="/assets/images/css-position-absolute.svg">
			<ul>
			<li>relative Verschiebung zum nächsten nicht-<code>static</code>-Parent (sonst <code>window</code>)</li>
			</ul>
			</section>
			<section>
			<h3>Aufgabe</h3>
			<p>Implementiere folgendes Beispiel-Menü</p>
			<iframe data-src="/assets/html/css-menu.html"></iframe>
			</section>
			<section>
			<h3>Lösung</h3>
			<pre>
			<code class="css" data-trim data-line-numbers>
			.menu-item {
			display: inline-block;

			position: relative;
			}

			.menu-item .children {
			display: none;

			position: absolute;
			}

			.menu-item:hover .children {
			display: block;
			}
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="html" data-trim data-line-numbers>
			<script type="text/template">
			<div class="menu">
			<div class="menu-item">Eins</div>
			<div class="menu-item">
			Hover Me!
			<div class="children">
			<div>Item 1</div>
			<div>Item 2</div>
			</div>
			</div>
			<div class="menu-item">Drei</div>
			</div>
			</script>
			</code>
			</pre>
			</section>
			<section>
			<h3>Viewport</h3>
			<pre>
			<code class="html" data-trim data-line-numbers>
			<!DOCTYPE html>
			<html>
			<head>
			<meta charset="utf-8"></meta>
			<meta
			name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
			>
			</head>
			<body>
			...
			</body>
			</html>
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="bash" data-trim data-line-numbers="">
			npm install -g http-server
			cd pfad/zum/projekt
			http-server --port 8080
			</code>
			</pre>
			</section>
			</section>
			</div>
			</div>