1.display:inline:
任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示)
 
2.float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。
那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。
简单的说就是float可以设置宽高，然而display:inline;虽然也会浮动，但是他不能设置宽高。
 
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>float-inline</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#inline li{display:inline;list-style:none;

  border-left:1px#cccsolid;width:300px;background:#f5f5f5;height:200px;}

  ul#float li{float:left;display:inline;list-style:none;

  border-left:1px#666solid;width:300px;background:#f5f5f5; height:200px;}

</style> 

</head> 

<body>

<span style="width:300px;">

span为内联/inline元素，给他宽度赋值是没有效果的。</span> 

<span style="width:100px;float:right;">span为内联/inline元素，

给他宽度赋值100px+float:right;可以看到有了宽度。</span> 

<div>

<p>这个li被定义为内联/inline,设置宽和高度没有效果</p>

<ul id="inline">

<li>test</li>

<li>test</li>

</ul>

</div> 

<div>

<p>这个li被定义为内联/inline+float:left,设置宽和高度有效果</p>

<ul id="float">

<li>test</li>

<li>test</li>

</ul> 

</div> 

</body>

</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. Oracle keep详解

    原题目 select * from dept where deptno=(select max(deptno) keep(dense_rank last order by count(1))   fr ...

  2. 【设计模式 - 10】之外观模式（Facade）

    1      模式简介 外观模式隐藏了系统的复杂性,并向客户端提供了一个可以访问系统的接口.外观模式往往涉及到一个类,这个类提供了客户端请求的简化方法和对现有系统类方法的委托调用.外观模式使得系统中的 ...

  3. iOS开发总结-UIWebView 集成 浏览器

    // // detailWebViewController.m // BJ // // Created by shirenfeng on 16/11/6. // Copyright © 2016年 c ...

  4. ZEDBOARD启动自启配置（加载镜像） 分类： OpenCV ubuntu shell ZedBoard Eye_Detection 2014-11-08 18:53 167人阅读 评论(0) 收藏

    参考:陆书14.2.8 1)备份ramdisk8M.image.gz 2)加载rootfs镜像文件: 3)在镜像目录下建立自己所需文件夹(挂载目录): 我需要的挂载目录有两个: root/qt/ins ...

  5. [AngularJS] Sane, scalable Angular apps are tricky, but not impossible.

    Read fromhttps://medium.com/@bluepnume/sane-scalable-angular-apps-are-tricky-but-not-impossible-less ...

  6. SystemTap----常用变量、宏、函数和技巧

    http://blog.csdn.net/moonvs2010/article/category/1570309

  7. 简单回顾C++中的字符串

    C++中有两种字符串形式,一种是C语言字符数组,一般可以使用 char*指针来操作它:另一种是C++中基于标准库的string类型,这算是更高层次的抽象数据类型. 主要讨论一下string类型,既然是 ...

  8. log4j中Spring控制台输出Debug级信息过多解决方法

    log4j中Spring控制台输出Debug级信息过多解决方法 >>>>>>>>>>>>>>>>> ...

  9. MVC4将Controller与views分开

    最近自己在要着手从头做一个项目,自己想把mvc里的view和controller文件分别写在不同的项目里,刚开始在网上找了下,可是不尽理想,最后翻了一下自己以前参加的项目找到了这个做法. 这个需要在G ...

  10. SQL常用的语句和函数

    order by 的数值型灵活使用 select * from table_a where order by decode(函数,'asc',1,'desc',-1)*jsny; 控制试图的访问时间: ...