使用float和display:block将内联元素转换成块元素的不同点
使用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将内联元素转换成块元素的不同点的更多相关文章
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- 块元素block，内联元素inline; inline-block;
block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...
- 元素显示模式：块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- div内嵌p,div等块元素出现的问题
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...
- 给定一个字符串，把字符串内的字母转换成该字母的下一个字母，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, 字符串内的其他字 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- 【CSS】display: inline-block，内联元素
什么是内联元素? <CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定 ...
- asp中将文本框内的日期转换成datetime类型的数据
将字符类型的日期转化为DateTime类型主要有以下方法: 方法一:Convert.ToDateTime(string) string格式有要求,必须是yyyy-MM-dd hh:mm:ss 方法二: ...
随机推荐
- 配置elasticsearch 以及ik分词
https://github.com/medcl/elasticsearch-analysis-ikhttps://www.elastic.co/downloads/past-releases/ela ...
- MAC图片格式转换
OS X下有一个sips的程序可以用来处理图片. sips的名称功能非常强大,参考 帮助文档 . 这里我们只用到其中的一个功能,转换图片格式. 命令参考: sips - s format jpeg ...
- ios 给view添加一个渐变的背景色
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init]; gradientLayer.colors = @[(__bridge ...
- Cross compile openwrt
在Centos7上交叉编译生成OpenWrt固件 安装ss-* 获取最新的ss, 当前是 wget https://github.com/shadowsocks/shadowsocks-libev/a ...
- VirtualBox中安装CentOS（新手教程）
1.VirtualBox下载 官网:http://www.virtualbox.org/wiki/Downloads 下载好之后,一路下一步安装即可 2.CentOS下载 官网:https://www ...
- python中telnetlib模块的使用
一.Windows下开启Telnet服务 (详见:与Win7防火墙无缝结合 Telnet功能测试) 1.Windows 2000/XP/2003/Vista:默认已安装但禁止了Telnet服务 (1) ...
- html元素中class属性值多个空格分格是什么意思？
即指定多个class,这是bootstrap常干的事,比如 <div class="alert alert-info"> 请问,这两个class之间的关系是什么,二者的 ...
- kindle使用参考
转载链接:http://blog.sina.com.cn/nuanfengjia 今天买的kindle499刚刚到货了,体验略差,还有一个就是无按键,完全不会玩,只能自己慢慢摸索了. [新Kindle ...
- javascript IP验证
//IP验证function isIP(strIP){try{if(strIP.length<7){return false;}var re=/^(\d+)\.(\d+)\.(\d+)\.(\d ...
- 'customerService' for bean class [com.cd.service.business.customer.impl.CustomerService]
'customerService' for bean class [com.cd.service.business.customer.impl.CustomerService] 此处报错是因为我 把一 ...