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
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
WebDriver BiDiとは何なのか
yotahada3
1
140
技術を根付かせる / How to make technology take root
kubode
1
240
『品質』という言葉が嫌いな理由
korimu
0
160
Ruby on cygwin 2025-02
fd0
0
140
Spring gRPC について / About Spring gRPC
mackey0225
0
220
チームリードになって変わったこと
isaka1022
0
190
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
For a Future-Friendly Web
brad_frost
176
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Code Review Best Practice
trishagee
66
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Thoughts on Productivity
jonyablonski
69
4.5k
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