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
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
止められない医療アプリ、そっと Swift 6 へ
medley
1
150
Le côté obscur des IA génératives
pascallemerrer
0
140
All About Angular's New Signal Forms
manfredsteyer
PRO
0
110
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
2
150
株式会社 Sun terras カンパニーデック
sunterras
0
270
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
160
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
280
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.9k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
139
7.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
It's Worth the Effort
3n
187
28k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Building Applications with DynamoDB
mza
96
6.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Statistics for Hackers
jakevdp
799
220k
A better future with KSS
kneath
239
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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