public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace ascii box-model with diagram, expand explanation

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 10:59:00 +02:00
parent fb361a2854
commit b3c0994b7e
3 changed files with 64 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
slides/223015c/02-netzwerke-protokolle-css.md
View File

@@ -2175,22 +2175,18 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
Jedes HTML-Element ist eine rechteckige **Box**. Jedes HTML-Element ist eine rechteckige **Box**.
**Schichten innen → außen:** **Schichten innen → außen:**
│ │ ┌─────────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌─────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └─────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
```
Jedes Element ist eine Box.
<!--
SPEAKER NOTES:
- **content** – Inhalt (Text, Bild) - **content** – Inhalt (Text, Bild)
Das Box-Modell ist fundamental. - **padding** – Innenabstand
- **border** – Rahmen
- **margin** – Außenabstand
<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>
<!--
SPEAKER NOTES:
Das Box-Modell ist fundamental.
Jedes Element ist eine Box. Von innen nach außen: Jedes Element ist eine Box. Von innen nach außen:

53
slides/223015c/assets/demos/box-model-diagram.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Box-Modell Diagramm</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 40px; display: inline-block; box-sizing: border-box; }
.layer {
padding-top: 38px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
position: relative;
border-radius: 4px;
}
.layer::before {
position: absolute;
top: 8px; left: 14px;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.margin { background: #fde68a; }
.margin::before { content: "margin"; color: #92400e; }
.border { background: #fca5a5; }
.border::before { content: "border"; color: #991b1b; }
.padding { background: #86efac; }
.padding::before { content: "padding"; color: #166534; }
.content {
background: #93c5fd;
width: 260px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
color: #1e3a8a;
font-weight: 700;
font-size: 1.2rem;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="layer margin">
<div class="layer border">
<div class="layer padding">
<div class="content">content</div>
</div>
</div>
</div>
</body>
</html>

BIN
slides/223015c/assets/demos/box-model-diagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB