display:inline-block 介绍和使用方法

优质

小牛编辑

125浏览

2023-12-01

display 值

none ：隐藏对象。(注意，与visibility:hidden不同，这货是彻底的消失，不保留物理空间。)
inline ：指定对象为内联元素。
block ：指定对象为块元素。
list-item ：指定对象为列表元素。
inline-block ： 指定对象为内联块元素。
inline-table ：制定对象为内联表格。
table ： 指定对象为表格元素 等同<table>
table-caption ：指定对象为表格标题 等同<caption>
table-cell ： 指定对象为单元格 等同 <td>(好吧，各种等同，我这人比较懒，以下省略各种不必要的文字，大家按照表格对号入座就行)
table-row ：<tr>
table-row-group ：<tbody>
table-column ： <col>
table-column-group ：<colgroup>
table-header-group ： <thead>
table-footer-group ： <tfoot>
box(flex) ： 指定对象为弹性盒模型。
inline-box ： 指定对象为内联块级弹性盒模型。
campact ：指定对象为块元素或基于内容之上的内联元素。
run-in ：指定对象为块对象或基于内容之上的内联对象。
ruby ：指定对象为表格脚注组。
ruby-base ：指定对象为表格脚注组。
ruby-text ：指定对象为表格脚注组。
ruby-base-group ：指定对象为表格脚注组。
ruby-text-group ：指定对象为表格脚注组。

inline-block 介绍

This value causes an element to generate an inline-level block container.
The inside of an inline-block is formatted as a block box,and the element itself is formatted as an atomic inline-level box.
inline-block元素把自己变成特殊的inline元素，对于相邻的元素来说表现出inline的特点，允许空格。对于内部元素来说表现出block元素的特点，可以设置高度和宽度。
-W3C

block 介绍

block-level elements (块级元素)
block元素通常被现实为独立的一块，会单独换一行。
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
block元素可以包含block元素和inline元素；但

inline 介绍

inline elements (内联元素)
inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
inline元素只能包含inline元素。

block、inline、inlinke-block 细节对比

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

兼容性

IE8及以上、Chrome、Firefox、Safari

IE6、7不支持css2.1中的inline-block,只是表现上的相近。这是通过触发浏览器的haslayout来实现的。

haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。
为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。
当一个元素的 hasLayout属性值为true时，元素就会对自身的内容进行计算大小和组织，而不依赖于父元素。
display:inline-block所触发的hasLayout是不可逆转的，所以当*display:inline的时候并不会使hasLayout=false。

inline-block hack 写法

{
    display:inline-block;
    *display:inline;
    *zoom:1;
}

inline-block 格栅单元间隔

使用 `font-size` 和 `letter-spacing` 去除格栅单元间隔方法

inline-bolck对于相邻的元素表现的是inline的特点，允许空格，在换行的时候会产生空白间隙。在inline-block的外层设置这样式，来清除间隙：

{
    font-size:0;
    letter-spacing:-6px;
}

设置换行符or制表符or空格符的font-size为0，从而使之失去宽度。
letter-spacing是一个修复IE6、7下某些元素inline-block后1px间隙的bug和不支持font-size:0;的浏览器而存在的。

样式如下：


.display-inline-block-container {
    font-size:0;/* 所有浏览器 */
    *word-spacing:-1px;/* IE6、7 */
}

@media screen and (-webkit-min-device-pixel-ratio:0){
    /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
    .dib-wrap{
        letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
    }
}

.display-inline-block-container>.display-inline-block{
    display: inline-block;
    *display:inline;
    *zoom:1;
    font-size: 12px;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align:top;
}

YUI 3 CSS Grids

使用 letter-spacing 和 word-spacing 去除格栅单元间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}

.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}