css knowledge with less, look a little forgot it, so to sum up css knowledge seen recently. More than the accumulation of knowledge, will be organized into their own complete system.
At present the main points about the record, later to sum according to example
Knowledge Source: https://segmentfault.com/a/1190000017069985
table of Contents
7. inline elements line-height cornerstone
9.CSS world of enchantment -BFC
10. The laminated appreciated that the order of elements
1. Layout fluid
Feature makes use of elements of the "flow" of the realization of all kinds of layout effects. Because the "flow" itself adaptive characteristics, "fluid layout" are often adaptive.
Width adjusting element length, the width of resolution width but the same layout .
2. The block-level elements
1. The block-level box is responsible for structure
2. inline box responsible for the content
正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响
.clear:after {
content: '';
display: table; // 也可以是block，或者是list-item
clear: both;
}3. beyond the container limit
Content is very long and have consecutive numbers, or the inline element is provided with white-space: nowrap
4. About height: 100%
The parent element height to auto, as long as the child elements in the document flow, the percentage complete value is ignored; the percentage of height values in order to function, its parent must have a high degree of value can take effect;
5. Why height: 100% invalid
Comprising height of the block is not explicitly specified (i.e., a height determined by the content ), and the element is not the absolute positioning , the calculated value of auto
How elements support height: 100% effect
1. Setting the displayed altitude value
2. Use absolute positioning
6. ghost blank node
All in front of parsing and rendering of inline elements will have a "blank node" ; not occupy any width, can not see can not get through a script ( document declaration must be HTML5 document declaration (HTML code below))
div {
background-color: #cd0000;
}
span {
display: inline-block;
}
<div><span></span></div>7. inline elements line-height cornerstone
1. Pure non-replaced inline element of the element , the height of which is completely determined by the visual line-height
2. The height of the basis set is used to calculate the height of the row block box; achieved by varying the "spacing"
8. Semi spacing
1. The current above and below the text; the "spacing" in height is only complete "Spacing" half height
2. Semi spacing = (line-height - font- size) / 2;
9. CSS world of enchantment -BFC
BFC notes is not really forget, always remember to clear the floating
Important: "CSS World Ward"; closed space formed by the specific means, which people can not get out, who could not come out, with a strong defense
Performance principles
BFC elements overlap margin is unlikely
BFC clear floating elements
BFC trigger condition
- <Html> root element
- The value of the float is not none
- overflow value auto, scroll or hidden
- display value table-cell, table-caption inline-block and any one of
- The absolute position value
As long as the elements meet any of the above conditions, you do not need to use clear: both attribute to clear the floating
BFC and fluid layout
Through fluid elements provided overflow: hidden after, will automatically fill the remaining space in the container in addition to the floating element , forming an adaptive layout effects, but this adaptive layout fluidic adaptive smarter than pureimg { float: left; } .animal { overflow: hidden; } <div class="father"> <img src="me.jpg"> <p class="animal">小猫1，小猫2，...</p> </div>In order to completely remove the influence of floating, the most suitable property is not clear but the overflow. General use overflow: hidden, using the BFC's "Enchantment" feature to solve the impact of external floating or sibling elements
10. The laminated appreciated that the order of elements
Has a specific vertical display order occurs when the laminated element
Who is great who is on
When the laminate has a significant level of identity, z-index attribute values such as force, in the context of a laminate with the art, the stacked a level that covers a large value that a small
Catch up
When the same level of laminated elements, when the same stacking order, at the back of the element in the DOM stream overwrite the previous element
Laminated context characteristics
层叠上下文的层叠水平要比普通元素高
层叠上下文可以阻断元素的混合模式
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”
每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中Orthodox
Traditional positioning element is a z-index value of "stacked context" .
position is relative / absolute and Firefox / IE browser (not including Google Chrome) comprising the position: fixed positioning element declaration, which when the z-index value is not in auto, creates a context laminate
School enrollment
Other CSS3 properties
- Elements to flex layout elements (parent element display: flex | inline-flex), while the z-index value other than auto
- opacity value of the element is not 1
- transform value of the element is not none
- Element mix-blend-mode value is not norma
- filter element's value is not none
- isolation value of the element is isolate
- will-change element attribute values of any of the above 2 to 6, a (e.g., will-change: opacity, will-chang: transform, etc.)
- Elements -webkit-overflow-scrolling to touch
Laminate stacking order and context
If the element does not depend on the context of the stacked z-index values, it is sequentially laminated z-index: auto, can be seen as z: index: 0 level
If the context elements are stacked z-index dependent on the value, which is determined by the stacking order of z-index values