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

时间: 2024-09-20 08:59:24

div和span、relative和absolute、display和visibility的相关文章

DIV与SPAN之间有什么区别

DIV与SPAN之间有什么区别? 解决思路: DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表.两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 具体步骤: 1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解: 测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div> 2

DIV与SPAN之间有什么区别?

  DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表.两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素).  具体步骤:  1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解:  测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>  2.块元素和行内元素也不是一成不变的

js-position的值, relative和absolute分别是相对于谁进行定位的?

问题描述 position的值, relative和absolute分别是相对于谁进行定位的? https://www.nowcoder.com/ta/front-end-interview/review?page=9 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位. relative 生成相对定位的元素,相对于其在普通流中的位置进行定位. 上面这两句是什么意思,谁能用白话解释下? 解决方案 absolute 在子div,它的父div必须有个posi

td中我想让div和span在一行显示,怎么解决?

问题描述 我想让div和span在一行显示,怎么解决<html><head></head><body> <table border='1'> <tr> <td>a</td> <td ><div>div</div><span>span</span></td> </tr> <tr> <td>b</td&

样式表CSS中div、span和center元素

css|样式表 <div>和<span>用来为内容指定样式或绑定脚本.虽然大多数HTML元素可以通过style属性来设置样式信息,但是许多HTML元素有自己默认的样式,该样式可能和style定义的样式混合甚至冲突,是我们不希望看到的.如:<strong style = "color: red">I am strong!</strong>.和其他html元素不同,<div>和<span>没有默认的显示样式.所以可以通

深入CSS结构:合理运用div和span

css 特意上网搜索了一下,关于div,说法很多. 把div看成是布局元素这种观点我想是最多的,类似有"用div代替table进行布局"."实战CSS+DIV布局"等等等等,太多了,还有不少人延用Dreamweaver的定义,称div为层,按Photoshop的层的概念来使用--有朋友干脆就直接称div和span为辅助布局元素. 怎么说呢?虽然我很想说对div类似的这种认识是错误的,div不是一个布局元素,没有一个tag是用来布局的,但是我是对的吗?我也不知道.几乎

深入学习CSS2.0结构,再谈div、span的困惑

css 使用div进行布局,提出div应当用于组织代码结构,现在我们再深入一点,div拥有语义吗? division(分割),对了,前段时间浏览w3schools时,看到它是这样定义div的:The div tag defines a division/section in a document. 我想我对div的理解是没错的.在文档中定义一个分割或者节点.我说div用于模块化页面内容,实际上从代码结构角度是展现xml化的节点结构.除了定义一个节点以外,div目前还用于定义一个分割,产生具有结构

深入学习网页技术CSS,再谈div、span的困惑!

css|网页 使用div进行布局,提出div应当用于组织代码结构,现在我们再深入一点,div拥有语义吗? 这个问题前段时间在研究群里曾激烈争论过,当时米随随发问:"什么是语义化WEB,div是什么?"小毅答曰:"DIV表示无意义容器."我说:"否定."然后旁边有人嘀咕:"...又要打起来了."我大笑着进入战斗状态,结果迅速被围攻了.呵呵,总是和主流格格不入的我又一次站在主流的对立面.我还是不赞成将div视为无意义容器.容器这个

div与span的区别

<div>与<span>的区别在于,<div>是一个块级元素(block-level)元素,它包围的元素会自动换行,而<span>仅仅是一个行内元素(inline elements),在它的前面后不会换行.<span>没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用<span>元素. 此外,<span>标记可以包含于<div>标记之中,成为它的子元素,而反过来则不成立,即<span&