CSS Basics 2

Standard Flow (normalflow)

The default display of elements is displayed in the standard flow mode
Block-level element default Exclusive Line display = = = "Standard flow display mode
The inline element displays = = = on one line how standard flow is displayed

Float (float)

You can have block-level elements appear on one line.
The element does not occupy a position after setting the float (off-label)
Allows for pattern transformation
Sets a floating element that affects the elements that follow it

Attention:
Let the block-level elements appear on one line using float!
If you want to implement a schema conversion, use display.

The initial effect of the float:
? resolve text picture wrapping effect. "Wrapping"
Text is not affected by floats.

About layouts: Holy Grail layout double-wing layout flow layout

Clear Floating

Clear float refers to the effect of clearing floating on the layout of a page.

Parent box does not have a fixed height "must condition"
All child boxes in the parent box are set to float "must condition"

How to clear float:

Clear:left| Right| Both

set the Overflow:hidden for the parent element without height ;

Attention:
If the parent element has positioned elements, it is best not to use overflow:hidden;

Use pseudo elements to clear floating

Positioning:

Reflects the hierarchical relationship between elements.

Positioning function:
Implementing moving elements using positioning

Positioning classification:
? static positioning (statics)
? Absolute positioning
? relative positioning
? fixed positioning

Static positioning

position:static; ===> static positioning

static positioning = = "Standard flow element display mode
Static positioning cannot implement moving element positions.

Absolute positioning

Position:absolute; ==> an absolutely positioned element

Absolute positioning of element positioning features:
If an element has an absolute position set, if its parent element is not positioned, the absolutely positioned element is positioned as a datum in the upper-left corner of the browser (body), and if the parent element of the absolute location sets a location other than static positioning, Then the absolutely positioned element is positioned as a datum in the upper-left corner of the parent element.

Absolutely positioned elements do not occupy a position
Element de-labeling with absolute positioning
Absolute positioning allows for pattern transformation
Absolute Positioning: box pressure box effect.

Relative positioning

Position:relative = = = ="Relative positioning

Relative positioning of element positioning features:

? The element with relative positioning can only be positioned relative to its own position.
? Relatively positioned elements are not de-marked, occupying a position
? Relative positioning does not enable schema conversion of elements
The son of an absolute father.

Fixed positioning:

position:fixed; ===> fixed positioning

Fixed positioned elements only look at the top left corner of the browser for the Datum set positioning
Fixed positioning element off-label not occupying position
Fixed positioning allows for mode conversion

The absolutely positioned elements are centered in the display:

Box Center display features: margin:0 auto; ===> standard box with center display

How the absolutely positioned box is centered:
The general left of the width of the parent element is moved first by left:50%;
By setting Margin-left:- The element itself is half the width ;

tags contain specifications

Heading labels cannot be placed in paragraph labels

The paragraph tag cannot contain Div

The paragraph label cannot contain a list

Inline elements are best not to contain other elements "inline elements can contain inline elements"

Web page Layout specification , avoiding off-label flow

The standard flow layout is preferred during page layout.

? then consider using floating

? Last use positioning

In the process of element mode transformation, display must be used.

vertical-align The vertical center of the image with the row-high fit.

How page elements are hidden:

Overflow:hidden; will be out of part hidden
Display:none; Element hiding does not occupy position
Display:block; Element display

Visibility:hidden; Element hiding occupies position

How to remove Logo content:

to set the logo text-indent: -2000px;

paddding mate overflow:hidden Implement remove content

CSS Basics 2