First, the basic concept
(A) visual formatting model Visual formatting model (visual formatting model): a mechanism for CSS, which specifies how the page layout of multiple boxes
css a mechanism, visual formatting model category belonging css
How multiple box layout, each element will be generated in HTML page box
How these boxes are arranged, they affect each other, defined by the visual formatting model
Visual formatting model is a very complex mechanism, contains intricate CSS specification
Since almost all used in the area of the page is divided into blocks of boxes, therefore, this chapter is still involved only block boxes
(B) the viewport viewport (viewport): visible window, generally refers to the viewable area of the browser
Viewport size is limited only by the visual impact of the size of the browser window, and unrelated to the content
When the size of the page content exceeds the viewport size, browser scroll bar will appear
(Iii) block comprises a block containing (containing block): each element has a block comprising, it refers to a region of the element placed in the page
Typically, the element comprising a block of its parent element cartridge content (content-box)
Block comprising: a block comprising initializing (initial containing block) an initialization block is a region comprising a browser automatically generated before rendering
Comprising a block (containing block): each element has a block comprising, it refers to a region of the element placed in the page
Typically, the element comprising a block of its parent element cartridge content (content-box)
The root element is initialized containing block comprising a block (initial containing block)
Second, the positioning system overview
(A) What is the visual formatting model specifies positioning system, positioning system, a total of three types: normal flow (normal flow) float (float) Absolute positioning (absolute positioned)
Any element, which must belong to a different positioning systems A positioning system, comprising the size and position of the element have some differences in the block (b) is a positioning system position determining CSS property, the default value is a static float CSS property default value is none
Third, the box model positioning system ,
1. Effect cartridge positioning system model equal to the final dimensions of the box; positioning system is equal to the size of the box
2. The box model size: margin: px, em,%, auto; border: px, em; padding: px, em,%; width: px, em,%, auto; height: px, e
3. Size value set, irrespective of the positioning system
4. Block size is the size of the percentage comprising, margin, padding, the percentage of width: the width of the block containing a percentage; percentage of height (rarely used)
5. Size affected positioning system
6. Different positioning systems, auto counting rules are not the same
Fourth, the conventional flow
(A) the normal stream
Conventional flow, also known as ordinary flow, document flow, ordinary document flow
normal flow is the most common positioning system, all elements are conventional flow positioning default state
auto value (ii) box model
Dimension of the regular stream cartridge in the horizontal direction, must be equal to contain the width of the block
margin is auto: 0px; height to auto: adaptation elements height
in the horizontal direction: the size of the regular stream cartridge in the horizontal direction, must be equal to contain the width of the block, and if not , then forcibly set to auto margin-right
vertical: margin for the auto: 0px; height to auto: adaptation elements height
five, the position of the box
Box placed successively in a vertical direction comprising a block, a box placed in the vertical direction are sequentially containing block.
Sequentially placed: in the writing order from top to bottom of HTML elements placed
successively placed: in the writing order from top to bottom of the HTML element placed
in the vertical direction, if the two adjacent margins, merge the (folding)
vertical direction: horizontal direction from the outside does not merge
margins adjacent: no border between the two margins, padding and content
combined: taking the maximum are positive, taking the smallest are negative, a positive and a negative phase of the plus
left floating boxes arranged in the left direction
and right direction to right floating box
floating top edge of the box can not be higher than a top edge of a box
if the residual space can not float down box, the box is moved downward until sufficient comprising the space can accommodate the box, and then moved left or right
six floating
When the float element attribute values to left or right, an element belonging to float position
Seven, when the normal flow meets float
(A) normal flow mixing box and placed in a floating box
When placed in a floating box, the box to avoid the conventional flow
normal flow when placed in the box, ignoring the floating box
(ii) clear float
To remove a floating element, allowing the element in the display, appears below the floated element
Clear: none (do not clear the float) / left (left to clear floating elements placed in the box below left floating) / right (Clear floating right, display element) / both (clear floating right under the right floating box, placed below the box element floating)
the Clear both: to use the value of the last child element of the parent element height prevents collapse
VIII box the relative position
Relative position refers to a position relative to the box positioned in the original system, the position property relative to the box, to enable the relative location
value when static: static position, a position in the original cassette positioning system
value of relative when: the relative position, the position of the box with respect to the original offset
value of absolute time: is the absolute position (absolute positioning)
value is fixed: a fixed position (absolute positioning)
nine, absolute positioning Overview
When the floating element is set to absolutely positioned elements only belongs to a positioning system
if the element is set to absolute positioning, float property will be forced to none
will not affect any other elements absolutely positioned elements on other elements, absolute positioning elements of any impact
absolute positioning element's position, by left, top, right, bottom set
absolute positioning elements comprise blocks: generally, elements in a block containing the contents of the box of its parent element (content-box), the absolute except for the positioning element
X. absolute positioning position and size
(A) the position of the box
Absolute positioning, the position of the box by the left, top, right, bottom four properties determined, which represents the box from the edge of the range block comprises
auto value (B) of the box
In most cases, the cassette auto value calculation rules and the same floating box, the small number of cases, the cassette auto value need to adapt the position of the box
XI stack level
Level stack (stack level), it determines who is displayed on the front display elements who after
Generally, the higher the level of the stack, the front display
may be provided by elements stacked z-index attribute level
element not used for the static positions
Do not use z-index
twelve, block-level formatting context
Full Block Formatting Context, referred to the BFC, which is an independent rendering area, which has been specified in this region, the layout of the conventional stream chunks cartridge which is an independent rendering area, which has been specified in this region, the normal stream block boxes the layout of
a conventional cartridge stream block in the horizontal direction, the block must support full contain
conventional cartridge stream block placed sequentially in the vertical direction block comprising
a conventional cassette when the stream block seamless adjacent margins, merge is performed margins
normal flow block automatic height and placement of the box, ignoring floats
Bfc render region: BFC rendering area: this area is created by an HTML element, the following elements are created in the interior region of BFC: root element, floating and absolutely positioned elements, overflow does not visible cassette block is equal to the
different regions BFC, while rendering them non-interfering
create elements of the BFC, isolated from its internal and external links, the inside to the outside does not affect the rendering
create elements BFC, its height needs to be calculated automatically floating element
creating elements BFC, its borders and does not overlap with the floating element
created BFC elements will not be child elements and its outer From the merger
thirteen, elastic layout
A box, if it is set to display property flex, the cartridge box becomes elastic (elastic container), all the child elements of the box, Item automatically becomes elastic. Flexible pouch according to its own positioning system are arranged, the influence of the resilient elastomeric project layout only box elastic
properties:
flex-direction: Change the direction of the spindle
row row default
row-reverse reverse spindle from right to left
column by column from the arrangement down the spindle
column-reverse shaft from the press
justify-content: Change the spindle on its way
flex-start starting a spindle arranged Default
flex-end aligned spindle end
center aligned with the center line of the spindle
Space-between left aside program, intermediate distribution mean
The average distribution of space-around all items
align-items: Change side shaft alignment
Default stretched stretch
flex-start aligned with the start point side shaft
flex-end side shaft end aligned
flex-center side of the shaft centerline aligned
flex-wrap
wrap (wrap)
nowrap (does not wrap)
align-content