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
540
Frontend 103
sebdeckers
2
480
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
400
Other Decks in Programming
See All in Programming
SwiftUI Viewの責務分離
elmetal
PRO
2
280
Swift Testingのモチベを上げたい
stoticdev
2
150
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.8k
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
120
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
KATA
mclloyd
29
14k
It's Worth the Effort
3n
184
28k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Adopting Sorbet at Scale
ufuk
75
9.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Site-Speed That Sticks
csswizardry
4
410
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
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