1. html rendering process
According to the tree structure of the document directory, starting from the root node, from the parent element to the child element, and then to the next parent element to the child element
2. The calculation process of CSS property values
The calculation process of attribute value from scratch. Note: The prerequisite for rendering each html element is that all the css styles of the element are valuable. (It does not exist after we set it. Generally, the browser will give the default value when it is not set)
a. First determine the declaration value: refer to the attribute declaration that is not red in the style sheet (CSS style, including default values, etc.) as the attribute value of the css.
b. Cascading conflict: Use cascading rules (described later) to determine the declared value in conflict.
For example: the following two are cascading conflicts
h1{
color: red }
.head h1{
color: red }
c. Use inheritance: After setting CSS property values through a and b, the remaining properties have no value. If the property can be inherited, the value of the parent element is inherited.
d. Use default values: After passing a, b, and c, the remaining values again use the browser default style.
3. Cascading rules
a. Importance
! important> Author style (style written by ourselves)> Browser default style
b. Particularity (the priority of
CSS selector) The calculation method of CSS selector is to compare a four-digit number of
thousands: to determine whether there is an inline style, if there is one, it is 1, otherwise it is 0.
Hundred's place: The number of all ID selectors in the CSS selector.
Tens: the total number of class selectors, attribute selectors, and pseudo-class selectors in CSS selectors.
Units: The total number of element selectors and pseudo-element selectors in CSS selectors.
Note: The carry system is not decimal, it is 225 carry.
c. Source order
The lower priority of code writing is higher
4. CSS inheritance
Mainly the child element inherits most of the text content attributes of the parent element
5. Box composition
内容，padding，border，margin
6. Row box features
a. Extend along the content. If the content wraps, the line box will be truncated to the next line, and the line box cannot be set in width and height. (The block box wraps the entire content and is not affected by line wrapping)
b. The font size, font type and line height for adjusting the width and height of the line box
c. The padding border margin of the row box is effective in the horizontal direction and will not actually occupy space.
d. Blank folds will occur inside or between the line boxes.
e. Row boxes avoid floating boxes when arranged
Special: For
most elements, the result displayed on the page depends on the content of the element, which is called "non-replaceable element". For a small number of elements, the results displayed on the page depend on the element attributes, which are called "changeable elements", such as img, video, etc. Most replaceable elements are line boxes, but similar to line block boxes, the sizes in the box model are all valid.
7. Features of Fast Box
Line block box display inline-block does not occupy a single line. All sizes are valid
. Blank folding occurs inside line block boxes or between line block boxes.
8. Block box features
a. Horizontal direction
The total width of the block box is equal to the width of the containing block (the parent element content box).
The value of auto absorbs the remaining space, and the absorption capacity of width is greater than margin. If the width, border, padding, and margin have been calculated and there is still space left, the space will be absorbed by margin-right.
margin: 0 auto; centered
b. Vertical direction The
vertical height of each block box: auto adapts to the height of the content. margin: auto represents 0
c. The upper and lower margins of two regular flow (no floating and positioning, etc.) block boxes will be merged if they are adjacent to each other. The two margins take the maximum value. Both sibling elements and parent and child elements are applicable, unless the margins are separated, such as border Wait.
9. Percentage value
The percentage values of padding, margin, and width are based on the width of the parent element. Note that the parent element must set a value, otherwise the percentage is invalid.
10. Element Floating
a. After the element floats, it must be a block box
b. After floating, width and height: auto; adapt to the width and height of the content. margin: auto; the value is 0. The border, padding, and percentage values are the same as those of the regular stream (Article 8).
c. Floating boxes will avoid regular flow boxes in the containing block, and the floating boxes will be ignored when the regular flow block boxes are arranged. For example: the regular flow box is before the floating box, and the floating box will be arranged in a row under the regular flow. The conventional flow box is behind the floating box, and the floating box will cover the conventional flow box.
d. If the text content is not wrapped in the line box, then the browser will generate a line box wrapped text content by default, which is equivalent to the p element wrapping the text content, and the browser will generate a span in the p element (note that it is only equivalent to, But not to add a span)
e. Height collapse: The automatic height of the conventional flow box will not be considered when calculating the floating box, so the height of the parent element will not wrap the floating box.
Solution: Use clear (create div, or directly after)
11. Positioning
a. Positioning elements will leave the document flow (except for relative positioning).
b. When positioning, if there is a conflict between left and right, the left shall prevail, and the above conflict shall prevail.
c. Absolutely positioned containing block (area), find the first element of the ancestor element to set positioning from the inside to the outside, the filled box of this element is the containing block (area), if not found, the entire web page is the containing block.
d. The fixedly positioned containing block is the entire browser view window.
e. Absolute positioning and relative positioning, width and height auto, in order to adapt to the content.
f. Centering the positioning status:
1. 定宽高
2. 将左右（上下）距离设为0
3. 将左右（上下）margin设为auto。
注意：在绝对定位和固定定位状态下，margin：auto会自动吸收剩空间。一般居中的广告就是这么显示
g. Absolute positioning and fixed positioning: it must be a block box, it must not be floating, and there is no margin merging.