Wandering the Internet, I accidentally found Bitter Winter's blog about CSS layout http://www.cnblogs.com/winter-cn/archive/2013/05/11/3072929.html and the interview blog are a bit interesting, so take some time to come Grooming.
Daniel's question is - what are the values and behaviors of position?
Answers : normal flow, containing block, bfc, margin collapse, base line, writing mode, bidi. . .
Understand the basic concepts:
- viewport:
The media that displays the web page, such as a window or a certain area, its size is limited. In order not to be bound by platform terms, we name it viewport, which means viewport in Chinese. - canvas:
When we render web pages, we usually don't know how much space we need, and these spaces usually exceed the size of the viewport, so in fact we need to imagine an infinite canvas to draw our elements, we put it called canvas. - Box:
element (element) and node (node) are familiar concepts. When we do layout calculations, we usually turn nodes into boxes. A node may generate multiple boxes, and pseudo-elements will also generate boxes. - Render tree: Corresponding to the dom tree, we make the attribute structure composed of the box's containment relationship a render tree render tree
First look at BFC, BFC (Block Formatting Context) block-level formatting context
Formatting Context: refers to a rendering area in the page, and has a set of rendering rules that determine how its child elements are positioned, as well as their relationship and role with other elements.
BFC: Block-level formatting context, it refers to an independent block-level rendering area, only Block-level BOX participates, this area has a set of rendering rules to constrain the layout of block-level boxes, and has nothing to do with the outside of the area.
Simple example:
<html>
<head><title>囧</title></head>
<body>
<div style="width:300px;height:50px;"></div>
<div style="width:300px;height:20px;"></div>
<div style="height:50px;"></div>
<div style="width:300px;height:50px;"></div>
</body>
</html>Simply put, BFC is a context in which block-level boxes are arranged vertically in sequence as in the example.
Generation of BFC
Since it is mentioned above that BFC is a rendering area, where exactly is this rendering area, and how big is it, these are determined by the element that generates the BFC. CSS2.1 stipulates that an element that satisfies one of the following CSS declarations will be generated BFC.
- root element
- The value of float is not none
- The value of overflow is not visible
- The value of display is inline-block, table-cell, table-caption
The value of position is absolute or fixed
I saw that display:table is also considered to be able to generate BFC in the article of a Taoist friend. In fact, the main reason here is that Table will generate an anonymous table-cell by default, and it is this anonymous table-ccell that generates BFC.
Canvas will set up a BFC, which is also the outermost formatting context. The complexity of the problem is that some block-level boxes can also generate BFCs (at least it must also contain block-level boxes), so BFC can be nested.
<html>
<head><title>囧</title></head>
<body>
<div style="width:300px;height:100px;">
<div style="width:300px;height:20px;"></div>
<div style="height:50px;"></div>
</div>
<div style="height:50px;"></div>
</body>
</html>
Not all block-level boxes can generate BFCs. For example, if there are no block-level boxes in the box, and all are inline boxes, then IFCs will be generated.
<html>
<head><title>囧</title></head>
<body>
<div style="width:300px;height:100px;overflow:visible;">
<span>囧</span><span>囧囧</span>
</div>
<div style="height:50px;"></div>
</body>
</html>In the above example, overflow:visible in the first div does not generate BFC, and its child elements are directly inserted into its own outer BFC; but the second div generates BFC, so as long as there is a block level in its child nodes box, it generates BFC, those inline elements, will automatically set an anonymous block-level line box.
The limit of overflow:visible only exists for the so-called block-level box (which contains both block-level boxes, and itself is a block-level box). Some boxes can also contain block-level elements, but they are not block-level elements themselves (for example, display is table) -cell, inline-block, or the box itself is a flex item, etc.), since the outside is not a BFC, they will create a new BFC for the containing block-level box anyway.
Summary:
BFC constraint rules The
browser's constraint rules for the BFC area are as follows:
- The child elements that generate the BFC element are placed one after the other. Vertically their starting point is the top of a containing block, and the vertical distance between two adjacent child elements depends on the element's margin property. Margins of adjacent block-level elements collapse in BFC.
The child elements that generate the BFC element, each child element has a margin that touches the left border of the containing block (for right-to-left formatting, the right margin touches the right border), even for floating elements (although the child The element's content area is compressed due to the float), unless the child element also creates a new BFC (e.g. itself is a floated element).
A Taoist friend decomposed it, and we directly use it:
- The inner Boxes will be placed one by one in the
vertical direction. The distance in the vertical direction is determined by the margin. (The margins of two adjacent Boxes belonging to the same BFC will overlap in the flow direction) - The left margin of each element touches the left border of the containing block (from left to right), even for floating elements. (This means that the BFC neutron element will not exceed his containing block, and the element whose position is absolute can exceed his containing block boundary)
- The area of the BFC will not overlap the element area of the float. When calculating the height of the BFC, the floating child elements also participate in the calculation.
BFC is an isolated and independent container on the page, the child elements inside the container will not affect the outside elements, and vice versa
Seeing the above constraints reminds me of a few rules when learning css.
IFC
IFC may have a mixed arrangement of text and inline elements:
- The inner Boxes will be placed one by one in the
<html>
<head><title>囧</title></head>
<body>
<div style="">
<span>囧</span>囧囧囧<span>囧囧</span>
</div>
</body>
</html>For a normal "line box", the text is always centered vertically.
In the vertical direction, the text layout is mainly affected by the line-height attribute, which is complicated when
an inline box is involved. The vertical-align of an inline box can have the following values:
baseline
sub
super
top
text-top
middle
bottom
text-bottom
It can also be a specified height. Depending on the alignment of the inline box, it may "stretch" the inline box up or down, causing it to exceed the line height.
So the actual height occupied by the line box in the BFC is likely to be greater than the line-height.
The baseline of text is easy to understand, but inline elements are more complicated, especially when the inline element itself is a container: