Introduction to inline-block and inlineblock

Introduction to inline-block and inlineblock

I. block differentiation, inline, and inline-block

1. block

The block element excludes one row, and multiple block elements create a new row. By default, the block element width automatically fills the width of its parent element.

You can set the width and height attributes for the block element. A block-level element occupies only one row even if its width is set.

You can set the margin and padding attributes for the block element.

2. inline

The inline element does not exclusive to a row. The elements in multiple adjacent rows are arranged in the same row, and the width of the inline element changes with the content of the element until the rows cannot be arranged.

The width and height attributes of the inline element are invalid.

The margin and padding attributes of the inline element. The paintding-left, padding-right, margin-left, and margin-right attributes in the horizontal direction all generate the margin effect, but the padding-top attribute in the vertical direction, padding-bottom, margin-top, and margin-bottom do not produce margin effects.

3. inline-block

An inline-block element creates a row-level block container. The element content is formatted into a block element, and the element itself is formatted into a row element.

To put it bluntly, the inline-block element not only has the feature that the block element can be set to a high width, but also has the feature that the inline element does not wrap by default. Of course, it is not just these features. For example, the inline-block element can also set the vertical-align attribute. In short:

Ii. Compatibility

Compared with the Fluid layout flex () and box () box models of the webkit-kernel browser of the higher version of the mobile phone, inline-block is more compatible, however, there is still a saying on the Internet that ie6 and ie7 do not support inline-block. Is that true? Let's explore it.

In the Microsoft developer community of msdn, I found evidence that IE has supported inline-block since 5.5:

The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.

In this case, why do we still see such a group of ie6 and ie7 code:

Display: inline-block;
* Display: inline;
* Zoom: 1;

The reason is that in IE, display: inline-block only triggers layout of the element. For example, if you give the display: inline-block to the div, you can only ensure that the div has the features of the block element (width and height can be set), but it is still a row layout (line feed is generated ). Next, set display: inline. Change the layout of this div to inline layout (no line breaks are generated ).

III,

Now, after adding basic knowledge to you, you can start your current topic.

1. Magical horizontal gaps

When an element is inline-block, the horizontal direction will produce an unfixed gap

　　

The gap between the five li blocks is the magic of inline-block.

　　

By default, line breaks (blank characters like spaces) are generated between inline-block elements ), unless your html structure <li> </li> is written as a ghost, but it is not readable after being written, of course, we will not solve the problem in such an unelegant way. Since it is a character, font-size: 0 is not good. Yes, but not all browsers support font-size: 0, what should we do? At this time, we need to obtain our letter-spacing attribute. In most cases, this gap is 4px, so we only need to set letter-spacing: -4px just fine (on the gap size with the font size and font changes and operabrowser compatibility issues please refer to the article http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5% AE %E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/ Zhang xinxu Great God ")

2. Implement Adaptive Layout at both ends of the List (discard float)

Why should I discard float?

First of all, float will face common problems such as floating clearance and high collapse. The most important issue is that it will cause efficiency problems such as re-painting and backflow, which is also the most important reason for me to abandon float, so why do I still insist on using float instead of inline-block.

Now let's see another of our leading roles-text-align: justify. When the height of the child elements is different, we can adjust the vertical position through verticle-align.

　　Remember: the premise that the List (or text) must be aligned at both ends is that the content must exceed one line.

　　

Let's see, it's that simple, but you will also notice the problem of sorting the last line. We can solve it one by one.

(1) the last row is also arranged on both sides:

　　　　

.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

Add a class = "justify_fix" element to html.

(2) The last line is left aligned:

.left_fix{height:0; padding:0; overflow:hidden;}

Add n class = "left_fix" elements in html

The number of n is the number of lists of each element.

Well, the problem has been solved. How can this problem be solved? inline-block is simple and easy to use. You just need to remember the attributes used with it to process General la S.

The first article is for your advice ~