﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-流浪的蜗牛-随笔分类-css</title><link>http://www.blogjava.net/vagasnail/category/48717.html</link><description>读历史、看小说、写程序都是我所爱。技术不好，头脑不灵光，靠的是兴趣。</description><language>zh-cn</language><lastBuildDate>Fri, 27 May 2011 01:01:45 GMT</lastBuildDate><pubDate>Fri, 27 May 2011 01:01:45 GMT</pubDate><ttl>60</ttl><item><title>CSS的block与inline及float的三角关系</title><link>http://www.blogjava.net/vagasnail/archive/2011/05/27/351139.html</link><dc:creator>vagasnail</dc:creator><author>vagasnail</author><pubDate>Thu, 26 May 2011 17:00:00 GMT</pubDate><guid>http://www.blogjava.net/vagasnail/archive/2011/05/27/351139.html</guid><wfw:comment>http://www.blogjava.net/vagasnail/comments/351139.html</wfw:comment><comments>http://www.blogjava.net/vagasnail/archive/2011/05/27/351139.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/vagasnail/comments/commentRss/351139.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/vagasnail/services/trackbacks/351139.html</trackback:ping><description><![CDATA[<style type="text/css">
<!--
*{margin:0px; padding:0px;}
#div1{
	background-color:red;
	display:inline;
	float:left;
	width:300px;
	height:200px;
}
#div2{
	background-color:green;
	display:inline;
	width:400px;
	height:300px;
}
#div3{
	background-color:blue;
	width:600px;
	height:300px;
	display:block;/*就是占一行*/
}
-->
</style>
<div style="display:block;width:80%;">
<div id="div1">11111111111111</div>
<div id="div2">222222222222</div>
<div id="div3">33333333333333</div>
<div>
<p>
&lt;div&gt;默认是display:block,&lt;span&gt;默认是display:inline<br/>
block占一行，默认是宽100%，而且不会与任何元素一行<br/>
inline可以一行显示多个<br/>
block可设置宽度和高度<br/>
inline不可以设置宽度和高度，只随内容变化<br/>
float元素自动变为inline-block，可以设置宽度和高度，可以一行显示多个，float元素不会重叠，知道该行结束就换行。<br/>
float元素在block元素之上，和inline平级，所以会覆盖block元素，不会覆盖inline元素，inline元素围绕在float周围。<br/>
clear清除指定边的浮动元素<br/>
浮动对象的高度将不会将父对象撑开，因为浮动对象已经脱离了文档流，<br/>
overflow:hidden将清除其内的浮动元素的浮动效果，<br/>
准确的说是使浮动对象重新回到文档流(浮动对象是浮动在文档流上面[block上面，和inline平行])，但依然保持inline-block效果<br/>
<br/>
<span style="color:red">谁能告诉我为什么IE里面会显示不正确呢?其它浏览器都好好的，我在本地用IE也是好好的。</span>
</p>
<img src ="http://www.blogjava.net/vagasnail/aggbug/351139.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/vagasnail/" target="_blank">vagasnail</a> 2011-05-27 01:00 <a href="http://www.blogjava.net/vagasnail/archive/2011/05/27/351139.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>