Reasonable use of inline formating context (IFC) in web page layout_html/css_WEB-ITnose

Introduction: Let me give you a small test question, how to use css to achieve the following adaptive vertical centering of content in a designated area.

A long time ago, there was a not very solid way to do it.

The display:table-cell attribute means that the label element is presented in the form of a table cell, similar to the td tag.

Actually, there are many reasons why I hate this method in my heart.

For example, advanced browsers support this attribute, but low-level browsers can only say sorry to you. For the need to use various other imprecise attributes, such as font-size to "auxiliary treatment", some unexpected bugs are prone to occur on different occasions. If a problem can be solved by both new and old features, I think everyone will choose the one that is universal and has good stability.

For example, siege masters who have experienced the table era feel deeply disgusted when they think of people who have something to do with table.

So, how can it be more reasonable? ……….. Please be patient and read this long blog.

Let’s get to the point.

Let’s talk about a definition. It is an abstract thing. It is called IFC: inline formating context (inline formatting context)

The corresponding to IFC is BFC: block formating context (block level formatting context), the application scenarios of BFC in web page layout are extremely rich. Understanding it will understand the causes of many bugs and find solutions on your own. But this blog is not about discussing him, so even if I talk about him and I have a lot of desire to talk about it, I have to save it for next time.

IFC is the same as BFC. It is not an element or an attribute, but an environment, a context, and a layout feature.

