Level 1 - Week 6

Transcript

1. </> wiggywebmasters.com
2. Blocks, Inlines & Positioning
3. Blocks and inlines Block level tags - take up the entire width of thier container Examples: div, p, h1 to h6 Inline level tags - flow with the surrounding text Examples: span, strong, em, img
4. Making a block level tag inline div { display: inline; }
5. Making an inline level tag act like a block span { display: block; } ! inline-block makes the tag flow like an inline tag, but keeps other aspects of a block level tag
6. Sizing Box that is 300px wide by 400px high div { width: 300px; height: 400px; } ! the default size of all elements is just big enough to hold its contents
7. Change how the size is calculated div { box-sizing: content; /* also border or padding */ }
8. Floating div { float: left; /* or right */ }
9. Positioning div { position: relative; width: 300px; height: 400px; } ! also absolute or fixed
10. Positioning div { position: relative; width: 300px; height: 400px; top: 10px; left: 10px; } ! also bottom / right