区别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则相当把元素从页面中去除,其占用位置也将被删除。 

标签:div,span,标签,css
0
投稿

猜你喜欢

  • Windows Server 2019 MySQL数据库的安装与配置理论+远程连接篇

    2024-01-18 21:19:56
  • 端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!

    2023-08-23 06:29:31
  • Python日志:自定义输出字段 json格式输出方式

    2022-08-20 01:27:19
  • python 实现list或string按指定分段

    2023-10-30 02:04:20
  • mysql rand(x)生产重复随机序列

    2010-12-03 16:01:00
  • javascript 常用功能总结

    2023-07-02 03:50:17
  • Python人脸识别第三方库face_recognition接口说明文档

    2022-07-12 04:15:37
  • 基于python使用Pillow做动态图在图中生成二维码以及图像处理

    2022-12-29 16:33:03
  • flask-restful使用总结

    2023-02-10 13:24:21
  • pandas选择或添加列生成新的DataFrame操作示例

    2023-03-02 00:41:51
  • 简单介绍Python中的try和finally和with方法

    2021-01-15 07:09:49
  • Python QQBot库的QQ聊天机器人

    2022-03-18 23:29:30
  • ASP.NET Core中的Options选项模式

    2024-05-13 09:16:59
  • 用Python实现KNN分类算法

    2021-12-26 14:15:24
  • Go语言如何使用golang-jwt/jwt/v4进行JWT鉴权详解

    2024-02-07 05:13:41
  • 十个Python中常用的pip命令总结

    2022-04-05 02:31:16
  • 使用Pandas将inf, nan转化成特定的值

    2023-04-15 23:36:33
  • 使用k8s部署Django项目的方法步骤

    2022-12-30 01:59:56
  • asp使用jmail4.3的模块

    2010-03-17 20:58:00
  • CentOS 6.5下安装Python 3.5.2(与Python2并存)

    2021-06-24 04:33:54
  • asp之家 网络编程 m.aspxhome.com