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
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
290
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
CSC509 Lecture 13
javiergs
PRO
0
110
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
130
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
CSC509 Lecture 09
javiergs
PRO
0
140
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.1k
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
180
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
The Invisible Side of Design
smashingmag
298
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Agile that works and the tools we love
rasmusluckow
327
21k
How to Ace a Technical Interview
jacobian
276
23k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
890
The World Runs on Bad Software
bkeepers
PRO
65
11k
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