区别div和span、relative和absolute、display和visibility

最新推荐文章于 2023-07-01 14:57:02 发布
最新推荐文章于 2023-07-01 14:57:02 发布
阅读量217 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： CSS 浏览器 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_16848/article/details/81884254
本文详细解释了div与span的区别，relative与absolute的区别，以及display与visibility的区别。通过实例代码演示如何在网页中使用这些元素与属性实现布局与定位。

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

 

 

visibility：可以控制div的显示和隐藏，但是隐藏后页面显示空白。

Js代码 复制代码

 

style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden"; //隐藏
document.getElementById("typediv1").style.visibility="visible"; //显示


display：可以使div隐藏后释放占用的页面空间。

Js代码 复制代码

 

style="display: none;"
document.getElementById("typediv1").style.display="none"; //隐藏
document.getElementById("typediv1").style.display=""; //显示

 

iteye_16848
关注
智慧屏和智能穿戴开发：容器组件div
HarmonyOS技术社区
12-01 1446
HarmonyOS应用开发文档更新修改说明：div组件补充示例代码和示例效果图，方便开发者掌握该组件的使用方式 基础容器，用作页面结构的根节点或将内容进行分组。 支持设备 表1组件的设备支持情况 智慧屏 智能穿戴 支持 支持 权限列表 无 子组件 支持。 属性 名称 类型 默认值 必填 描述..
深入理解DIV和SPAN的区别
12-13
深入理解DIV和SPAN的区别 DIV 块元素，span是行内元素 Span的宽度依照包围着对象的宽度而定，所以不能用宽度属性width设置span标记内对象的宽度，但可以设置span的margin（外补丁）值，span中的对象位置与父对象的距离 l  Div  块元素        100%         会换行 l  Span 行内元素  文本实际长度 l  块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化 Eg:#div{display:inherit;}   #span{display:block;} 何时用span 在同一行中，想对其中文字或图片设
css position属性定位详解
weixin_45111619的博客
12-07 463
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: absolute position: relative position: fixed position: static position: inherit static static 为 position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等属性。 inherit inherit 值如同其他 css 属性的 inher
常见的CSS属性隐藏与显示元素
g13753730391的博客
07-01 579
使用 visibility: hidden;可以将元素隐藏在页面中，但是它的布局仍然存在。这意味着元素占用的空间仍然存在，只是看不到了。这是最常见的隐藏元素的方法。使用 display: none;可以完全隐藏元素，使其不在页面中显示。使用opacity:0;可以将元素完全隐藏，但元素的占用空间仍然存在。以上是几种常见的隐藏元素的方法。opacity: 1;
html：<aside> <ul class=“sidebar”> <div class=“out”></div> <li>手机 平板 电话卡<span>></span></li> <li>电视 盒子<span>></span></li> <li>路由器 智能硬件<span>></span></li> <li>移动电源 插线板<span>></span></li> <li>耳机 音箱<span>></span></li> <li>电池 存储卡<span>></span></li> <li>保护套 后盖<span>></span></li> <li>贴膜 其他配件<span>></span></li> <li>米兔 服装<span>></span></li> <li>箱包 其他周边<span>></span></li> <div class=“a”> < img src=“img/phone_img.png” width=“20px” height=“430px”> </div> <div class=“c”> <div> <a href=" “>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> </div> <div class=“m”> < img src=“img/phone_img01.png” width=“25px” height=“430px” /> </div> <div class=“n”> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#“>选购</a > </div> <div> <a href=”#">选购</a > </div> </div> </ul> </aside> css：aside{ width: 250px; height: 443px; background: #949494; position: relative; left: -460px; margin: 0 auto; } aside ul.sidebar li{ width: 190px; height: 44.3px; position: relative; padding:0 30px; line-height: 44.3px; color: #fff; } aside ul.sidebar li span{ float: right; color: #fff; margin: 10px; } aside ul.sidebar li:hover{ background: #ff6700; } aside ul.sidebar div.out{ width: 500px; height: 442px; border: 1px solid transparent; background: #00ffff; position: absolute; left: 250px; z-index: 1; display: none; } aside div.a img{ position: relative; top: -438px; left: 280px; } aside div.c div a{ position: relative; top: -889px; left: 400px; } aside div.m img{ position: relative; top: -1343px; left: 511px; } aside div.n div a{ position: relative; top: -1794px; left: 667px; }aside{ width: 250px; height: 443px; background: #949494; position: relative; left: -460px; margin: 0 auto; } aside ul.sidebar li{ width: 190px; height: 44.3px; position: relative; padding:0 30px; line-height: 44.3px; color: #fff; } aside ul.sidebar li span{ float: right; color: #fff; margin: 10px; } aside ul.sidebar li:hover{ background: #ff6700; } aside ul.sidebar div.out{ width: 500px; height: 442px; border: 1px solid transparent; background: #00ffff; position: absolute; left: 250px; z-index: 1; display: none; } aside div.a img{ position: relative; top: -438px; left: 280px; } aside div.c div a{ position: relative; top: -889px; left: 400px; } aside div.m img{ position: relative; top: -1343px; left: 511px; } aside div.n div a{ position: relative; top: -1794px; left: 667px; }让重叠文字，回到自己的位置
03-09
但里面的子元素，比如div.a img、div.c div a等，都用了相对定位（position: relative），但top和left的值都是负数，比如top: -438px，left: 280px。这样的定位方式会把元素从原来的位置移动到其他地方，尤其是当多...
<!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8" /> <title>3D 抽獎卡片展示</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; /* background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); */ background-color: black; font-family: Arial, sans-serif; overflow: hidden; } .stage { perspective: 1200px; width: 400px; height: 500px; position: relative; } .card-stack { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } .card { position: absolute; padding: 20px; width: 320px; left: 40px; top: 50%; transform: translateY(-50%); border-radius: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; backface-visibility: hidden; border: 3px solid black; overflow: hidden; transition: transform 0.8s, opacity 0.8s, z-index 0.8s; } .card-header { font-size: 32px; font-weight: bold; padding: 10px; text-align: center; border-bottom: 2px solid rgba(255, 255, 255, 0.5); } .card-body { padding: 10px; font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; } .name { background: rgba(255, 255, 255, 0.25); padding: 3px 8px; border: 2px solid #fff; border-radius: 6px; font-size: 16px; font-weight: 500; } </style> </head> <body> <div class="stage"> <div class="card-stack" id="stack"> <div class="card"> <div class="card-header">頭獎 - iPhone</div> <div class="card-body"> <span class="name">小明</span><span class="name">小華</span ><span class="name">小美</span> </div> </div> <div class="card"> <div class="card-header">二獎 - iPad</div> <div class="card-body"> <span class="name">小強</span><span class="name">阿玲</span ><span class="name">阿杰</span><span class="name">小魚</span ><span class="name">小熊</span> </div> </div> <div class="card"> <div class="card-header">三獎 - AirPods</div> <div class="card-body"> <span class="name">小玉</span><span class="name">小芳</span> </div> </div> <div class="card"> <div class="card-header">四獎 - Starbucks</div> <div class="card-body"> <span class="name">阿文</span><span class="name">阿國</span ><span class="name">小紅</span><span class="name">小綠</span ><span class="name">小藍</span><span class="name">小紫</span ><span class="name">小白</span> </div> </div> <div class="card"> <div class="card-header">五獎 - 全聯禮券</div> <div class="card-body"> <span class="name">小美</span><span class="name">阿東</span> </div> </div> <div class="card"> <div class="card-header">六獎 - 小確幸</div> <div class="card-body"> <span class="name">阿良良</span><span class="name">小黑</span ><span class="name">小黃</span><span class="name">阿秋黑</span ><span class="name">小光</span><span class="name">阿星</span ><span class="name">小藍</span><span class="name">小草</span> <span class="name">阿良</span><span class="name">小黑</span ><span class="name">小黃</span><span class="name">阿秋</span ><span class="name">小光</span><span class="name">阿星</span ><span class="name">小藍</span><span class="name">小草</span> <span class="name">阿良</span><span class="name">小黑</span ><span class="name">小黃</span><span class="name">阿秋</span ><span class="name">小光</span><span class="name">阿星</span ><span class="name">小藍</span><span class="name">小草</span> </div> </div> </div> </div> <script> // 可選配色板 const textColorPalette = [ 0x3498db, 0xe74c3c, 0x2ecc71, 0xf1c40f, 0x9b59b6, 0x1abc9c, ]; const colorPalette = [ "#3498db", "#e74c3c", "#2ecc71", "#f1c40f", "#9b59b6", "#1abc9c", ]; const stack = document.getElementById("stack"); let cards = Array.from(stack.children); // 計算文字顏色對比度 function getTextColor(bgColor) { // Remove '#' and parse hex string to RGB const hex = bgColor.replace("#", ""); const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4, 6), 16); // Calculate brightness using the same formula const brightness = 0.299 * r + 0.587 * g + 0.114 * b; // Return hex color string based on brightness return brightness > 186 ? "#000000" : "#ffffff"; } // 套用顏色 cards.forEach((card, i) => { card.style.background = colorPalette[i % colorPalette.length]; // colors[i].bg; card.style.color = getTextColor(colorPalette[i % colorPalette.length]); // colors[i].text; }); function rotateCards() { let first = cards.shift(); cards.push(first); cards.forEach((card, i) => { if (i === 0) { card.style.transform = "translateY(calc(-50% - 180px)) translateZ(-250px) rotateX(55deg) scale(0.8)"; card.style.opacity = 0.5; card.style.zIndex = 1; } else if (i === 1) { card.style.transform = "translateY(-50%) translateZ(0px) rotateX(0deg) scale(1.2)"; card.style.opacity = 1; card.style.zIndex = 10; } else if (i === 2) { card.style.transform = "translateY(calc(-50% + 180px)) translateZ(-250px) rotateX(-55deg) scale(0.8)"; card.style.opacity = 0.5; card.style.zIndex = 1; } else { card.style.transform = "translateY(-50%) translateZ(-600px) scale(0.6)"; card.style.opacity = 0; card.style.zIndex = 0; } }); } rotateCards(); setInterval(rotateCards, 3000); </script> </body> </html> 將上述單一html檔案修改成. vite + vie3 + ts 其他功能一率不變，資料動態傳入，使用 props
最新发布
09-04
position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .card-inner.flipped { transform: rotateY(180deg); } .card-front, .card-back { position...
属性及定位（绝对定位，相对定位）
weixin_56319791的博客
01-09 966
字体属性 font-size: 设置字体大小，字体大小默认是16px font-family:设置字体类型 font-weight: 设置字体粗细 bold bolder light lighter 100~900 font-style:设置字体的样式 italic /*斜体*/ font:字体大小/行高 字体类型 /*font:14px/20px "宋体"*/ text属性 text-align :设置文本水平距离 left:水平靠左 right:水平靠右 justify:两端对齐 center:水平
css html span块状不换行
梦想与激情同在
04-28 930
span标记的样式设定width属性，会发现不会产生效果。 如果设置display:block，width属性生效，但是此时的span跟div一样了。 如果设置display:inline-block，则span并列在同行，而且width属性生效。 元素display属性的常见值说明： block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。 inline：...
为什么span设置float浮动或position:absolute定位后可以设置其width height宽高？
wangzhixiangcopy的博客
09-13 4345
span元素为行级元素，其display默认属性为：inline； 当将span设置浮动float后就可以设置宽高， 原因是：span设置浮动后其display属性变成了：inline-block行级块元素； 效果是这样的： ...
html设置元素可见性,CSS Display(显示) 与 Visibility（可见性） | 菜鸟教程
weixin_40008969的博客
06-11 989
CSS Display(显示) 与 Visibility(可见性)display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。Box 1Box 2Box 3隐藏元素 - display:none或visibility:hidden隐藏一个元素可以通过把display属性设置为'none'，或把visibility属性设置为'hidden'。但是请注意，这两种方法会...
【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度
weixin_34236497的博客
12-11 392
postion:absolute 跳出文本流，不是行内元素，设置宽高有效，我的理解。 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话：position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position：absolute、 float中任意一个，都会让元素以display:i...
CSS中关于定位position的问题,blockquote,div,span三个的区别
tavor的专栏
11-09 6900
CSS中关于定位position的问题，定位共分为四种：1.static 无特殊定位，对象遵循HTML定位规则,2.absolute 绝对定位，如果父元素有使用定位，则是相对于父元素的坐标进行绝对定位;否则相对于浏览器的边界（或者说文档的边界）进行绝对定位。3.relative 相对定位，就是相对于他本身应在的位置进行定位。4.fixed 固定定位，相对于浏览器边界是固定的，如
绝对定位display:absolute如何实现垂直居中？
Qlly
03-11 5122
首先设置一个父元素（.parent）和一个子元素（.child）的样式。 CSS代码： .parent { position: relative; width: 200px; height: 200px; background-color: #eee; } .child { width: 70px; height: 70px; position: absolute; back...
CSS visibility 属性
前端小99的博客
04-18 3263
属性定义及使用说明 visibility属性指定一个元素是否是可见的。 提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。 默认值： visible 继承： yes 版本： CSS2 JavaScript 语法： object.style.vi
使用HTML和CSS创建提示工具(Tooltip)的教程
1. 基本结构：提示工具通常由两部分组成：触发元素（通常是带有`title`属性的HTML元素）和实际的提示文本（隐藏的`div`或`span`元素）。在本例中，CSS类`.tooltip`用于触发元素，`.tooltiptext`用于提示文本。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值