使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:
内联元素可以转换成块级元素，常用的方法比如可以为内联元素使用float属性让内联元素浮动起来，或者为内联元素添加display:block。虽然两者都可以让内联元素转换成块级元素，但是有区别的。代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>蚂蚁部落</title>

<style type="text/css">

a{

  height:30px;

  line-height:30px;

  float:left;

  background-color:#F60

}

</style>

</head>

<body>

<a href="#">蚂蚁部落</a>

</body>

</html>

以上代码使用float实现了a元素转换成块级元素，可以看出宽度是根据内容而定的。再看一段代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>蚂蚁部落</title>

<style type="text/css">

a{

  height:30px;

  line-height:30px;

  display:block;

  background-color:#F60

}

</style>

</head>

<body>

<a href="#">蚂蚁部落</a>

</body>

</html>

以上代码为a元素添加display:block将其转换为会计元素，但是宽度却不根据内容而定的，而是默认状态下为width:100%。
可能两者之间还有更多的不同点，欢迎大家留言补充。

使用float和display:block将内联元素转换成块元素的不同点的更多相关文章

  1. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  2. html中的块元素(Block)和内联元素(Inline)(转)

    我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...

  3. 块元素block，内联元素inline; inline-block;

    block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...

  4. 元素显示模式：块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  5. div内嵌p,div等块元素出现的问题

    div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...

  6. 给定一个字符串，把字符串内的字母转换成该字母的下一个字母，a换成b，z换成a，Z换成A，如aBf转换成bCg， 字符串内的其他字符不改变，给定函数，编写函数 void Stringchang（const char*input,char*output）其中input是输入字符串，output是输出字符串

    import java.util.Scanner; /*** * 1. 给定一个字符串,把字符串内的字母转换成该字母的下一个字母,a换成b,z换成a,Z换成A,如aBf转换成bCg, 字符串内的其他字 ...

  7. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  8. 【CSS】display: inline-block，内联元素

    什么是内联元素? <CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定 ...

  9. asp中将文本框内的日期转换成datetime类型的数据

    将字符类型的日期转化为DateTime类型主要有以下方法: 方法一:Convert.ToDateTime(string) string格式有要求,必须是yyyy-MM-dd hh:mm:ss 方法二: ...

随机推荐

  1. Activity之间的隐士跳转

    /**             * 方法一:在构造函数中指定             */            /*Intent intent=new Intent(this,TwoActivity ...

  2. Oracle字符串操作[转:http://www.cnblogs.com/xd502djj/archive/2010/08/11/1797577.html]

    ORACLE 字符串操作 1 字符串连接   SQL> select 'abc' || 'def' from dual; 'ABC'|------abcdef 2 小写SQL>select ...

  3. VBS 读取文本文件特殊字符前如逗号的值并赋值给变量

    我使用的仿真终端SecureCRT需要使用一个脚本,支持VBS的.我需要实现如下功能: 首先文本文件在:D:\100.txt文本文件的内容为:9 0,randy,9 1,jeff,9 2,sameul ...

  4. loadrunner使用socket协议来实现客户端对服务器产生压力实例。（通过发送心跳包，达到连接多个客户端的目的）

    #include "lrs.h" vuser_init(){ char *ip; int handler; //编写获取LR分配的Vuser IP函数,将IP保存在ip变量中. i ...

  5. IP相关常识

    IP相关常识 一.  IP地址概念 IP地址是一个32位的二进制数,它由网络ID和主机ID两部份组成,用来在网络中唯一的标识的一台计算机.网络ID用来标识计算机所处的网段:主机ID用来标识计算机在网段 ...

  6. Office Web Apps 错误

    owa安装完后,在sharepoint网站上打开word,excel,报错,Sorry, something went wrong, 通过correlation id找到错误信息(如何在sharepo ...

  7. android网络编程之HttpUrlConnection的讲解--DownLoadManager基本用法

    1.DownLoadManager是Android用系统服务(Service)的方式来优化处理长时间的下载操作的一个工具类.避免了我们去处理多线程,通知栏等等. 2.不要忘记添加权限 <uses ...

  8. jq插件开发总结

    http://www.cnblogs.com/silverLee/archive/2009/12/22/1629925.html jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQue ...

  9. viewpager处理（三）：让viewpager不预加载下一页

    有时候viewpager加载页面的时候,我们发现页面的数据量很大,预加载的话会消耗性能,为了节省用户流量和手机性能,所以我们想让viewpager不自动预加载下一页,怎么实现呢? viewpager预 ...

  10. 高可用开源方案 Keepalived VS Heartbeat对比

    最近因为项目需要,简单的试用了两款高可用开源方案:Keepalived和Heartbeat.两者都很流行,但差异还是很大的,现将试用过程中的感受以及相关知识点简单总结一下,供大家选择方案的时候参考. ...