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
140
Frontend 100
sebdeckers
1
480
Frontend 101
sebdeckers
4
540
Frontend 103
sebdeckers
2
480
Frontend Testing
sebdeckers
3
330
Grunt: The JavaScript Task Runner
sebdeckers
8
400
Other Decks in Programming
See All in Programming
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
A New Era of Testing
mannodermaus
2
510
Hermes: Better Performance with Bytecode Translation (React Universe 2024)
tmikov2023
0
100
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
890
Jakarta EE meets AI
ivargrimstad
1
530
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
230
LangChainの現在とv0.3にむけて
os1ma
4
930
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Unsuck your backbone
ammeep
667
57k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Music & Morning Musume
bryan
46
6k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
What's in a price? How to price your products and services
michaelherold
242
11k
A Philosophy of Restraint
colly
202
16k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
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