div和span、relative和absolute、display和visibility的区别
一、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、relative和absolute、display和visibility的区别的更多相关文章
- display和visibility的区别
一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...
- 基础总结(04)-- display:none;&&visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
- display 和 visibility 的区别
设置控件隐藏 1.display:none 不为元素保留位置 2.visibility:hidden 占位置,是对象在网页上看不到,所占空间没有变化
- display与visibility的区别
style.visibility和style.display都可以实现对页的隐藏,但visibility要占用域的空间,而display则不占用 将元素display属性设为 block,会在该元素后 ...
- Display与 Visibility的区别
隐藏元素的方法有: display:none或visibility:hidden visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被 ...
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)
css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...
- CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- display值的作用分别是什么?relative和absolute分别是相对谁定位的?
display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...
随机推荐
- Codeforces 932 A.Palindromic Supersequence (ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined))
占坑,明天写,想把D补出来一起写.2/20/2018 11:17:00 PM ----------------------------------------------------------我是分 ...
- 标题:如何使用ShareSDK实现Cocos2d-x的Android/iOS分享与授权
Cocos2DX 简介 Cocos2d-x是一套成熟的开源跨平台游戏开发框架.其引擎提供了图形渲染.GUI.音频.网络.物理.用户输入等丰富的功能,被广泛应用于游戏开发及交互式应用的构建.引擎的核心采 ...
- BZOJ1005明明的烦恼 Prufer + 分解質因數 + 高精度
@[高精度, Prufer, 質因數分解] Description 自从明明学了树的结构,就对奇怪的树产生了兴趣......给出标号为1到N的点,以及某些点最终的度数,允许在 任意两点间连线,可产生多 ...
- 将压缩包文件(rar/zip)伪装成图片(jpg/gif/png/ico)
1.在Windows上使用copy命令,缺点是只能是jpg文件,gif不支持,命令如下: copy in1.jpg+in2.rar out.jpg 2.网上说使用UEdit方式可以制作gif,但是测试 ...
- SQL-基础学习2--ORDER BY ,DESC,WHERE, BETWEEN,AND ,OR ,IN ,NOT
所使用的数据库资料在:数据库资料 第三课:排序检索数据 3.1 排序数据 按单列排序 如果不排序,数据一般将以它在底层表中出现的顺序显示,这有可能是数据最初添加到表中的顺序.但是,如果数据随后进行 ...
- Mac os x 10.8 svn server的搭建
Mac自带了svn服务端和客户端,所以我们不用再去下载了. 1 但首先 sudo vi /etc/paths 将xcode里的Contents/developer/usr/bin加入到path ...
- gvim的常用编辑快捷键
gvim的快捷键很多,很难记全,但是入门初期应该找过几种基本的命令 下面结合自己常用到的介绍下 光标跳转: 0:行首 $:行尾 e:下一个单词的结尾 w:下一个单词的开头 b:上一个单词 H:当前页面 ...
- redis主从连接不成功错误
redis主从连接不成功错误 学习了:https://blog.csdn.net/wzqzhq/article/details/64919133 需要增加 masterauth password.. ...
- Proftpd快速搭建FTP服务器
前言 在Linux系统中,FTP服务器软件有很多,都已经成熟,像vsftpd, wu-ftp, Pure-FTPd等.但这些软件安装配置起来都比较麻烦,搭建个人的FTP服务器,还是Proftpd比较简 ...
- favico是针对网页图标内容更改
favico.js源码 (function () { var Favico = function (opt) { "use strict"; opt = opt ? opt : { ...