一、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的区别的更多相关文章

  1. display和visibility的区别

    一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...

  2. 基础总结(04)-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

  3. display 和 visibility 的区别

    设置控件隐藏 1.display:none  不为元素保留位置 2.visibility:hidden  占位置,是对象在网页上看不到,所占空间没有变化

  4. display与visibility的区别

    style.visibility和style.display都可以实现对页的隐藏,但visibility要占用域的空间,而display则不占用 将元素display属性设为 block,会在该元素后 ...

  5. Display与 Visibility的区别

    隐藏元素的方法有: display:none或visibility:hidden visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被 ...

  6. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  7. css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  8. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  9. display值的作用分别是什么?relative和absolute分别是相对谁定位的?

    display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-it ...

随机推荐

  1. Powershell简介及其编程访问

    Powershell是下一代的命令行外壳程序,较之于它的前身(cmd.exe),它的功能更加强大,也更加易用.最根本的区别在于它是基于对象的操作(基于.NET Framework),而不是基于字符串的 ...

  2. Java 浅析,生成OFD文件

    摘要:这几天遇到个需要,需要提供用户下载电子证照,最简单的方法实现:word做了一份模板,利用网页工具转成OFD文件,http://www.yozodcs.com/page/example.html用 ...

  3. jvm 问题分析

    jmap dump:file=[文件名].dump [进程号]  生成dump root@VM-185-251-ubuntu:/opt/scripts# jmap -dump:file=three.d ...

  4. Ant -----ant标签和自定义任务

    随便记一下 Ant的用法吧.ant ,maven, gradle ,三个打包工具到齐了,Ant 常见标签解析,ant 自定义task . <?xml version="1.0" ...

  5. 为什么硬盘明明还有空间,linux却说硬盘空间不足?inode;mkdir: 无法创建目录"shen1": 设备上没有空间

    现象:df -h显示硬盘还有14G空间,但是touch file/mkdir directory都失败,提示硬盘没有空间 原因:df -ia查看下inode的使用情况,发现已经爆了,(下图显示使用88 ...

  6. 线程安全-一个VC下多个网络请求

    一.线程安全变量控制显示隐藏loading框 问题描写叙述: 同一页面有两个异步网络请求,第一个请求開始,loading旋转.第二个请求開始loading旋转.第一个结束,loading停止旋转,但是 ...

  7. Kaggle的Outbrain点击预测比赛分析

    https://yq.aliyun.com/articles/293596 https://www.kaggle.com/c/outbrain-click-prediction https://www ...

  8. Nutch学习笔记一 ---环境搭建

    学习环境: ubuntu 概要: Nutch 是一个开源Java 实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫. 通过nutch,诞生了hadoop.tika ...

  9. Linux图形界面和文字界面的切换

    Ctrl+Alt+F1~F6:切换到文字界面 登陆tty1~tty6终端, 运行等级为run level 3 Ctrl+Alt+F7 或者输入命令startX:切换到图形界面,运行等级为run lev ...

  10. js利用offsetWidth和clientWidth来计算滚动条的宽度

    原文: http://www.haorooms.com/post/js_scroll_width 参考: https://www.cnblogs.com/benxiaohai-microcosm/p/ ...