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
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
540
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
1.1k
PsySHから紐解くREPLの仕組み
muno92
PRO
1
530
AI時代のプログラミング教育 / programming education in ai era
kishida
23
21k
Let's Take a Peek at PHP Parser 5.x!
inouehi
0
110
DataStoreをテストする
mkeeda
0
180
ローコードサービスの進化のためのモノレポ移行
taro28
1
340
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
380
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
220
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
160
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Docker and Python
trallard
44
3.3k
Navigating Team Friction
lara
184
15k
Music & Morning Musume
bryan
46
6.4k
KATA
mclloyd
29
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
A designer walks into a library…
pauljervisheath
205
24k
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