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
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
120
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.8k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
880
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
970
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
140
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
Chrome Extension Techniques from Hell
moznion
1
160
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
3
1.9k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.2k
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
160
Vibe Codingをせずに Clineを使っている
watany
17
6k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
GitHub's CSS Performance
jonrohan
1030
460k
Unsuck your backbone
ammeep
670
57k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Automating Front-end Workflow
addyosmani
1369
200k
Fireside Chat
paigeccino
37
3.4k
The Cult of Friendly URLs
andyhume
78
6.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Thoughts on Productivity
jonyablonski
69
4.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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