Frontend 102

Transcript

1. 102 Layout Box model Content flow Positioning Weirdness
2. box model
3. box model content box < padding box < border box < margin box
4. box model clockwise from the top top right bottom left img { margin: 10px 5px 0px 20px; }
5. 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; }
6. padding box adds a gap between content and border, makes it easier to click elements button { padding: 20px; }
7. border box width, style, color header { border: 8px solid gold; }
8. adds a gap between border and other boxes img { margin: 25px; } margin box
9. content flow
10. 1. Left to right 2. Top to bottom
11. 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
12. positioning X/Y axis: left to right, top to bottom Reference: static, fixed, relative, absolute
13. weirdness Negative margin Overlapping z-index Cut off overflow