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
Kiroで始めるAI-DLC
kaonash
2
510
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
コンテキストエンジニアリング Cursor編
kinopeee
1
740
CSC305 Summer Lecture 12
javiergs
PRO
0
130
RDoc meets YARD
okuramasafumi
4
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
3
1.1k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
160
個人軟體時代
ethanhuang13
0
290
Design Foundational Data Engineering Observability
sucitw
2
130
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
140
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rails Girls Zürich Keynote
gr2m
95
14k
Why Our Code Smells
bkeepers
PRO
339
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Invisible Side of Design
smashingmag
301
51k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The World Runs on Bad Software
bkeepers
PRO
70
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
A better future with KSS
kneath
239
17k
BBQ
matthewcrist
89
9.8k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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