使用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 方法二: ...
随机推荐
- split分割函数
java.lang.string.split split 方法 将一个字符串分割为子字符串,然后将结果作为字符串数组返回. stringObj.split([separator,[limit]]) 参 ...
- netsh命令之ip设置
批处理.VBS实现自动设置IP.默认网关.DNS.WINS.IE代理的代码,需要的朋友可以参考下 因为公司有同事负责大连.沈阳两个城市,经常在两地来回走动,到每个城市后,都要自己手动更改相应的网络配置 ...
- shape的使用
android在布局边缘位置处理圆角的两个办法: 1),一个是直接让美工切一张带有圆角的图片. 2),使用shape来解决. 第一种不在赘述,主要讲一下第二中方法来实现. 上边缘出现圆角,下边缘正常的 ...
- HDU 5828 Rikka with Sequence
好久没写线段树了,这题作为一个回味.. 第一种操作的话,就是一个延迟标记. 第二种操作可以暴力更新下去,但是有一个优化,如果某区间内所有值都是一样的,或者最大值和最小值相差1,那么到此结束,不要继续往 ...
- VBS基础篇 - 杂项 - Sendkeys
VBS基础篇 - 杂项 - Sendkeys 模拟键盘操作,将一个或多个按键指令发送到指定Windows窗口来控制应用程序运行 其使用格式为:object.SendKeys(string) obj ...
- Spring Bean 生命周期
转自:也谈Spring Bean的生命周期 开篇先用一张老图描述下Spring中Bean容器的生命周期. 插叙一下,记得某个博文中提到:“Spring的Bean容器只管理非单例Bean的生命周期,单例 ...
- JavaScript高级程序设计：第十四章
第十四章 一.表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在javascript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继 ...
- LeetCode OJ 95. Unique Binary Search Trees II
Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...
- svn rollback: 恢复到上一版本
18:48:32svn的文件版本是168,我想用167的版本覆盖掉168的版本如何搞? 18:52:47先把本地的那个文件用rm命令删掉,然后,使用svn up -r 167 文件路径,UP下来的文件 ...
- 关于Spring Security 3获取用户信息的问题
标签: spring security 3标签获取用户信息 2013-01-05 10:40 5342人阅读 评论(0) 收藏 举报 分类: Spring(25) java(70) 前端(7) ...