PHP Work Note 5-css positioning

1.

CSS positioning mechanism

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML.

Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box.

The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

2.

CSS Position Properties

By using the position property, we can select 4 different types of positioning, which affects how the element box is generated.

Position the meaning of the property value:

Static

The

element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

Relative

The

element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Absolute

The

element box is completely removed from the document flow and is positioned relative to 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 it was generated in the normal flow.

Fixed

The element box behaves like the position is set to absolute, but its containing block is the window itself.

3, self-summary

1. An absolutely positioned element can be moved arbitrarily, but a reference object is a relative positioning element , and if a meta element is set to an absolute anchor, if it does not have a corresponding relative positioning element, he will use the browser's window as a reference object
2. Element type: inline element (font itself is not height and width, depends on the content of the width of the height, you can change the row elements to block-level elements,display:block), block-level elements, inline block-level elements
3. Horizontal Center:text-align:center; Vertical Center plus row high line-height:30px;

<1> Children for relative positioning, regardless of the father's position is relative to the Father

<2> Father In addition to static positioning, as long as there are positioning, children are relative to the Father

Static positioning cannot use the properties of Top,left, etc.

PHP Work Note 5-css positioning