<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WEB前端开发 &#187; display:inline-block</title>
	<atom:link href="http://www.css88.com/archives/tag/displayinline-block/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:31:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>display:inline-block的几个应用及bug</title>
		<link>http://www.css88.com/archives/1465</link>
		<comments>http://www.css88.com/archives/1465#comments</comments>
		<pubDate>Sun, 21 Jun 2009 10:49:07 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[html+css]]></category>
		<category><![CDATA[display:inline-block]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=1465</guid>
		<description><![CDATA[和大家一样经常使用display:inline和display:block来进行块元素(block element)和内联元素(inline element，也叫行内元素)之间的转换。 块元素和内联元素的主要区别： 1.块元素会自动在末尾加一个换行，而内联元素不会，多个内联元素会自动排成一行，比如img标签或span标签插到一行文字中，他会和这行文字自动排成一行，而如果你在这行文字中插入一个块元素标签，比如div标签，那么这个div标签会自己独占一行。查看demo：http://www.css88.com/demo/inline-block/inline-and-block.html 2.块元素可以定义自身的高度（width）和宽度(height),而内联元素不可以。 3.块对象定义的自身垂直边距可以改变行高，而内联元素虽然可以定义但改变不了行高。 更多关于块元素和内联元素可以看看这里http://www.css88.com/archives/646； display:inline-block是什么呢？ 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。这就是display:inline-block的作用，再讲的通俗一点就是，Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。(转载请注明出处：WEB前端开发 http://www.css88.com/) ( ⊙o⊙ )哇，好强大的属性啊！我以前怎么没发现啊？是的很强大，但是以前的FF2，IE6，IE7不支持改属性（目前支持的浏览器：FF3，Opera，Safari，Chrome，ie8），FF2可以使用FF的私有属性display:-moz-inline-box;而且FF2绝大多数已经升级到FF3了，所以不成什么大的问题了，IE6和IE7拥有这个display:inline-block就会触发layout，就相当于zoom:1（关于ie的layout看以查看：http://www.css88.com/archives/tag/haslayout），我们可以用该特性在IE6和IE7下模拟display:inline-block；也可以直接让块元素设置为内联对象呈递然后触发块元素的layout，即display:inline; zoom:1; display:inline-block的几个应用 1.先看效果图： 2.html代码： &#60;div class=&#34;selector&#34;&#62; &#60;ol class=&#34;tokenList&#34;&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;草包&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;雷霍霆&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;龙翔&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;搜道&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;无忧&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;王帅帅&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;建仔&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;不告诉你&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;波仔&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;辰风&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; &#60;li&#62;&#60;a href=&#34;#&#34;&#62;&#60;span&#62;李晓晨&#60;em class=&#34;x&#34;&#62;&#60;/em&#62;&#60;/span&#62;&#60;/a&#62;&#60;/li&#62; [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/1465/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

