Rational use of inline formating context (IFC) in Webpage Layout)

Introduction: Let's give you a small question. How can we use css to implement a vertical center that is similar to the following in the specified area and the content is adaptive.

 

A long time ago, there was a method that was not strong.

The display: table-cell attribute indicates that the label element is displayed as a table cell, similar to the td tag.

In fact, there are many reasons for inner to hate this method,

For example, high-level browsers support this attribute, but low-level browsers can only say sorry to you. For other properties that require a variety of inaccuracies, such as font-size for "adjuvant treatment", unexpected bugs may occur in different scenarios. If a problem can be solved through both new features and old features, I think everyone will choose a common one with good stability.

For example, after the time when the table age was reached, the attackers thought that the table was not very tall, and they were deeply disgusted.

So how can we make it more reasonable ?........... Please read this long blog.

Next, go to the topic.

An abstract definition is called IFC: inline formating context (intra-row formatcontext)

The correspondence with IFC is BFC: block formating context (block-level formatcontext). BFC has a wide range of application scenarios in web page layout. It will understand the causes of many bugs, and find a solution on your own. However, this blog is not about him, so even if he says that he has a bid to talk to him, he has to wait for the next time.

Like BFC, IFC is not an element, not an attribute, but an environment, context, or layout.

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

Line box.

And the presence of floats. The height of a line box is determined by the rules given in the section on.

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 (same T as specified elsewhere) and they never overlap.

. 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 ).

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.

Within the same line boxDue.

No inline elements with non-zero margins, padding, or borders, and no other 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.

After my personal understanding, I have translated and understood a lot of Yali Yamada in English (forgive me for my northeast talk and long articles ):

The margin, padding, and border directions are good. There are many ways to align them vertically, such as bottom or top alignment or baseline alignment. The square area formed after they are aligned is called a (row box ).

 

 

Personal supplement:

Line box diagram (take the opportunity to show photos ):

 

. // Achieves the effect similar to the alignment between the two ends, but not all browsers support it.

Supplement: block-level elements cannot exist in the IFC environment. If the block-level element is inserted into the IFC, the IFC will be damaged, the element before the block-level element and the element after the block-level element will automatically generate an anonymous container, and the internal environment of the anonymous container will be a new IFC.

After the above explanation, we will go back to the blog startup issue. To vertically center text/elements/images of unknown sizes within an element.

As mentioned above:

Then, let's imagine that if you manually create an IFC environment so that the line box height is 100% of the block height, let the elements inside the line box use vertical-align: middle, vertical center can be achieved.

Line boxHeightIt is calculated based on the element with the highest actual height in the internal element.
Therefore, we insert an inline-block element with a height of 100% in the line box. The entire line box will be elevated until 100% of the contained block is reached.

Concept diagram:

 

The advanced browser can directly use the "after" method on the outer include layer to append a pseudo element to the interior. The low-level browser does not support the "after" method, create an empty element in the html template and set its height to 100%, which is the same as that of the contained layer. If its width is zero and its content is empty, you can extend its internal size to a line box, but does not occupy any space. Other internal elements can be converted to inline or inline-block to realize vertical center in line box. The form is vertical center in the outer include layer.

The Code is as follows:

IFC application instance I want to center based on external containers

The format is as follows:

Chrome and other advanced browsers:

IE6:

 

 

Summary:

After learning about the principles of IFC in detail, we can use it more confidently to do many things.

For example, some websites will abandon the float bug layout method and use the IFC environment for layout (of course, the gap between inline-level elements must be solved when it is accurate ).

Alternatively, you can achieve many flexible effects such as center alignment and adaptive height of some text.

At the same time, when some bugs occur on our web pages, we can also understand why and think about a good solution instead of going online to find "hichina oil ". This gives us more control over our web pages.

 

 

------------- END