CSS Synthesis Review (III)

1. Three positioning mechanisms: normal flow, floating, absolute positioning

2. Line box: A horizontal box formed by a row, called a row box

3. position(positioning)

• Stattic, elements are generated normally, block-level elements generate a rectangular box, which, as part of the document flow, creates one or more line boxes that are placed in the parent element (default), that is, no positioning, and the element appears in the normal stream (ignoring top, bottom, left, Right or z-index declaration).

• Relative: The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains, and is positioned relative to its original position.

• Absolute: The element is completely removed from the document stream and is positioned for its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box was generated in its normal stream,absolute positioned the element relative to the first parent element other than the static location through "left", "Top", " Right " and " bottom " attributes.

• The fixed: element box behaves similar to setting position to Absolute, except that it is positioned relative to the browser window.

4. Overflow: Specifies what happens when an element overflows the box, with a value of

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/4B/BA/wKiom1QxSnvxWKIIAAFUpncGFVE586.jpg "title=" 1 (1). JPG "style=" float:none; "alt=" wkiom1qxsnvxwkiiaafupncgfve586.jpg "/>

5. Crops an absolutely positioned element, which defines a clipping rectangle. For an absolutely positioned element, the content within the rectangle can be seen, and the content of the clipping area is processed according to the value of the overflow. Value has auto: Do not do any processing, or rect(top,right,bottom,left)

6. vertical-align: Property Sets the vertical alignment of the element's baseline in the row relative to the baseline of the element's row, possibly with the following values:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/4B/BC/wKioL1QxSq-RWSzrAAFARbN_dlk232.jpg "title=" 1 (2). JPG "style=" float:none; "alt=" wkiol1qxsq-rwszraafarbn_dlk232.jpg "/>

7. Z-index: Property sets the stacking order of elements that can be negative, which only works on elements that are not statically positioned.

8. floating: A floating box can move left or right, knowing that its outer edge touches the bounding box of the containing or another floating box.

The Float property defines the direction in which the element floats. Any element in the CSS can float. Floating elements generate a block-level box, regardless of what element the province is.

9. display:none; and visibility: The difference between hidden is that the former no longer occupies space, while the latter still occupies the space of document flow.

10. the inline element sets the display:the width and height can be set after the Inline-block, and when the attribute is set for all elements, it only occupies its own set widths and heights.

11. Pseudo-class, element:link, not accessed; element: visited, accessed; element:hover, hover over element; element:active, mouse After being pressed. The other value is that active has an effect if the active is in the hover after it is both present .

This article is from "Tiger Brother's Blog" blog, please be sure to keep this source http://7613577.blog.51cto.com/7603577/1560741

CSS Synthesis Review (III)