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
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
280
CDK引数設計道場100本ノック
badmintoncryer
2
460
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
200
Porting a visionOS App to Android XR
akkeylab
0
670
20250708_JAWS_opscdk
takuyay0ne
2
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
340
Hack Claude Code with Claude Code
choplin
6
2.5k
NPOでのDevinの活用
codeforeveryone
0
900
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
240
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1k
Featured
See All Featured
Done Done
chrislema
184
16k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Building Adaptive Systems
keathley
43
2.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Thoughts on Productivity
jonyablonski
69
4.7k
A better future with KSS
kneath
238
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Automating Front-end Workflow
addyosmani
1370
200k
Git: the NoSQL Database
bkeepers
PRO
430
65k
A Tale of Four Properties
chriscoyier
160
23k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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