Better web page layout than float: inline-block

I. Development History of Web Page Layout

• Table Layout
• Table + css
• Floating layout of div + css
• Inline Block Layout of div + css

Ii. Advantages and disadvantages of the floating layout that has been popular for many years

Advantages:

The advantage of div + css floating layout is mainly relative to the table layout, mainly manifested in the following aspects:
1. Faster webpage rendering speed;
2. Better background programming support;
3. Better search engine friendliness;
4. Better web page modification and reconstruction.

Disadvantages: 1. The height of a box may cause the box in the next line to be "stuck". For example, if the box in the wrong place is "stuck", a space is left below;
2. Floating elements cause the "height collapse" of the parent box, so that the lower-level elements cannot be naturally wrapped as shown in the normal document structure;
3. Floating elements also lead to the subsequent sibling elements following the floating element to the same line;
4. other famous bugs that have put Microsoft on shame under IE6/7 are also related to floating.

3. inline-block Layout: a better layout technology

1) inline-block Layout: A brand new web page layout solution. It not only gives full play to the advantages of div + css floating layout, but also overcomes the disadvantages of floating boxes.

• What is an inline box: A box is arranged consecutively in a row, and the last one is followed by the previous one in a row until the last line is reached and then changed to the next line. The width and height of the box in the row cannot be set, and there is no upper or lower margin or padding (but the left and right margin and padding exist ). Common intra-row elements: span, a, img, B, I, u
• What is a block-mode box: A box occupies a whole line in its parent box, and does not "fold" regardless of its width ". Common block elements: div, hr, p, ul/li, ol/li, dl/dt/dd, h1-h6, pre, form

2) What is the performance of inline-block?

• The box and the outside (its sibling elements) are in inline mode, that is, they can be placed side by side with their sibling elements (similar to the img tag), but the box as a whole, it is also displayed in block mode, that is, the box itself cannot "automatically wrap display", and the width and height can be set.
• In fact, the overall performance of the inline-block box is very similar to that of the "img" element, that is, multiple img can appear in one row, however, an img itself does not "fold in the middle" (comparison: The span and a labels will automatically fold at the end of the line ). However, as an image display element, img cannot store other content internally, while the inline-block box is the most common "Container" for us to store other content at will ".

3) What are the fundamental problems solved by various la s? The so-called layout is nothing more than the layout of elements placed on the page. From the perspective of "plane blocks", no matter which layout method is used, there are two problems:

• How to arrange elements from top to bottom:

The block element (such as div) naturally goes up and down, and the br element explicitly changes to the next row. The tr element indicates the row of the table. It can be seen that no additional css technology is required in the upper-right and lower-order relationships.

• How to arrange elements from left to right:

• Layout principle: divide the "current region" Layers"

• There are two partitioning methods:

Inline-block Layout features and practices are very simple:

• According to the introduction of inline-block and the essential idea of layout, the layout of the inline-block mode is very simple:

Iv. problems to be solved in the inline-block Layout (implementing compatibility)

• We soon discovered that, if the page does not consider precise pixel-level design, it would be easy to understand and implement the layout using inline-block technology, almost the same as our tile placement on the ground. However, we also found that the box after the inline-block has a gap of several pixels between the box and the box, just like when the picture is naturally placed side by side, this is obviously not enough for modern pixel-level design requirements! Then how to solve the problem:

• Here, converting block elements into inline-block elements has two compatibility issues that are easy to solve:

Xxx {* display: inline;}/* write back to "inline" mode, which is compatible with IE6/IE7. Only in this way can IE6/7 be displayed as an in-row block box */

This negative value does not affect other browsers when font-size is 0;

The negative value is affected by the font name and font size, which must be slightly adjusted based on the occasion. For example, the common 12 PX Arial font is-4px, And the 12px ry is-8px.

• You can also convert an inline element into an inline-block element, but the compatibility is worse. It is not recommended.

V. inline-block Layout application (case study)

The final summary code is as follows:

/* Apply the box to the inline-block Layout */. out {font-size: 0px;/* Core code of the inline-block Layout 1 */letter-spacing:-8px;/* compatible with code 1: compatible with the apple browser, negative values are invalid for other browsers */text-align: center;/* auxiliary code 1 for inline-block layout, which can be left, center, right */}/* apply it to the box in the inline-block Layout */. in {display: inline-block;/* Core code of inline-block Layout 2 */vertical-align: top;/* auxiliary Code 2 of inline-block layout, which can be top, middle, bottom */}. in {* display: inline;/* compatible Code 2: compatible with IE6/7 */}

References:

Instructor Luo Dihua of Chuanzhi podcast on inline-block layout technology video download

Link: http://pan.baidu.com/s/1sjrqYfj extract password: gh3r

In-depth research, explanation and expansion of CSS float floating (I)
Http://www.zhangxinxu.com/wordpress? P = 583
In-depth research, explanation and expansion of CSS float floating (2)
Http://www.zhangxinxu.com/wordpress? P = 594
Bye, floating Layout-display: inline-block-based list Layout
Http://www.zhangxinxu.com/wordpress? P = 1194
Inline-block past and present
Http://ued.taobao.org/blog/2012/08/inline-block/
CSS floating layout and inline-block
Http://www.keakon.net/2010/11/13/CSS%E6%B5% AE %E5%8A%A8%E5%B8%83%E5%B1%80%E4%B8%8Einline-block