本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:left,是针对块级元素的浮动形式,是不同形式的两种状态。 
CSS display:inline和float:left两者的区别 
CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:left,是针对块级元素的浮动形式,是不同形式的两种状态。 
首先我们要明确,CSS display:inline;与float:left;正确含义。CSS display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1pxsolid#000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。 
当然这看起来不像是CSS display:inline;与float:left;的区别所在,但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。 
那么我们很清楚了,内联(CSS display:inline;)元素不能设置宽高,因为内联属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。 
运行代码: 
<html> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type" 
content="text/html;charset=gb2312"/> 
<title>float&inline - www.jbxue.com</title> 
<style> 
*{text-align:center;padding:4px;} 
div,p{text-align:left;} 
span{background:#f5f5f5;border-left:1px#eeesolid; 
border-top:1px#eeesolid;border-right:1px#cccsolid; 
border-bottom:1px#cccsolid;} 
ul#inlineli{display:inline;list-style:none; 
border-left:1px#cccsolid;width:300px;background:#f5f5f5;;} 
ul#floatli{float:left;display:inline;list-style:none; 
border-left:1px#666solid;width:300px;background:#f5f5f5;} 
</style> 
</head> 
<body> 
<spanstylespanstyle="width:300px;"> 
span为内联/inline元素,给他宽度赋值是没有效果的。</span> 
<spanstylespanstyle="width:100px;float:right;">span为内联/inline元素, 
给他宽度赋值100px+float:right;可以看到有了宽度。</span> 
<div> 
<p>这个li被定义为内联/inline,设置宽度没有效果</p> 
<ulidulid="inline"> 
<li>test</li> 
<li>test</li> 
</ul> 
</div> 
<div> 
<p>这个li被定义为内联/inline+float:left,设置宽度有效果</p> 
<ulidulid="float"> 
<li>test</li> 
<li>test</li> 
</ul> 
</div> 
</body> 
</html> 
[/code]

CSS display:inline和float:left两者区别探讨的更多相关文章

  1. display:inline-block 和float:left 的区别

    display:inline-block 和float:left 的区别   display是指显示状态,float是针对块级元素的浮动. 使用inline-block:控制元素的垂直对齐跟横向排列元 ...

  2. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  3. CSS3学习--dispaly:inline和float:left两者区别

    1.display:inline: 任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示)   2.float:left:指定元素脱离普通的文档流 ...

  4. CSS display和visibility的用法和区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它 ...

  5. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  6. display:inline-block 和 float 水平排列区别?

    文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素.而inline-block元素仍在文档流内.因此设置inline-block不需要清除浮动.当然,周围元素不会环 ...

  7. css display:inline

  8. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  9. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

随机推荐

  1. struts2学习笔记(5)---自己定义拦截器

    什么是拦截器? struts2中拦截器分为Struts2定义好的拦截器和自己定义的拦截器. 其作用是在一个Action运行之前进行拦截,在Action运行之后又增加某些操作. 实现原理 当请求一个Ac ...

  2. Linux下用dump实现备份和还原 ux下用dump实现备份和还原

    对于系统而言,我们可以有很多种办法去备份(还原)系统或文件,之所以要去做备份,就是为了在系统或文件遭到损害时,能及时恢复,把损失减小到最小.当然,对于企业服务器而言,备份的重要性是举足轻重.咱们今天就 ...

  3. docker no permmition problem

    resolved by: sudo docker run --privileged ....

  4. 利用JS_SDK实现QQ第三方登录

    前言 现如今,第三方登录已成为大部分网站必备的一项基础技能,引入时髦的第三方登录不仅能帮你吸引更多的用户,也让你的网站可以充分利用其他大型网站的用户资源.本次教程将让你的网站最快捷便利地引入QQ登录. ...

  5. PowerShell 批量增加ACL

    $serviceName="云服务名称"$vmName="虚拟机名称"$endPoint="终结点名称"$acl=New-AzureAclC ...

  6. mysql命令行方式添加用户及设置权限

    以前总是喜欢通过phpmyadmin去添加用户和数据库,这次装完系统后,配置了一大堆东东,实在不想安装phpmyadmin了,就通过命令行方式创建了数据库和设置权限,记录一下,免得以后总是百度 关键步 ...

  7. Genymontion安装

    Genymontion是什么 它提供的是Android的虚拟环境,和sdk的模拟器类似,能够支持windows,liunx,mac等操作系统,他比我们SDK的模拟器快很多,所以也是为什么很多开发人员会 ...

  8. Office365 InfoPath 表单的设计和应用(原创)

    表单的应用:我想到的有2种. 1 做为自定义表单库的模版. 通过发放url(模版链接)给用户来填写表单. 最后将在表单库中得到所有填写的信息列表. 如 2 上传表单做为ContentType 也就是自 ...

  9. 抽象(abstract)升级版变接口(interface) 继承(extends)升级版叫实现(implements) 升级版啊升级版 接口可以多继承

    Client --------------------------------------------------- public class Client{ public static void m ...

  10. 揭开CSS3媒体查询迷雾(min-width和max-width)

    本文参考MichelleKlann的Media Queries Demystified: Min-Width and Max-Width 媒体查询(media queries)是响应式设计(Respo ...