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
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
180
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
TokyoR#119 bignners session2 Visualization
kotatyamtema
0
130
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
440
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.4k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.5k
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
900
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
830
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
330
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
670
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
1
550
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Done Done
chrislema
185
16k
Embracing the Ebb and Flow
colly
88
4.8k
KATA
mclloyd
32
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Designing for Performance
lara
610
69k
GitHub's CSS Performance
jonrohan
1032
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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