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. HDOJ 1013题Digital Roots 大数，9余数定理

    Problem Description The digital root of a positive integer is found by summing the digits of the int ...

  2. 安装 PLSQL笔记

    安装 PLSQL Developer 1. 下载PLSQL Developer 安装文件.安装文件类型是exe,直接安装就可以. 这个时候打开PLSQL Developer ,打开 help –> ...

  3. 4 hbase表结构 + hbase集群架构及表存储机制

      本博文的主要内容有    .hbase读取数据过程 .HBase表结构 .附带PPT http://hbase.apache.org/ 读写的时候,就需要用hbase了,换句话说,就是读写的时候. ...

  4. 353. Design Snake Game

    贪食蛇. GAME OVER有2种情况,1是咬到自己,2是出界. 1)用QUEUE来保留占据的格子,每走一格就添加1个,然后POll()最后一个. 做一个一样的SET来check要走的格子是不是已经在 ...

  5. java base64编码 加密和解密（切记注意乱码问题）

    BASE64 编码是一种常用的字符编码,在很多地方都会用到.JDK 中提供了非常方便的 BASE64Encoder 和 BASE64Decoder,用它们可以非常方便的完成基于 BASE64 的编码和 ...

  6. C程序中唯一序列号的生成

    在实际的软件开发项目中.常常会涉及唯一序列号的生成.本文以一个实际的程序为例,介绍了唯一序列号的生成过程. 本文生成的序列号的样式为:MMDDHHMINSS_XXXXXX. 程序例如以下: /**** ...

  7. mysql优化21条

    今天一个朋友向我咨询怎么去优化 MySQL,我按着思维整理了一下,大概粗的可以分为21个方向. 还有一些细节东西(table cache, 表设计,索引设计,程序端缓存之类的)先不列了,对一个系统,初 ...

  8. Fix java version mismatch in windows---stackoverflow

    Question: I have the 64bit version of the jdk installed on windows 7. I installed the 32 bit version ...

  9. 亲测linux 上安装php

    亲测安装php1.tar zvxf php-5.3.8.tar.gz 2.cd php-5.3.83../configure \ --prefix=/usr/local/php \--with-mys ...

  10. 第六篇：python高级之网络编程

    python高级之网络编程   python高级之网络编程 本节内容 网络通信概念 socket编程 socket模块一些方法 聊天socket实现 远程执行命令及上传文件 socketserver及 ...