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
Formの複雑さに立ち向かう
bmthd
1
930
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
380
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
120
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
GoとPHPのインターフェイスの違い
shimabox
2
210
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
Unity Android XR入門
sakutama_11
0
180
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Navigating Team Friction
lara
183
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Language of Interfaces
destraynor
156
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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