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
480
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
110
SVG Reality
sebdeckers
5
130
About Sebastiaan
sebdeckers
0
130
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
390
Other Decks in Programming
See All in Programming
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
910
Git Lint
bkuhlmann
4
760
Documentation for users with AsciiDoc and Antora
ahus1
0
370
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.2k
Domain-Driven Transformation
hschwentner
2
1.5k
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Fragment Composition of GraphQL
quramy
13
1.5k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
GraphQLとの向き合い方2022年版
quramy
33
12k
Building Applications with DynamoDB
mza
88
5.6k
Git: the NoSQL Database
bkeepers
PRO
423
63k
For a Future-Friendly Web
brad_frost
172
9k
KATA
mclloyd
16
12k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
What's new in Ruby 2.0
geeforr
337
31k
A designer walks into a library…
pauljervisheath
201
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Done Done
chrislema
178
15k
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