A better page layout than float Inline-block

One: Web page layout Development history

• Table layout
• Form +css
• Floating layout of Div+css
• Inline block layout for DIV+CSS

Second: The pros and cons of floating layouts that have been popular for years

Advantage:

Div+css floating layout of the advantages, mainly relative to the table layout, the main performance is the following aspects:
1, faster page rendering speed;
2, better background programming support degree;
3, better search engine friendliness;
4, more excellent web page modification of the refactoring.

Disadvantages: 1, a row of the height of the box may lead to the next line of the box "stuck", like the Russian block misplaced place when the "stuck" after the empty space;
2, the floating element causes the "height collapse" of its parent box, and it cannot naturally wrap its subordinate elements as the normal document structure shows;
3, the floating element also causes subsequent sibling elements to follow the same line as the floating element;
4, a number of other famous bugs that Ie6/7 Microsoft under the Sun are also related to floating.

Three: Inline-block layout: A more optimal layout technology

1) Inline-block layout: A new Web page layout solution that can give full play to the advantages of div+css floating layout and overcome the disadvantages of floating box

• What is a box in inline mode: A box is arranged consecutively in a row, followed by the previous one in a row, until it touches the end of the line and then naturally changes to the next line to continue to appear so. The In-line box cannot be set width and height, and there are no upper and lower margin and padding (but left and right margin and padding exist). Common inline elements: span,a,img,b,i,u
• What is a block-mode box: A box itself occupies an entire row in its parent box, regardless of its width, and does not "wrap". Common block elements: Div,hr,p,ul/li,ol/li,dl/dt/dd,h1-h6,pre,form

2) So what is the performance of Inline-block?

• The box and the outside (its sibling elements) behave as inline (inline) mode, which can be naturally placed side-by-side with its sibling elements (like an IMG tag), but the box as a whole, but also as a block mode, that the box itself can not "automatic line display", the width is set to high.
• In fact, the Inline-block box behaves very much like the "img" element in terms of overall performance, that is, multiple img can appear on one line, but an IMG itself is not "middle-folded" (contrast: span and a tags will automatically wrap when they hit the end of a line). Only IMG As an image display element, its "internal" can not put other content, and the Inline-block box is our most conventional can put other content of a "container."

3) What are the problems of various layouts in nature? The so-called layout, is nothing more than the solution element placed on the page arrangement. From the "flat block" point of view, no matter what layout method, is to solve 2 problems:

• How the elements are arranged from top to bottom:

A block element (such as a div) is naturally up and down, the BR element is explicitly swapped to the next line, and the TR element represents the table row. There is no need for additional CSS techniques in the upper and lower arrangement relationships.

• How elements are arranged from left to right:

1. In-line elements naturally from left to right
2. TD in Table
3. The float of the box
4. inline-block!

• Layout principle: Layers Divide "current area"

• There are two methods of partitioning:

1. Up and down division
2. Divided by left and right

The Inline-block layout features and practices are very simple:

• Based on the presentation of the Inline-block in front of us, and the nature of the layout, the layout of the Inline-block pattern is very simple:

1. To achieve horizontal arrangement, this is the natural expression of the Inline-block box (as in the case of natural horizontal arrangement, this is the "inline block" box embodies the "line" place.) All we have to do is set the right width.
2. To achieve vertical arrangement: it has nothing to do with inline-block, it has nothing to do with float, but to take advantage of the DIV and BR that we said earlier, easy to fix!

Four: Inline-block layout to solve the problem (implementation of compatibility practices)

• We soon discovered that, if the page does not consider the precise pixel-level design, the layout using Inline-block technology is easy to understand and easy to implement, almost as much as we do with tiles on the ground. But we also found that after being inline-block, the box has a few pixels between the boxes and the box, just as the picture naturally looks like when the pictures are placed side by side, which is obviously not enough for modern pixel-level design requirements! How to solve it:

1. First, what is the gap? --Space!
2. Second, how to remove the gap? --Parent box set font-size:0px;
3. Finally, there is no end, and that's almost good--for modern browsers

• There are two easy-to-solve compatibility issues for converting a block element to a Inline-block element:

1. Convert block box to inline block box:xxx{display:inline-block;}

xxx {*display:inline;} /* Then write back to "inline" mode, which is compatible with IE6/IE7, only so that the IE6/7 is shown as inline block box */

1. Font-size:0 can not eliminate the Apple browser Safari box gap, you need to set letter-spacing negative, such as:letter-spacing:-4px;

This negative value has no effect on other browsers in the case of font-size 0;

This negative size is affected by the font name and font size, and needs to be adjusted slightly depending on the situation. For example, the common 12px Arial font is the -4px,12px of the song body is -8px

• Converting inline elements to inline-block elements is OK, but less compatible, not recommended

V: Inline-block Layout Application (case demo)

The final summary code is as follows:

/* The core code of the */.out{font-size:0px;/*inline-block layout that is applied to the outer box of the Inline-block layout 1*/letter-spacing:-8px;/* compatibility Code 1: Compatible with Apple browser, Negative value for other browsers invalid */text-align:center;/*inline-block layout of the auxiliary code 1, can be left,center,right*/}/* applied to the Inline-block layout of the inside box */.in{ Display:inline-block;/*inline-block layout of the core code 2*/vertical-align:top;/*inline-block layout of the auxiliary code 2, can top, middle, bottom*/}. in{*display:inline;/* Compatible Code 2: compatible with ie6/7*/}

Resources:

Preach Intelligence Podcast Rodihua Teacher research inline-block layout Technology video Download

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

CSS float floating in-depth research, elaboration and development (a)
http://www.zhangxinxu.com/wordpress/?p=583
CSS float floating in-depth research, elaboration and Development (ii)
HTTP ://www.zhangxinxu.com/wordpress/?p=594
Goodbye, floating layout-Display:inline-block-based list layout
http://www.zhangxinxu.com/ wordpress/?p=1194
Inline-block Past life
http://ued.taobao.org/blog/2012/08/inline-block/
CSS floating layout with 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