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
rage against annotate_predecessor
junk0612
0
170
Laravel Boost 超入門
fire_arlo
3
220
旅行プランAIエージェント開発の裏側
ippo012
2
930
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
楽して成果を出すためのセルフリソース管理
clipnote
0
190
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Agile that works and the tools we love
rasmusluckow
330
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
The Language of Interfaces
destraynor
161
25k
For a Future-Friendly Web
brad_frost
180
9.9k
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