box model, document flow

Box model

One, the area in the box

The main attributes in a box are 5: width, height, padding, border, margin.

Width is the meaning of "breadth", which is the width of the content in CSS, not the width of the box.

Height is a "high" meaning, the height of the CSS refers to the level of the content, not the height of the box

Padding is the meaning of "inner margin".

Border is the "border"

Margin is "margin"

Ii. Recognition of padding

The background color is filled into the padding, the padding area has a background color, and background-color fills all areas within the boder.

Padding there are two kinds of writing, a small attribute, the other is a comprehensive writing, the comprehensive way to use a space separated. Order is upper right down left

When writing padding, use small attributes to cascade large attributes

For example: padding:20px;

padding-left:30px;

Third, border

Border is the border. The border has three elements: thickness, linetype, color.

If the color is not written, the default is black. The thickness and linetype do not appear to be out of bounds. (color, linetype indispensable)

The border attribute can be disassembled with two major ways to disassemble it:

1) Disassemble by 3 elements

border-width: 10px; → Border width

Border-style: solid; → Linetype

border-color: red; → Color.

Equivalent to: border:10px solid red;

2) split by direction:

By direction: Border-top, Border-right, Border-bottom, Border-left

In the direction can also be another layer, that is, each direction of each element is disassembled. Such as:

border-top-width:10px;

Standard document Flow

1) folding of blank folded lines

Automatically wraps when there is not enough space behind to drop itself

2) Document flow in accordance with the bottom, height is not aligned;

First, block-level elements and inline elements

Tags are divided into block-level elements and inline elements based on the flow of documents.

1) block-level elements

Occupy a line, cannot be tied to any other element

Can accept wide, high

If you do not set the width, the width will default to 100% of the father.

2) in-line elements

Parallel to other inline elements

Cannot set width, height. The default width is the width of the text.

According to the display content is divided into: text level, container level.

Text level: P, span, a, B, I, U, EM

Container level: Div, H Series, Li, DT, DD

All text-level tags are inline elements, except that p,p is a text level, but is a block-level element.

All container-level labels are block-level elements.

Second, block-level elements and in-line element interchange

Through display to convert each other

Display:inline converts the inner element of a row.

At this point the div can not set width, height;

At this point, the div can be side-up with others

Display:block converted to block-level elements.

At this point the element can be set width, height

At this point the element must occupy a line, and no one else can side with him.

If the width is not set, the father will be full.

Out of standard document flow

There are three ways to get an element out of the standard document flow in CSS:

1) Floating

2) Absolute Positioning

3) Fixed positioning

First, floating

1) floating will leave elements out of the standard document stream, not constrained by standard document flow.

2) floating elements will snap to each other

3) Floating elements have a character surround effect

Note: The word circumference can only be the effect of Chinese characters, English character numbers do not!

Although the div is floating, it can block the p tag but can't stop the contents of P

Stress: to have floats floating.

4) The floating element will shrink

Shrink: A floating element that, if not set width, is automatically shrunk to the width of the text (which is very similar to the inline element).

Second, the floating clearance

To clear floating methods:

1) Add height to the ancestor element of the floating element

If an element is to float, its ancestor elements must have a height.

As long as it floats in a box with height, the float will not affect the trailing elements. So it is to clear the impact of floating.

Adds height to the ancestor element of the previous floating element, clearing the image behind the floating pair.

2) Clear:both

Clear is cleared, both refers to the left float, right float to clear. It means: Clear the influence of others on me.

Note: This method has a bug and the margin will expire after clear:both.

3) partition method

Insert a div in the middle of the two floats to separate and clear the floating clear:both.

Interior Wall Method: the div block is inserted behind the floating element, that is, the floating element inside the parent element.

"Inner Wall Method": Browser rendering mechanism interior wall div setting properties Clear:both You can set a height for your father.

Note: The element that is off the mark is not able to get the parent element out of height! The height of the show is false.

Two p are floating, so the div cannot be stretched out high. Adding an inner wall at home will allow the div to be stretched to the height of the son.

4) Overflow clear float: overflow:hidden

Overflow when the content of a layer exceeds the range that the layer can accommodate:

The size of the visible layer will be displayed.

Hidden hiding content beyond the layer size

Scroll add scroll bars regardless of whether the content is outside the range of the layer

Auto Displays scroll bars only when the content is outside the range of the layer

A father can not be his own floating son, to support the height. But just add overflow:hidden to the father; Then the father would be able to get high by his son. This is a folk prescription.

When developing, the partition method and overflow concealment are all possible.

box model, document flow