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 1081（ZOJ 1074） To The Max（动态规划）

    Problem Description Given a two-dimensional array of positive and negative integers, a sub-rectangle ...

  2. Oracle 插入超4000字节的CLOB字段的处理方法

    最近在做系统开发的时候需要想Oracle数据库插入超过4000字节的CLOB字段,在网上查询了N久才发现下面的解决方案,故留存以备后查. 我们可以通过创建单独的OracleCommand来进行指定的插 ...

  3. openstack简易汉化

  4. openStack 瓶颈测试

  5. hpuoj 问题 A: 做不出来踢协会！！！

    问题 A: 做不出来踢协会!!! 时间限制: 1 Sec  内存限制: 128 MB提交: 291  解决: 33[提交][状态][讨论版] 题目描述 这是今天最水的一道题,如果没写出来的,呵呵,踢协 ...

  6. Linux2.6内核--中断线被关闭的情况

          中断系统是现代操作系统中不可获取的一个子系统,它由硬件主动触发并发送到CPU,最后由内核调用中断处理程序处理中断.       那么中断有时候需要关闭,这是为什么呢?       一般分为 ...

  7. HDU 2191 (13.12.2)

    悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  8. css开发经验&错误习惯

    CSS开发经验 1.尽量用class来定义样式.尽量少使用  .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会 ...

  9. 获取文件CRC和MD5

    unit untCRCMD5; interface { 获取文件CRC校验码 } function GetFileCRC(const iFileName: string): String; { 获取字 ...

  10. android 53 ContentProvider内容提供者

    ContentProvider内容提供者:像是一个中间件一样,一个媒介一样,可以以标准的增删改差操作对手机的文件.数据库进行增删改差.通过ContentProvider查找sd卡的音频文件,可以提供标 ...