Master display modes, the position property, z-index, calc/clamp units, tables, lists, and image filters.
display controls how an element participates in layout. block takes full width and stacks. inline flows with text, ignores width/height. inline-block is inline but respects width/height. none removes it from layout entirely.
<!DOCTYPE html>
<html><head>
<style>
.block { display: block; background: #dbeafe; padding: 8px; margin: 4px 0; }
.inline { display: inline; background: #fef3c7; padding: 4px 8px; }
.inline-block { display: inline-block; background: #d1fae5; padding: 8px; width: 100px; text-align: center; }
body { font-family: sans-serif; padding: 16px; }
</style>
</head><body>
<div class="block">Block: takes full width</div>
<div class="block">Block: stacks vertically</div>
<span class="inline">Inline</span>
<span class="inline">flows with text</span>
<span class="inline">ignores width</span>
<br><br>
<span class="inline-block">inline-block</span>
<span class="inline-block">has width</span>
<span class="inline-block">stays inline</span>
</body></html>visibility: hidden hides the element but keeps its space in layout. overflow controls what happens when content is larger than its container: visible (default), hidden (clips), scroll, or auto.
<!DOCTYPE html>
<html><head>
<style>
.visible { visibility: visible; background: #dbeafe; padding: 8px; margin: 4px 0; }
.hidden { visibility: hidden; background: #fef3c7; padding: 8px; margin: 4px 0; }
.gone { display: none; }
.of-box { width: 220px; height: 60px; border: 2px solid steelblue; margin: 8px 0; padding: 4px; font-size: 13px; }
.clip { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }
body { font-family: sans-serif; padding: 16px; }
</style>
</head><body>
<div class="visible">visible</div>
<div class="hidden">hidden — invisible but still takes up space</div>
<div class="gone">display:none — you can not see this</div>
<p style="color:gray;font-size:13px">↑ gap above is the hidden element's space</p>
<div class="of-box clip">overflow:hidden — This text is clipped when it overflows the box boundary right here.</div>
<div class="of-box scroll">overflow:scroll — This text is scrollable when it overflows. The scrollbar always appears.</div>
<div class="of-box auto">overflow:auto — Scrollbar only when needed. This text overflows the box.</div>
</body></html>static is the default. relative offsets from its normal spot without leaving flow. absolute removes it from flow, positioned relative to the nearest non-static ancestor. fixed stays put during scroll. sticky is relative until it hits a scroll threshold.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; font-size: 13px; }
.container { position: relative; border: 2px dashed #ccc; padding: 16px; height: 110px; margin: 8px 0; }
.rel { position: relative; top: 10px; left: 20px; background: #dbeafe; padding: 6px 10px; display: inline-block; }
.abs { position: absolute; top: 8px; right: 8px; background: #fef3c7; padding: 6px 10px; }
.fixed-badge { position: fixed; bottom: 12px; right: 12px; background: steelblue; color: white; padding: 8px 14px; border-radius: 6px; font-size: 12px; }
.scroll-box { height: 90px; overflow-y: scroll; border: 1px solid #ccc; padding: 8px; }
.sticky-h { position: sticky; top: 0; background: #f59e0b; padding: 4px 8px; font-weight: bold; }
</style>
</head><body>
<div class="container">
<span>Normal flow</span>
<div class="rel">relative: 10px down, 20px right</div>
<div class="abs">absolute: top-right of container</div>
</div>
<div class="scroll-box">
<div class="sticky-h">Sticky header — scroll this box</div>
<p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p>
</div>
<div class="fixed-badge">fixed</div>
</body></html>z-index controls which positioned element sits on top. Higher values win. Only works on elements with a position other than static. Each stacking context is independent — edit the values below.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; }
.stack { position: relative; height: 120px; }
.box { position: absolute; width: 100px; height: 60px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; color: white; }
.a { background: steelblue; top: 0; left: 0; z-index: 1; }
.b { background: tomato; top: 20px; left: 40px; z-index: 3; }
.c { background: goldenrod; top: 40px; left: 80px; z-index: 2; }
</style>
</head><body>
<p>Change z-index values to reorder the boxes:</p>
<div class="stack">
<div class="box a">z: 1</div>
<div class="box b">z: 3</div>
<div class="box c">z: 2</div>
</div>
</body></html>calc() computes values from mixed units. min()/max() pick the smallest/largest. clamp(min, preferred, max) constrains a value between a floor and ceiling — great for fluid sizing without media queries.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
div { padding: 8px 12px; border-radius: 4px; font-size: 13px; }
.calc { width: calc(100% - 64px); background: #dbeafe; }
.min { width: min(300px, 80%); background: #d1fae5; }
.max { width: max(150px, 30%); background: #fef3c7; }
.fluid { font-size: clamp(13px, 2.5vw, 22px); background: #fce7f3; }
</style>
</head><body>
<div class="calc">calc(100% - 64px) — mixes units</div>
<div class="min">min(300px, 80%) — never wider than 300px</div>
<div class="max">max(150px, 30%) — never narrower than 150px</div>
<div class="fluid">clamp(13px, 2.5vw, 22px) — resize the preview pane</div>
</body></html>border-collapse: collapse merges adjacent cell borders into one clean line. Alternating row colors and hover states are classic table patterns.
<!DOCTYPE html>
<html><head>
<style>
table { width: 100%; border-collapse: collapse; font-family: sans-serif; font-size: 14px; }
th { background: #1e293b; color: white; padding: 10px 14px; text-align: left; }
td { padding: 8px 14px; border-bottom: 1px solid #e5e7eb; }
tr:nth-child(even) td { background: #f8fafc; }
tr:hover td { background: #f0f9ff; }
</style>
</head><body style="padding:16px">
<table>
<thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Alice</td><td>Designer</td><td>Active</td></tr>
<tr><td>Bob</td><td>Developer</td><td>Active</td></tr>
<tr><td>Carol</td><td>Manager</td><td>Away</td></tr>
<tr><td>Dave</td><td>Developer</td><td>Active</td></tr>
</tbody>
</table>
</body></html>list-style controls bullet markers. object-fit controls how an image fills its box — cover fills and may crop; contain fits the whole image inside. filter applies visual effects like grayscale and blur.
<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; padding: 16px; display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
ul.square { list-style: square; }
ul.none { list-style: none; padding: 0; }
ul.none li { padding: 4px 0; border-bottom: 1px solid #e5e7eb; }
ol.alpha { list-style: lower-alpha; }
li { padding: 2px 0; }
.imgs { display: flex; gap: 8px; flex-wrap: wrap; }
img { width: 80px; height: 80px; border-radius: 6px; border: 1px solid #e5e7eb; }
.cover { object-fit: cover; }
.contain { object-fit: contain; background: #f5f5f5; }
.gray { filter: grayscale(100%); }
.blur { filter: blur(3px); }
</style>
</head><body>
<ul class="square"><li>Square</li><li>Second</li><li>Third</li></ul>
<ul class="none"><li>No bullet</li><li>With border</li><li>Third</li></ul>
<ol class="alpha"><li>Alpha</li><li>Beta</li><li>Gamma</li></ol>
<div>
<p style="font-size:12px;color:#888;margin:0 0 4px">object-fit & filter</p>
<div class="imgs">
<img class="cover" src="https://picsum.photos/seed/listimg/300/200" title="cover" />
<img class="contain" src="https://picsum.photos/seed/listimg/300/200" title="contain" />
<img class="gray" src="https://picsum.photos/seed/listimg2/300/200" title="grayscale" />
<img class="blur" src="https://picsum.photos/seed/listimg2/300/200" title="blur" />
</div>
</div>
</body></html>