![CSS Shapes (Text Wrap)
shape-outside
Values: none, circle(), ellipse(), polygon(), url(),
[margin-box | padding-box | content-box ]
Changes the shape of the text wrap to a circle or ellipse, a
complex path, or based on transparent areas in an image
shape-margin
Values: length, percentage
Specifies an amount of space to hold between the image and the
wrapped text](https://image.slidesharecdn.com/lwdch15floating-201029020647/85/Chapter-15-Floating-and-Positioning-8-320.jpg)
Chapter 15: Floating and Positioning
- 2. OVERVIEW β’ Understanding normal flow β’ Floating elements to the left and right β’ Clearing and containing floated elements β’ Text wrap shapes β’ Positioning: Absolute, relative, fixed
- 3. Normal Flow In the normal flow, elements are laid out from top to bottom in the order in which they appear in the source and from left to right (in left-to-right reading languages).
- 4. Floating float Values: left, right, none Moves an element as far as possible to the left or right and allows the following content to wrap around it: img { float: right; }
- 5. Floating (contβd) β’ Floated elements are removed from the normal flow but influence the surrounding content. β’ Floated elements stay within the content area of the element that contains it. β’ Margins are always maintained (they donβt collapse) on all sides of floated elements. β’ You must provide a width for a floated text element (because default width is auto). β’ Elements donβt float higher than their reference in the source.
- 6. Clearing Floated Elements clear Values: left, right, both, none Prevents an element from appearing next to a floated element and forces it to start against the next available βclearβ space img { float: left; margin-right: .5em; } h2 { clear: left; margin-top: 2em; } (The h2 is βclearedβ and starts below the floated element.)
- 7. Floating Multiple Elements β’ When you float multiple elements, browsers follow rules in the spec to ensure they donβt overlap. β’ Floated elements will be placed as far left or right (as specified) and as high up as space allows.
- 8. CSS Shapes (Text Wrap) shape-outside Values: none, circle(), ellipse(), polygon(), url(), [margin-box | padding-box | content-box ] Changes the shape of the text wrap to a circle or ellipse, a complex path, or based on transparent areas in an image shape-margin Values: length, percentage Specifies an amount of space to hold between the image and the wrapped text
- 10. Positioning position Values: static, relative, absolute, fixed, sticky Indicates that an element is to be positioned and specifies which positioning method to use top, right, bottom, left Values: length, percentage, auto Offset properties that provide the distance the element should be moved away from that respective edge
- 11. Types of Positioning β’ Static: The default position in the flow β’ Relative: Moves the element relative to its original position β’ Absolute: Removes the element from the flow and places it relative to the viewport or other containing element β’ Fixed: Element stays in one position relative to the viewport β’ Sticky: Element starts in the flow but stays fixed once it scrolls to a particular position relative to the viewport
- 12. Relative Positioning β’ Moves the element relative to its original position β’ The space it originally occupied is preserved. em { position: relative; top: 2em; /* moves it down */ left: 3em; /* moves it right */ background-color: fuchsia; }
- 13. Absolute Positioning β’ Moves the element relative to the viewport or containing block element β’ The space it originally occupied is closed up. em { position: absolute; top: 2em; left: 3em; background-color: fuchsia; }
- 14. Containing Blocks β’ A positioned element serves as a containing block (or positioning context) for the elements it contains. β’ If a positioned element has an ancestor that has its position set to relative, absolute, or fixed, then its position will be relative to that containing block element. β’ If a positioned element is not contained within another positioned element, then it is placed relative to the initial containing block (the html element) and the viewport.
- 15. Containing Blocks (contβd.) p { position: relative; padding: 15px; background-color: #F2F5D5; border: 2px solid purple; } em { position: absolute; top: 2em; left: 3em; background-color: fuchsia; } The relatively positioned p element acts as a containing block for the em element.
- 16. Specifying Position β’ Position can be specified in length measurements (like pixels) or percentages. β’ The measurement moves it away from the positioning offset property provided (i.e., top: 200px; moves the element DOWN from the top edge). β’ Be careful not to overspecify. Two offset properties are usually enough.