inline-block是什么意思

display: inline-block; 这个东西困扰了我好久。不知道反正我在中文网站上没有找到让我一下子醒悟过来的解释。偶然间读到这篇英文，我觉得简短的几句话，把问题解释的很清楚。就像我开始的时候不明白clear：both，但是有人告诉我说是“清除浮动造成的影响”一样，一下子就幡然醒悟了。

原文：http://www.impressivewebs.com/inline-block/

如果你已经使用CSS做过一段时间的开发，相信你对display: inline-block一定不陌生．它最主要的用在IE6中消除float元素的双边距。简单的解释一下，如果你给一个浮动元素与之浮动的方向相同的方向一个margin,　则这个元素的边距会加倍。如果你对这个bug很熟悉，你可以有两种方法消除它，　一是通过hack只给一半的margin, 二是给这个元素display: inline-block; display: inline。　当然如果你对inline-break足够的理解，　除了这个用处以外，它还可以用在很多场合。

怎么给inline-break下一个定义呢？看看别人怎么说：

According to Sitepoint’s CSS Reference:

inline-break 使该元素产生一个展示出来像inline一样的block box.(有点晕)

According to QuirksMode:

inline-block 像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。

According to Robert Nyman:

通常来说，inline-break是inline元素，但是保留了block的一些特性，比如，可以设置高宽内外边距等。　

我个人认为Robert Nyman的解释最好，因为它更具有实践意义。

你可以尝试一下这段代码，

<span>This is a span here<span style="display: inline-block; border: solid red 1px; height: 70px; ">This is a<br />inline-block<br />element</span> This is a span here.</span>

效果：

什么场景下是用inline-block?

修正ie6中浮动元素的双边距问题；
水平放置多个类似block的元素而不需要用float;
使一个inline元素具有高宽边距等而它依然能够保持inline;

需要注意的问题

inline-block一些很重要的因素和缺点需要牢记在心。inline-block对相邻的空格敏感，所以如果你要使用inline-block水平排列一些元素，比如一个导航条，你需要想办法不让这种事情发生。　办法一：像这样书写li:

<ul>
<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
</ul>

办法二：ul的font-size=0。

如果你一排放置多个高度不一的inline-block元素，你需要通过vertical-align来设置他们的垂直对齐方式。

是否跨浏览器？

inline-block可以在除了ie6/7以外的所有浏览器上工作的很好。但是针对ie6/7可以通过这种方式hack:

{

display: inline-block;

*display: inline-block;

zoom: 1;

}

我的一些实践：

<ul class="u1">
<li>
<h4>This is the title</h4>
<img src="mm1.jpg" />

</li>
<li>
<h4>This is the title</h4>
<img src="mm2.jpg" />

</li>
<li>
<h4>This is the title</h4>
<img src="mm3.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm4.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm5.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm6.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm7.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm8.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm9.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm10.jpg" />

</li>
</ul>

.u1{
list-style: none;
}

.u1 li{
display: inline-block;
width: 150px;
vertical-align: top;
}

inline-block是什么意思相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
inline, block, inline-block区别
inline, block, inline-block区别 inline Not height and width; Not margin-top & margin-bottom; Alway ...
inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
display(block,inline,none),visibility(visible,hidden)之间的关系及区别（不同）
这段时间一直对display属性的block,inline,none和visibility属性的visible,hidden一直很模糊,总觉得很难理解,通过下面这个实例,就可以很好的牢记这几者之间的区 ...
inline-block什么意思中文_block，inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
第六章：Block与GCD
继续这本书的读书笔记,希望在其中也加入自己的一些总结,以加深理解.之前这一章写了很多了,保存到草稿箱中,不知道为何丢失了,真是可惜,看来CSDN的MarkDown编辑器还存在一些bugs,在它打上补丁 ...
CSS入门-五个简单,但有用的CSS属性
今天说的这5个CSS属性,你可能会很熟悉,但是你可能会很少会去使用.这个教程所讲得不是关于CSS3的属性,而是依旧使用CSS2属性来说明,这些属性广泛的被各种浏览器所支持:clip,min-heigh ...
Python 为什么用 # 号作注释符？
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达作者:豌豆花下猫来源:Python猫关于编程语言中的注释,其重 ...

inline-block是什么意思

inline-block是什么意思相关推荐

最新文章

热门文章