the standard of the consortium-CSS-(3) box model and line model
1. Visual format models visual formatting model
(1) The mechanism used to process documents and display them on visual media is a set of rules that specify how browsers handle each box.
(2) control the layout of the factors
A. Size and type of box
B. Positioning System positioning Scheme (regular flow, floating and absolute positioning)
C. Relationships between elements in a document book
D. External information (size of viewport, inherent size of picture, etc.)
(3) Interpretation of nouns
A. Element blocksCSS assumes that each element generates box and becomes an element frame containing margin,border,padding, margin, see the box model below
b. Include blocksEach element has a containing block, and the meaning of the containing block is the layout context of the element. Just like the div in the image above contains the block is the body (HTML element in the document flow contains no block, if any, should be the browser bar)
c. Replacement/non-replacement elementsThe replacement element is that the browser determines the concrete display of the element based on the element's label and attributes. An object that is inserted through the CSS content property is called an anonymous replaceable element if the content of the element is included in the document, all rules that are not replacement elements for the replacement element apply equally to the replacement element, with one exception, if width is auto, the element's width is the inherent height of the content, For example, IMG is the original big picture.
(4) block-level elements (Block-level elements) and block boxes (blocks boxes)
Block-level elements are formatted as visible blocks in the source document. The property value for display is Block,list-item, and the table element is a block-level element. As shown in the following figure.
Typically, a block-level element produces a block-level box (block-level box) called the main block-level box (principal Block-level box), which is used to contain the descendant box (descendant boxes) and the contents of the descendant box. The main block-level box can participate in any positioning scheme (positioning scheme).
Note: Some block-level elements, in addition to the main block-level box, may produce additional boxes (additional boxes), such as the display property value of "List-item" element. The resulting extra boxes are used to contain bullets (you can set the extra box with the List-style-position property to be placed in the main block box or outside). Consider the following example
<ul list-style-position= "Inside" >
<li>rod</li>
<li>augmentum</li>
</ul>
<ul list-style-position= "Outside" >
<li>rod</li>
<li>augmentum </li>
</ul>
Ul[list-style-position= "Inside"] {
background:yellow;
list-style-position:inside;
}
Ul[list-style-position= "Outside"] {
background:yellow;
List-style-position:outside;
}
I believe you have seen the above two UL different, for bullets, if the set of List-style-position:outsidede words, the bullets occupied by the box is the box outside the river, not the UL box.
(5) Block container box
In addition to the form box and replaceable element box, a block-level box can also be a block container box, block container box has two functions (can only have one function)
A. Only used to contain other block-level boxes
B. Create an inline formatting context (inline formating context), which is used only to include the inline set box.
Not all block container boxes are block-level boxes. Non-replaceable inline blocks (non-replaced inline blocks) and irreplaceable table cells (non-replaced table cells) are block container boxes, but not block-level boxes. If a block-level box is also a block container box, then we can call this block-level box (block boxes).
Block-level boxes and block container boxes are two parallel concepts, and their relationships are as follows:
6 anonymous block box
If a block container box (such as a block-level box produced by the <div> element in the previous example) contains a block-level box (for example, a block-level box produced by the <p> element in the previous example), then force the Block container box to contain only block-level boxes. The red markings below are anonymous and box-marked places.
Note: When an inline box (inline box) contains a block-level box in the document flow, this inline box (and his ancestors in the same row box [line box]) will be separated by this block-level box (and, of course, the Block-level box, or the folding blank). Or a sibling block-level element [box] that is out of the document stream is broken into two boxes (even if one of the two boxes that is split is empty), the two boxes are distributed on both sides of the block-level box.
(7) line-level elements and inline boxes (inline-level elements and Inline boxes)
Inline-level elements are those that do not form new content blocks in the source document and distribute elements in rows (such as accent text in paragraphs, inline pictures, and so on). The elements of the display property that are "inline", "inline-table", "Inline-block" are inline-level elements.
Inline-level elements produce inline-level boxes (inline-level boxes), and inline-level boxes participate in the layout of formatted contexts (inline formatting context) within the row.
The inline box (inline box) is an inline-level box whose content participates in the layout of the inline context in which he contains the row. An irreplaceable element with display value of "inline" produces a inline box. The inline-level box, which is not an inline box, is called an atomic inline (Class) box (atomic inline-level boxes). The Atomic inline box acts as an integral part of the layout of the inline format context (which cannot be split into multiple boxes across rows).
2. Formatting context
Each element, or each box, will choose the way to render it according to the set display value, different display has different levels: Block-level box (block level) inline-level box (row level), run-in boxes (insert frame CSS3 ), different levels will participate in different contexts (formatting context) to render
(1) BFC block-level format (blocks formatting context) to specify the layout of block-level box rendering
(2) What are the characteristics of BFC:
A. The inner box will be arranged in a vertical direction B. Elements on the same BFC may occur margin collapse C. BFC is a separate isolated container on the page, with exceptions being unaffected d. When calculating the height of the BFC, consider all the child elements that the BFC contains. Even floating elements are involved in the calculation. E. When the element is not a child of the BFC, the floating element height does not participate in the BFC calculation (common box collapse problems)
(3) What elements will produce a new BFC
A. The root element html B. Float element is not none-C. position for absolute or fixed d. Display for Inline-block, Table-cell, Table-caption, Flex, Inline-f Lex E. Overflow not for visible.
(4) What I can do with BFC
A. Clear floating B. Prevent margin folding C. For layout
(5) BFC compatibility
IE6-7 does not support BFC, but instead uses private property haslayout. Performance to see Haslayout and BFC similar, triggering haslayout conditions and BFC similar, in addition to the element to set IE-specific CSS properties zoom:1; Zoom is used to set or retrieve the scaling ratio of an element, with a value of 1 even with the actual size of the element, using zoom can trigger the haslayout without other effects on the element, which is relatively convenient
3. Block Box
In block box, it will be horizontally formatted, vertically formatted
(1) Horizontal formatting
The horizontal portion of the block-level element box = the width of its parent element = Margin-left+margin-right + padding-left+padding-right+ border-left+border-right+ itself width
Note
A. Set padding as auto, all invalid. Only margin and width may be the value of auto for Padding-left/right,margin-left/right,border-left/right,width (below our short level 7 properties)
B. Why is margin-right the remaining width? Because when the Margin-left/right,width three values are set to a fixed width, margin-right is automatically padded according to the width of the containing block.
C. Use margin:0 Auto Center, use this way to center, must be to set the width of the center element, so that the left and right margin values will be equal, resulting in the center, this and Text-align:center can only block-level elements of inline content settings is not the same.
(2) Vertical formatting
Only three properties can be set Auto,height, and Margin-top/bottom. Attention. Here if Margin-top and Margin-bottom are set to auto at the same time, they will not be centered vertically, but the default is zero. Vertical formatting, there is a very important aspect that will cause the vertical adjacent outer margin merging
(3) negative margin
A. Horizontal direction, first look at the page in the following figure show
The second div is margin-left:20px, because there is no fixed box (width value), when the margin-left is positive, the width is actually reduced, reverse also when the width-left is negative, div offset, width increase. The third Div because there is a fixed box, will only occur offset, width will not change, because the width of the parent element will not change.
B. Vertical direction: Moving in the opposite direction
C. Joint use with float
In the case of float, Margin-left:-100%, the element is referred to the first row. The reason for this, I guess is that in the case of floating, when the second row of elements Margin-left is negative and the displacement is already over its width, the second row is already out of float, then the first row of content is covered and the first row of content is overwritten, Because the browser is rendered from top to bottom, it is definitely to overwrite the contents of the previous content. For this situation only to the premise of a row, I tried to mention two rows of the situation, the answer is not. As for the reason, I don't know much about it.
4. Line Box
Each row is called a line Box, and it is made up of many inline-box in this line, and its height can be determined directly by the line-height, and the height of the lines boxes vertically stacked to form the height of the containing Box, That's the height of the div or P tag we saw.
(1) Content area: CSS assumes that each element will generate one or more box, called the element box, the element box Center has the content area, the content area periphery includes the padding,border,margin.
(2) Line spacing
The line spacing is the difference between font-size and line-height and is divided into two halves in the content area.
(3) Inline box
Non-replacement element, inline frame height =line-height.
Replace element, inline box height = content area width (line spacing is not applied to replacement elements).
(4) Row height
The distance between the two lines of text baseline.
(5) Row box
A row has many inline boxes, which contain the highest and lowest points in the line.
(6) Baseline
Different elements have different baseline positions, the entire row box has a baseline, and the position of the elements in the row is based on the baseline alignment.
Reference: Want to clearly understand (i): CSS Visual format model | Box model | positioning Scheme | BFC
