Display properties for CSS: Layout by Inline-block property values

This article introduces the content of the CSS is about the display property: Through the Inline-block property values to achieve the layout, there is a certain reference value, the need for friends can refer to, I hope to help you.

Display:inline-block layout of CSS

1. Explain some of the commonly used property values for display, inline, block, Inline-block

• Inline

1. Makes the element into an inline element, with the attribute of the element within the row, that is, a row can be shared with other inline elements, and no exclusive row.

2. The height,width value of an element cannot be changed, and the size is stretched by the content.

3. You can use Padding,margin's left and right to create margin effects, but top and bottom do not.

• Block

1. Makes the element a block-level element, exclusive of one row, and, without setting its own width, the block-level element fills the width of the parent element by default.

2. The ability to change the value of an element's height,width.

3. You can set individual property values for Padding,margin, and top,left,bottom,right can produce margin effects.

• Inline-block:

1. Combining the features of inline and block, combining the 1th features of the above inline and the 2nd, 3 features of the block.

2. In layman's words, it is a block-level element that does not monopolize a line. :

Figure One:

Figure II:

Two graphs can be seen, display:inline-block after block-level elements can be displayed on the same line, some people say it is not like floating. Yes, the effect of display:inline-block is almost the same as floating, but there are differences, so let's talk about Inline-block and floating comparisons.

2.inline-block Layout vs Floating layout

A. Difference: When you set Display:inline-block on an element, the element is not out of the text stream, and float causes the element to break out of the text stream, with the effect of a high collapse of the parent element

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

Let's take a look at both of these layouts:
Figure One: Display:inline-block

Figure two: For two children using float:left, I said in the previous floating layout, this is the parent element will be highly collapsed, so to close the float, the box using Overflow:hidden, the effect is as follows:

>> at first glance two can do almost the same effect, (take a closer look at the gap problem in the Display:inline-block, this to stay below to say)

C. Floating layout is not very good place: uneven phenomenon, we look at an effect:
Might

Figure IV:

>> from Figure 3, 4 can see that the limitation of floating is that if the element is filled with a line, after the line is arranged neatly, the child elements of the height of the same line, otherwise it will appear the effect of figure three, and Inline-block will not.

3.inline-block the small problems that exist:

a. The above can be seen using the Display:inline-block, there is a gap problem, the gap is 4 pixels, the problem is caused by line wrapping, because we write the label usually after the end of the tag to hit a carriage return, and the carriage return will produce a carriage return, A carriage return is equivalent to a white space character, and often multiple contiguous whitespace characters are combined into a single whitespace character, and the real reason for the "white space gap" is the white space character that makes us less aware.

B. Ways to remove Voids:
1. Add the parent element, {font-size:0}, the font size is set to 0, then the white space character will also become 0px, thereby eliminating the gap
This approach is now compatible with a variety of browsers that were previously incompatible with chrome
Figure One:

c. Browser compatibility: IE6/7 is incompatible with display:inline-block, so take extra care:
Under the IE6/7:
Use {Dislplay:inline-block for inline elements directly;}
For block-level elements: add {display:inline;zoom:1;}

4. Summary:

Display:inline-block layout mode and floating layout, which I think should be decided according to the actual situation:
A. For horizontal arrangement, I prefer to use inline-block to layout, because this is clear, and no longer like floating to clear floating, fear of layout confusion and so on.
B. For floating layout is used to need text wrapping, after all, this is the real use of floating, horizontal arrangement is given to Inline-block.