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
140
SVG Reality
sebdeckers
5
140
About Sebastiaan
sebdeckers
0
150
Frontend 100
sebdeckers
1
490
Frontend 101
sebdeckers
4
550
Frontend 103
sebdeckers
2
490
Frontend Testing
sebdeckers
3
340
Grunt: The JavaScript Task Runner
sebdeckers
8
410
Other Decks in Programming
See All in Programming
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
850
無関心の谷
kanayannet
0
180
C++20 射影変換
faithandbrave
0
500
A2A プロトコルを試してみる
azukiazusa1
2
880
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
160
GraphRAGの仕組みまるわかり
tosuri13
7
450
Passkeys for Java Developers
ynojima
3
880
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
0
140
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
RailsConf 2023
tenderlove
30
1.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making Projects Easy
brettharned
116
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLとの向き合い方2022年版
quramy
46
14k
Statistics for Hackers
jakevdp
799
220k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Documentation Writing (for coders)
carmenintech
71
4.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