div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性，今天52CSS.com简单的罗列出它们的区别与使用要点，供大家参考。
一、div和span的区别
div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
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则相当把元素从页面中去除，其占用位置也将被删除。
分享到：
相关推荐
布局方面，CSS的`display`属性控制元素如何显示，如设置为`block`（块级元素，如`<div>`）、`inline`（内联元素，如`<span>`）或`none`（隐藏元素）。`float`属性用于让元素浮动，常见值有`left`、`right`和`none`，...
1. **position**：定义元素的定位方式，如absolute（绝对定位）、relative（相对定位）、static（静态定位）和fixed（固定定位）。 2. **top, bottom, left, right**：控制元素相对于其正常位置或最近定位祖先元素的...
这段代码中，我们使用了`position: relative`和`position: absolute`来控制元素的位置。`.discount-price`在默认情况下是隐藏的，当鼠标悬停在`.product-price`上时，通过`:hover`伪类将`.discount-price`的`display...
例如，提示框可能被定位在某个元素下方，通过`position`属性（如`absolute`或`relative`）和`top`，`left`属性实现。为了使其呈现为圆角，可以使用`border-radius`。此外，`box-shadow`可以添加阴影效果，提升视觉...
CSS中的定位是通过`position`属性实现的，例如`relative`、`absolute`、`fixed`和`static`。当子元素使用定位时，它会检查父元素的定位属性。如果父元素设置了定位（非`static`），子元素将根据父元素的位置进行...
5. **Div和span的区别**： - **Div**是块级元素，会占据一整行，可设置宽度和高度；**span**是内联元素，不会自动换行，无法设置宽度和高度。 6. **盒子模型**： 盒子模型包括边框`border`，内补白`padding`，...
- 定位：为了使提示框出现在鼠标悬停元素的附近，我们可以利用CSS的相对定位（relative）和绝对定位（absolute）属性。将提示框的父元素设置为相对定位，提示框本身设置为绝对定位。 - 隐藏与显示：默认情况下，...
position 的值，relative 和 absolute 定位原点是？** - **display** 的值包括 `block`, `inline`, `inline-block`, `flex`, `grid`, `none` 等。 - **position** 的值包括 `static`, `relative`, `absolute`, `...
<div id="tooltip" style="display:none;position:absolute;z-index:1000;background:#333;color:#fff;padding:10px;border-radius:5px;"></div> ``` 3. **jQuery 插件** 如果项目已经引入了 jQuery，那么可以...
<span class="tooltiptext">这是气泡提示的内容</span> </div> .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltiptext { visibility: hidden; width: 120px; ...
<div><a id="bt_r"><div class="bt_txt">►</div><span>下一幅图片</p></span></a></div> <div><a id="bt_c"><div class="coptxt">© </div><span><p></p></span></a> </div> </div> </div> <div class="fcopy">...
position 的值，relative 和 absolute 定位原点是？** - **display 值**：`block`, `inline`, `inline-block`, `flex`, `grid` 等。 - **position 值**：`static`, `relative`, `absolute`, `fixed`, `sticky`。 - ...
display:none与visibility:hidden的区别** - **display:none**：元素完全消失，不占用任何空间。 - **visibility:hidden**：元素不可见，但保留原来的空间。 **31. CSS link和@import的区别** - **link**：在 ...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了更多强大的功能和丰富的样式，其中之一就是创建各种类型的提示框。弹出提示框在网页交互中扮演着重要角色，用于显示信息、警告、确认或者错误消息。本文将深入...
JavaScript和jQuery是Web开发中广泛使用的两种技术，用于创建交互性和动态效果。"Tooltip"是其中一个常见的功能，它提供了一种在鼠标悬停时显示额外信息的方式，增强了用户体验。本篇文章将深入探讨JavaScript和...
top:3px}#shouji{margin-right:14px}#u{display:none}#c-tips-container{display:none}.bdsug{position:absolute;width:418px;background:#fff;display:none;border:1px solid #817f82}.bdsug li{width:402px;color:...
二、Div与Span的区别 - Div是块级元素，占用一整行，可以包含其他元素；Span是内联元素，只占据自身内容的宽度，不影响其他元素的排列。 - 内联元素设置宽高无效，块级元素可以设置宽高。 三、盒子模型 - 盒子模型...
Web页面帮助功能是网站设计中不可或缺的部分，它旨在为用户提供清晰、便捷的指导，帮助他们理解和使用网站的各项功能。在本文中，我们将深入探讨Web页面帮助功能的重要性和实现方式，以及相关的代码示例。 首先，...