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
500
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
150
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
500
Frontend 101
sebdeckers
4
550
Frontend 103
sebdeckers
2
490
Frontend Testing
sebdeckers
3
350
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
GitHub's CSS Performance
jonrohan
1031
460k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A designer walks into a library…
pauljervisheath
207
24k
Code Reviewing Like a Champion
maltzj
524
40k
Code Review Best Practice
trishagee
69
19k
Adopting Sorbet at Scale
ufuk
77
9.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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