1.display:inline:
任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示)
 
2.float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。
那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。
简单的说就是float可以设置宽高，然而display:inline;虽然也会浮动，但是他不能设置宽高。
 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>float-inline</title>
  5. <style>
  6.   *{text-align:center;padding:4px;}
  7.   div,p{text-align:left;}
  8.   span{background:#f5f5f5;border-left:1px#eeesolid;
  9.   border-top:1px#eeesolid;border-right:1px#cccsolid;
  10.   border-bottom:1px#cccsolid;}
  11.   ul#inline li{display:inline;list-style:none;
  12.   border-left:1px#cccsolid;width:300px;background:#f5f5f5;height:200px;}
  13.   ul#float li{float:left;display:inline;list-style:none;
  14.   border-left:1px#666solid;width:300px;background:#f5f5f5; height:200px;}
  15. </style> 
  16.  
  17. </head> 
  18.  
  19. <body>
  20. <span style="width:300px;">
  21. span为内联/inline元素，给他宽度赋值是没有效果的。</span> 
  22.  
  23. <span style="width:100px;float:right;">span为内联/inline元素，
  24. 给他宽度赋值100px+float:right;可以看到有了宽度。</span> 
  25.  
  26. <div>
  27. <p>这个li被定义为内联/inline,设置宽和高度没有效果</p>
  28. <ul id="inline">
  29. <li>test</li>
  30. <li>test</li>
  31. </ul>
  32. </div> 
  33.  
  34. <div>
  35. <p>这个li被定义为内联/inline+float:left,设置宽和高度有效果</p>
  36. <ul id="float">
  37. <li>test</li>
  38. <li>test</li>
  39. </ul> 
  40.  
  41. </div> 
  42.  
  43. </body>
  44. </html>
 

CSS3学习--dispaly:inline和float:left两者区别的更多相关文章

  1. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  2. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  3. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  4. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  5. 该不该用inline-block取代float? inline和float的区别?

    该不该用inline-block取代float? 请看这篇文章引用: jtyjty99999的博客 让块级元素 水平排列的通常方式是float, 但是float可能会带来很多意外的问题 可以考虑用in ...

  6. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  7. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  8. 页面布局排版-block，inline，float，relative，absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

  9. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

随机推荐

  1. poj 1704 Georgia and Bob（阶梯博弈）

    Georgia and Bob Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8656   Accepted: 2751 D ...

  2. Eclipse Maven插件无法搜索远程库

    创建Maven工程,发现添加依赖“Add Dependency”的时候无法自动搜索远程库. 导致此问题的可能原因: 1.update index的时候失败了. 解决:打开Window/Show Vie ...

  3. Pick-up sticks - POJ 2653 (线段相交)

    题目大意:有一个木棒,按照顺序摆放,求出去上面没有被别的木棍压着的木棍.....   分析:可以维护一个队列,如果木棍没有被压着就入队列,如果判断被压着,就让那个压着的出队列,最后把这个木棍放进队列, ...

  4. BufferedInputStream,FileInputStream,FileChannel实现文件拷贝

    从上篇文章中知道BufferedInputStream是自带缓冲区的输入流,可以大大减少IO次数,提供效率.下面的例子中实现了用BufferedInputStream与FileInputStream实 ...

  5. JAVA wait(), notify(),sleep详解

    转自: http://blog.csdn.net/zyplus 在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的进程同步是通过synchronized()来实现的,需要说明的是, ...

  6. DevExpress 控件 GridControl常见用法

    刚接触DevExpress第三方控件,把GridControl的常见用法整理一下,以供参考: 说明: gcTest   GridControl gvText    GridView //隐藏最上面的G ...

  7. iOS--iOS7摄像头识别二维码功能

    iOS–iOS7摄像头识别二维码功能 属性介绍: AVFoundation 框架基于以下几个类实现图像捕捉 ,通过这些类可以访问来自相机设备的原始数据并控制它的组件. AVCaptureDevice ...

  8. [转] git修改author

    Changing author info To change the name and/or email address recorded in existing commits, you must ...

  9. 史上最全WebView使用，附送Html5Activity一份

    本文来自:http://www.jianshu.com/users/320f9e8f7fc9/latest_articles感谢您的关注. WebView在现在的项目中使用的频率应该还是非常高的.我个 ...

  10. Fragment的懒加载

    我们在做应用开发的时候,一个Activity里面可能会以viewpager(或其他容器)与多个Fragment来组合使用,而如果每个fragment都需要去加载数据,或从本地加载,或从网络加载,那么在 ...