Css uses display: inline-block for layout,

Css uses display: inline-block for layout,

Display of css: inline-block Layout

1. Several commonly used display attribute values, inline, block, and inline-block

• Inline:
• Block:
• Inline-block:

Figure 1:

Figure 2:

The two figures show that the block-level elements after the display: inline-block can be displayed in the same row. Some people say this is not like floating. Yes, display: inline-block has almost the same effect as floating, but it is also different. Next, let's talk about the comparison between inline-block and floating.

 

2. inline-block Layout vs floating Layout

A. Differences:Set "display: inline-block" for the element. The element will not be moved from the text stream, and float will disallow the element from the text stream, and the effect of high collapse of the parent Element

B. Similarities:Can achieve the same effect to some extent

Let's take a look at these two la s:
Figure 1: display: inline-block

Figure 2: float: left is used for two children. As I mentioned in the previous floating layout, the parent element is highly collapsed, so we need to close the float and use overflow: hidden for box. The effect is as follows:

> At first glance, both of them can achieve almost the same effect. (take a closer look at the gap problem in display: inline-block. Let's talk about it later)

C. Poor floating layout:We can see the following results:
Figure 3:

Figure 4:

> From figure 3 and 4, we can see that the limitation of floating is that if you want to arrange the elements in full lines and arrange them neatly after line breaks, the height of the child elements must be consistent, otherwise, the effect of Figure 3 will appear, and the inline-block will not.

 

3. Small issues with inline-block:

A. The above shows that there is a gap problem after the display: inline-block is used. The gap is 4 pixels, which is caused by line feed, because when we write a tag, we usually press Enter next to the tag Terminator, and press enter to generate a carriage return. The carriage return is equivalent to a blank character. Generally, multiple consecutive blank spaces are merged into a blank space, and the real reason for the "blank gap" is the blank space that we don't pay much attention.

 

B.How to remove gaps:
1. Add the parent element {font-size: 0}, that is, set the font size to 0, then the blank character is also changed to 0 PX, so as to eliminate the gap
Currently, this method is compatible with various browsers. chrome is not compatible in the past.
Figure 1:

 

C.Browser compatibility: ie6/7 is incompatible with display: inline-block, so you need to handle the problem as follows:
In ie6/7:
Use {dislplay: inline-block;} directly for row Elements ;}
For block-level elements, {display: inline; zoom: 1;} must be added ;}

 

4. Conclusion:

The display: inline-block Layout Method and floating layout method are determined based on the actual situation:
A. For horizontal arrangement, I prefer to use inline-block for layout, because it is clear and there is no need to clear the float like floating, and I am afraid of layout disorder.
B. Floating la s are used when text is surrounded. After all, this is the real use of floating, and horizontal arrangement is handed over to inline-block.

 

Author: Ry-yuan

If you need to reprint please indicate the source, this article address: http://www.cnblogs.com/Ry-yuan/p/6848197.html

> The css layout series come to an end.