区别div和span、relative和absolute、display和visibility
发布时间：2009-12-13 12:18:00
div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性，简单的罗列出它们的区别与使用要点，供大家参考。
一、div和span的区别
div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。
二、relative和absolute的区别
relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
三、display和visibility的区别
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除，其占用位置也将被删除。
0
投稿猜你喜欢
- 这里是一个基于GMap2和XML的小例子，数据存在XML文件中 ，这是最简单的模式，却相当地有用。实例的网址是： http://sunjia
- 许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕。本期薯片
- 首先呢，需要有两个mysql服务器。如果做测试的话可以在同一台机器上装两个mysql服务程序，注意要两个运行程序的端口不能一样。我用的是一个
- ORA-01578:Oracle data block corrupted(file # num,block # num)产生原
- Window.Open详解 一、window.open()支持环境：JavaScript1.0+/JScript1.0+/Nav2
- 翻译：ShiningRay @ Nirvana Studio作者：Douglas Crockford来源：http://www.crockf
最近设计一个优惠券列表，有个属性是有效日期，因为空间有限，必须要把开始日期和结束日期在一行显示，这样就出现一排的数字，日期有好几种我们习惯的- 我是从去年初开始学习web标准的，两年下来也有些心得。最近跳槽了正好闲在家里，写一些出来和大家交流一下。1对于web标准和W3C XHTML
- 严格控制Session可以将不需要Session的内容（比如帮助画面，访问者区域，等等）移动到关闭Session的独立ASP应用程序中。在基
- 在网页设计初期，我们会先收集大家对设计方向的期许，我们经常收集到这样的建议：产品经理：要易用，要简洁设计总监：要特色，要亮点部门经理：要大气
- DreamWeaver 4的到来让大家兴奋吧？但是大家一定为DreamWeaver4里面的字体、文字大
- 近日在月影的blog上找到一段代码。看了老半天没明白什么意思，倍受打击！不死心，于是仔细分析思考了好几次，才明白过来这段函数的意义。js果然
- 据了解绝大多数开发人员对于索引的理解都是一知半解，局限于大多数日常工作没有机会、也什么没有必要去关心、了解索引，实在哪天某个查询太慢了找到查
- 从 Google 的一个细节说起：整个虚线框都是“Next”的可点击区域。看似不经意，却直接提升了细节的可用性。其它页码也巧妙地和上面的字母
- 如果一张表的数据达到上百万条，用游标的方法来删除简直是个噩梦，因为它会执行相当长的一段时间…… 开发人员的噩梦——删
- 动态联接库(DLL)是加快应用程序关键部分的执行速度的重要方法，但有一点恐怕大部分人都不知道，那就是在ASP文件也能通过调用DLL来加快服务
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 使用ASP设置指定站点CPU最大使用程度'=============================================
- 如何使用ADO 2x Command 对象读取数据？具体的读数据代码如下：Cmd = CType(EC.Example1
- JS操作二进制很麻烦，而且一直没有一个好的无损压缩工具来实现纯文本的压缩。所以钻研了一段时间的gzip，后来发现还是仅用 LZ77 比较容易
