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. ethtool的基本设置

    ethtool是设置网卡属性.IP/TCP相关协议属性的基本工具,功能还是很强大的.ubuntu的版本里没有默认集成,使用apt-get install 安装之.... 使用概要:ethtool et ...

  2. 用js判断一个复选框是否被选中

    <html> <head>        <title>            复选框全选.全不选.反选.必选一个        </title>    ...

  3. php判断是不是ajax访问

    <?php // php 判断是否为 ajax 请求 if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strto ...

  4. Asp.net网站后台代码不能访问-iis部署

    最近自己写了点东西,部署的时候确发生了点问题,后台代码访问不了,错误为:由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.   错误详细提示: HTTP 错误 404.3 -  ...

  5. 用Excel完成专业化数据统计、分析工作

    使用Excel可以完成很多专业软件才能完成的数据统计.分析工作,比如:直方图.相关系数.协方差.各种概率分布.抽样与动态模拟.总体均值判断,均值推断.线性.非线性回归.多元回归分析.时间序列等.本专题 ...

  6. JVM类载入过程及主动引用与被动引用

    了解类载入全过程,有助于了解JVM执行过程,以及更深入了解java动态性(解热部署,动态载入),提高程序灵活性. 类载入全过程: JVM将class文件字节码文件载入到内存中.并对数据进行校验解析和初 ...

  7. CentOS6.5解决中文乱码与设置字符集

    [ CleverCode发表在csdn博客中的原创作品,请勿转载,原创地址:http://blog.csdn.net/clevercode/article/details/46377577] 1)说明 ...

  8. 用 Qt 中的 QDomDocument类 处理 XML 文件（上）

      我们可以看到,如果所要读取的XML文件不是很大,采用DOM读取方法还是很便捷的,由于我用的也是DOM树读取的方法,所以,本文所介绍的也主要是基于DOM的方法读取. 根据常用的操作,我简单的把对XM ...

  9. Oracle中wm_concat()的使用方法

    以下两种方式使用wm_concat()的使用方法是等效的. 方法一:使用窗口函数,wm_concat支持窗口函数 select distinct classKey,className, classOr ...

  10. 在Linux下用netstat查看网络状态、端口状态

    在Linux下用netstat查看网络状态.端口状态 在linux一般使用netstat 来查看系统端口使用情况步. netstat命令是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表.实 ...