Front-end important box model floating anchor block-level elements, row elements 7.9

1, block-level elements of the characteristics:

(1) The contents of block-level elements, or background images, are displayed by default in the upper left corner of the block
(2) block-level elements, which, by default, occupy a single line.

Commonly used block-level elements: Div, p, H1-h6, HR, ul Li, Ol Li, table, body ...

2. Float: float

Role: by floating, let block-level elements to achieve side-by

Float:left or right

Note: If the block on the left or right side of the div is floating, it will have an effect on the Div, and you need to clear the floating

Clear float: clear:left (clears the floating of the left Div) or right (clears the floating of the div on the side) or both (clears both sides of the float)

Simple description: Want to row on the use of floating (float:left), want to Bhakta to clear floating (directly with the clear:both can, without tube around)

3. Box Model:

(1) Border: border
Border-top: Top Border
Border-left: Left Border
Border-right: Right Border
Border-bottom: Bottom Border

(2) padding: The inner margin (the spacing between the text in the box and the border) has 3 kinds of wording

The first kind: up and down around padding:10px;
The second kind: up and down about padding:10px 20px;
The Third Kind: upper right lower left padding:10px 20px 10px 15px;

(3) margin: margin (border spacing outside the border) there are 3 ways of writing

The first kind: up and down around margin:10px;
The second kind: up and down about margin:10px 20px;
The Third Kind: upper right lower left margin:10px 20px 10px 15px;

Note: When the width is set, the padding will open the box, at which point the size of the box can be maintained by reducing the width and height values.

　*{padding,margin:0px;} : All labels in the default Web page are spaced 0 inside and outside.

4, the characteristics of the elements in the line:

(1) By default, not affected by height, Width property

(2) does not occupy a full line

Common inline elements: span (for style settings for a section of text), a (link)

"Remarks" Display:block; To turn inline elements into block-level elements

5. Absolute positioning & relative positioning:

(1) absolute positioning : position:absolute;

When a block-level element is set to absolute positioning, it is out of the document flow, and the float does not affect it.

At this point, set top, left, right, bottom, which is the distance to the form

(2) Relative positioning: position:relation;

When a block-level element is set to relative positioning, it is not detached from the document stream, and the float has an effect on it.

At this point, it is set to top, left, right, bottom, which is the distance from the upper container.

　　　　"Note" When a block-level element occupies a position in front of a relative position, the actual distance = set distance + placeholder block-level element width or height

"Please practice a lot, combine floating float, clear the floating clear, absolute and relative positioning"

Front-end important box model floating anchor block-level elements, row elements 7.9