Quoting w3c (http://www.w3.org/TR/CSS2/visuren.html#inline-formatting)

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within they may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains ( if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical- align' property. When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats. Line boxes in the same inline formatting context generally vary in height (e.g., one line might contain a tall image while the others contain only text).

When the total width of the inline- level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the 'text-align' property. If that property has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

When an inline box is split, margins, borders, and padding occur have no visual effect where the split (or at any split, when there are several).

Inline boxes may also be split into several boxes within the same line box due to bidirectional text processing.

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

A lot of Yali Shanda has been read in English. After personal understanding and summary, the translation and understanding are as follows (forgive my Northeastern dialect and long speech):

In IFC, inline elements are arranged one after another in the horizontal direction. Among them, the horizontal margin, padding, and border directions between containers are easy to use. They can be aligned vertically in many ways, such as bottom or top aligned, or baseline aligned. The square area formed after they are aligned is called a line box.

The width of a line box is determined by the width of the element containing it and whether there is a float element in the element containing it, and the height is calculated by the element with the highest actual height among the internal elements.

//In fact, this sentence explains why inline elements cannot set vertical padding, margin, etc., because even if it is set, it will not affect the height of the line box, which may be different in every browser Performance varies, but most will not achieve the desired results.

The height of the line box is high enough to contain the containers inside it, or it may be higher than the containers it contains (such as when baseline aligned). When it contains When the height of the inner container is less than the height of the line box, the vertical position of the inner container is determined by its own vertical attribute. When there are too many container boxes inside that can not fit in one line box, they will become two or more line boxes after folding. The line boxes cannot be separated vertically from each other or overlap.

Generally speaking, the left edge of the line box is next to the left edge of the element containing it, and the right edge is next to the right edge of the element containing it, and the floating element will contain them between the edge of the element and the edge of the line box. Therefore, although line boxes under the same IFC usually have the same width (that is, the width of the container containing them), the line box will also be disrupted by floating elements. The available widths of boxes have changed. The heights of line boxes under the same Ifc will also be different (for example, if there is a larger image in a line box, it will be taller).

Personal addition:

line box picture (take the opportunity to show photos):

If the inline in a line box If the sum of the widths of the elements is less than the width of the line box, their horizontal arrangement in the line box is determined by the text-align attribute. If this attribute is set to "justify", these boxes can be Stretch the remaining space (except for inline-table and inline-block elements). //Achieve an effect similar to aligning both ends, but not all browsers support it.

When the width of the inline element exceeds the width of the line box, it will break into several line boxes. If the content in this element cannot be broken, for example, there is only one word, or white -space sets nowrap/pre. Then the inline element will overflow the line box.

When an inline element is split, the margins, borders and padding of the split will have no visual effect (or any other split, as long as there are multiple line boxes).

The survival condition of the line box is that it is in IFC and contains inline-level elements. If the line box has no text, blanks, line breaks, inline elements, and no other elements that exist in the IFC environment, ( Such as inline-block, inline-table, images, etc.), will be regarded as zero height, and will also be regarded as meaningless.

Supplement: In the IFC environment, block-level elements cannot exist. If a block-level element is inserted into an IFC, the IFC will be destroyed, and the block-level element before the The element and the element after the block-level element will each automatically generate an anonymous container to surround it. The internal environment of this anonymous container will be a new IFC.

Example 1:

P is a block element, which contains 5 inline elements, three of which are anonymous.

Anonymous: “Several”

EM: “emphasized words”

Anonymous: “appear”

STRONG: “in this”

Anonymous: “sentence, dear.”

In this code, there are 5 inline elements in the line box, and P creates a container box containing the line box.

If the width of this P is enough, a unique line box will be generated. As shown below:

If the width of P is not enough, it will be divided into multiple line boxes. As shown below:

Example 2:

1.margin, plays a role in the horizontal direction before emphasized and after word. It has no effect at the dividing point and has no effect in the vertical direction.

2.padding plays a role in the horizontal direction before emphasized and after word. It has no effect at the dividing point and has no effect in the vertical direction.

3.border, look at the representation of the dotted line.

After the above explanation, we return to the issue of starting a blog. Implement text/element/image of unknown size to be vertically centered within an element.

It was said above:

In a line box, when the height of the inner container it contains is less than the height of the line box, the vertical position of the inner container is determined by its own Vertical property to determine.
Then, let’s imagine that if we manually create an IFC environment, let the height of the line box be 100% of the height of the containing block, and let the elements inside the line box use vertical-align: middle, it can be achieved Centered vertically.

The height of a line box is calculated from the element with the highest actual height among the internal elements.
So, we insert an inline-block element with a height of 100% in the line box. The entire line box will be raised until 100% of the containing block.

Concept diagram:

Among them, advanced browsers can directly include them outside The layer uses :after to append and create a pseudo element internally. However, low-level browsers do not support the writing method of :after, so create an empty element in the html template and set its height to 100% to be the same as the containing layer and its width to zero. , if the content is empty, it can expand itself into a line box, but it will not occupy any space. Then other elements within itself can be vertically centered in the line box by converting to inline or inline-block. The form of expression is vertical centering in the outer containing layer.

The code is as follows:

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>IFC应用实例</title>    <meta name="copyright" content="www.ohweb.cn" />    <meta name="author" content="weinan" /></head><body>    <style>    /* comm 核心部分 */    .g-ifc-wrap:after,    .g-ifc-wrap-after{content:'';height:100%;width:0;display:inline-block;*display:inline;*zoom:1;margin-left:-5px;font-size:0;vertical-align:middle;}    .g-ifc-item{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}    /* test */    #test{height:300px;width:500px;background-color:#878787;border:3px solid #526f39;}    #test p{background-color:#7ff30a;color:#000;font-weight:bold;}    </style>    <div id="test" class="g-ifc-wrap">        <p class="g-ifc-item">我想要基于外面的容器居中</p>        <img class="g-ifc-item lazy"  src="/static/imghwm/default1.png"  data-src="http://dh2.kimg.cn/v/upload/20140325/9aa6e7f4e477d9af9c463c5604070ed4.jpg?v=1395739057"  alt="我也是" />        <!--[if lte IE 7]><span class="g-ifc-wrap-after"></span>< ![endif]-->    </div></body></html>

The expression is as follows:

Advanced browsers such as chrome:

IE6:

Summary:

After we understand the principles of IFC in detail, we can be more confident There are many things you can do with it.

For example, some websites will abandon float, a bug-ridden layout method, and all use the IFC environment for layout (of course, when it is very precise, it is also necessary to solve the gap between inline-level elements).

Or you can achieve some flexible effects such as center alignment of pictures and text, adaptive height, etc.

At the same time, when our webpage has some bugs, we can also understand why it is so and think of good solutions instead of looking for "taiwan oil" online. This will give us greater control over our web pages.

?????????END