Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frontend 102
Search
Sebastiaan Deckers
April 15, 2013
Programming
3
490
Frontend 102
Sebastiaan Deckers
April 15, 2013
Tweet
Share
More Decks by Sebastiaan Deckers
See All by Sebastiaan Deckers
Commons Host: Building a CDN for the rest of the world
sebdeckers
1
140
SVG Reality
sebdeckers
5
140
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
490
Frontend 101
sebdeckers
4
550
Frontend 103
sebdeckers
2
490
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
Create a website using Spatial Web
akkeylab
0
310
Is Xcode slowly dying out in 2025?
uetyo
1
240
VS Code Update for GitHub Copilot
74th
1
480
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
540
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
590
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
450
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
600
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.7k
GraphRAGの仕組みまるわかり
tosuri13
8
500
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Scaling GitHub
holman
459
140k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Producing Creativity
orderedlist
PRO
346
40k
Building Adaptive Systems
keathley
43
2.6k
Designing Experiences People Love
moore
142
24k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Transcript
102 Layout Box model Content flow Positioning Weirdness
box model
box model content box < padding box < border box
< margin box
box model clockwise from the top top right bottom left
img { margin: 10px 5px 0px 20px; }
content box determined by text or fixed size p {
font-size: 14pt; line-height: 1.5; font-family: "Helvetica Neue"; } img { width: 300px; height: 150px; }
padding box adds a gap between content and border, makes
it easier to click elements button { padding: 20px; }
border box width, style, color header { border: 8px solid
gold; }
adds a gap between border and other boxes img {
margin: 25px; } margin box
content flow
1. Left to right 2. Top to bottom
Floats: easy to abuse, better to avoid Useful mostly for
images in a blog post Absolute/fixed positioning: Choose the top, right, bottom, or left distance from a container or viewport. Take it out of the flow
positioning X/Y axis: left to right, top to bottom Reference:
static, fixed, relative, absolute
weirdness Negative margin Overlapping z-index Cut off overflow