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
130
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
400
Other Decks in Programming
See All in Programming
Vibe Coding の話をしよう
schroneko
12
3k
趣味全開のAITuber開発
kokushin
0
200
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
160
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.7k
Java 24まとめ / Java 24 summary
kishida
3
500
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
6.2k
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
190
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.5k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
690
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
110
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
160
Make Parsers Compatible Using Automata Learning
makenowjust
2
5.4k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
For a Future-Friendly Web
brad_frost
176
9.7k
4 Signs Your Business is Dying
shpigford
183
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Cult of Friendly URLs
andyhume
78
6.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Being A Developer After 40
akosma
91
590k
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