First, the basic concept
- Visual formatting model (Visual Formatting Model): CSS is a mechanism that specifies how the page layout of multiple boxes
- Visual formatting model: is a very complex mechanism, contains intricate CSS specification; course of this chapter from a practical point of view, only to learn the core knowledge in the area of the page is divided when required; due to divide the page area almost all use of a block box, therefore, this chapter is still involved only block boxes
- Boxes how multiple layouts: the HTML in each element in the page will generate box; how these boxes are arranged, affect each other, defined by the visual formatting model.
- Mainly by two factors : the box-shaped mold element; Buter elements.
4.
Second, the viewport
- Viewport: visible window, generally refers to the size of the viewable area of the browser (viewport window size is limited only by the visual impact of the browser, and content-independent; page content when the size exceeds the size of the viewport, the browser will scroll bar)
- Block comprising : each element has a containing block, which is the area placed in the page elements; Typically, a block containing the content elements of its parent element cartridge (content-box); root element containing block comprising initialization block (initial containing block).
2.
Third, the positioning system overview
Third, 1 , predetermined visual formatting model, a total of three positioning system: regular stream (normal flow); float (a float); Absolute positioning (absolute positioned)
2 , any element, must belong to one of the positioning system; different positioning systems, the size and position of the element comprising blocks have some differences.
Positioning system to determine:
Fourth, the box model and positioning system
= Ruler box model box cassette position positioning system =
Positioning Systems on the box model.
And the size of the model: margin: px, em,%, auto.
Border : px, in.
Padding：px、em、%、auto。
Width：px、em、%、auto。
Height：px、em、%、auto。
Size value set, irrespective of the positioning system.
Size is the percentage of the block size comprises: margin , padding, the percentage of width: the width of the block containing percentage : height percentage rarely used.
Model size -auto : size affected the positioning system, the different positioning systems, auto counting rules are not the same
Fifth, conventional flow
Regular stream: also known as ordinary flow, document flow, ordinary document flow; flow is the most common conventional positioning system, all elements of default are conventional flow positioning
Size boxes on a conventional horizontal flow, must be equal to the width of the block comprising
The horizontal direction: the size of the conventional horizontal flow box, must be equal to the width of the block comprising; if not, then forcibly set to auto margin-right
Box position: the box in the vertical direction are sequentially placed blocks comprising: sequentially placing: the writing order from top to bottom display HTML elements; cassette occupies in the block comprising the overall dimensions of the box size is
The vertical direction, if the two adjacent margins, merge the (folding)
Vertical direction: the outside in the horizontal direction from not merged
Margin neighbor: there is no border between the two margins, padding, and content
Merge : taking the maximum are positive, taking the smallest are negative, a negative one, the addition
Sixth, floating
When the float element attribute values to left or right, the positioning element belonging to float, float can not be inherited; none default value; left left floating; right floating right.
| Attributes |
Normal flow |
float |
| Margin-left：auto |
Try stays full block comprising |
0px |
| Margin-right：auto |
Try stays full block comprising |
0px |
| Margin-top：auto |
0px |
0px |
| Margin-bottom：auto |
0px |
0px |
| Width：auto |
Try stays full block comprising |
Adapt content width |
| Height：auto |
Try stays full block comprising |
Adapt content width |
Floating box location:
- Left floating box-left direction
- Floating right up to the right box arrangement
- Floating the top edge of the box can not be higher than the top edge of the box on a
- If the remaining space can not float down box, the box is moved downward until enough space can be provided
- Receiving cassette and then moved left or right
The normal stream float met:
Conventional flow mixing box and placed in a floating box
- 1. float when placed in the box, the box to avoid the conventional flow
- 2. The normal flow when placed in the box, the box floating ignore
- 3. Automatic calculation of the height of the box normal flow, ignoring the floating box - Collapse height
3.
Clear float
To remove a floating element, allowing the element in the display, it appears below the floating element
Use clear for the last child element: both, to prevent the collapse of the height of the parent element
The Clear : can not be inherited; the default value none
Value: none does not clear float;
Left : Clear left floating elements placed in the box below left floating
right : the right to clear floating elements placed at the bottom right-floating box
both- : Clear floating around, elements placed beneath the floating box
The relative position of the box:
Relative position refers to a position relative to the box positioned in the original system
The box position property to relative, to enable the relative positions
Position : not inherited, the default value is static;
Value: static: the static position, position in the box under the original positioning system
Relation : relative position, offset with respect to the box original position
Absolute : absolute position
Fixed : a fixed location
The Position : Relation: by left, top, right, bottom disposed offset
When the floating element is set to absolute positioning:
An element: float: left; position: absolute; only element belongs to a positioning system
If the element is set to absolute positioning, float property will be forced to none
Absolutely positioned elements will not have any impact on any other element
May be set by a left, top, right, bottom
Absolute positioning elements comprise blocks
Typically, the element comprising a block of its parent element cartridge content (content-box)
Absolutely positioned elements except
Absolute positioning, the position of the box by the left, top, right, bottom four attributes determined; they represent the cassette from the edge of the range block comprises
| Attributes |
float |
| margin-left:auto
|
0px
|
| margin-right:auto
|
0px
|
| margin-top:auto
|
0px
|
| margin-bottom:auto
|
0px
|
| width:auto
|
Adapt content width
|
| height:auto
|
Adapt content width
|
The small number of cases, the cassette auto value need to adapt the position of the box
Stacking level: It determines who display elements in the front who display; Typically, the higher the level of the stack, the front display; the z-index property sets the level of the stack elements;
index-Z ; not inherited; default auto;
Value: auto: automatic, usually, on the order written element of a front display
Value: manually set the stack level, high-level stacking front display elements
Note that when using the z-index properties: not a static element position; try not to use the z-index