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
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
17
3.9k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
0
180
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
420
A Gopher's Guide to Vibe Coding
danicat
0
200
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
4
670
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
Rancher と Terraform
fufuhu
2
180
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Visualization
eitanlees
147
16k
Making Projects Easy
brettharned
117
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Done Done
chrislema
185
16k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
4 Signs Your Business is Dying
shpigford
184
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Statistics for Hackers
jakevdp
799
220k
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