web前端html+css页面内容的六种隐藏方式

合集 - web前端(29)

1.1-web前端 基础标签 、图片、超链接2023-09-192.2-web前端 音频、视频、表格、表单2023-09-193.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-194.5-web前端 定位position2023-09-195.6-web前端的特效 平面转换transfrom2023-09-196.7-web前端 空间转换，3D效果2023-09-197.8-web前端 动画 案例2023-09-198.9-web前端 flex弹性布局2023-09-199.10-JavaScript 点击事件 随机点名器2023-09-2010.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示2023-09-2311.12-web前端轮播图案例 （小米商城）2023-09-2712.css字体样式2023-10-0813.css样式对单行和多行文本的隐藏2023-10-1014.css伪类和伪元素2023-10-12

15.web前端html+css页面内容的六种隐藏方式2023-10-16

16.JavaScript的基础语法和数据类型2023-10-2617.JavaScript 数组Array存储方式及对象Object2023-10-2718.JavaScript数据类型的转换2023-10-3019.JavaScript运算符及优先级2023-10-3120.JavaScript条件判断if 语句2023-11-0121.JavaScript for循环控制语句2023-11-0222.JavaScript 其他循环语句和跳转语句2023-11-0323.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-0424.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-0425.JavaScript Array对象（属性、方法） 留言板案例2023-11-0426.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例2023-11-0727.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历2023-11-1328.JavaScript事件 2023-11-1829.JavaScript BOM对象2023-11-18

收起

一、使用透明度

语法：opacity:0

注意：元素消失，但是还会占据空间，只是视觉看不出来

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; }</style><div class="box"></div>

 

二、使用display

语法：display:none

注意：元素消失，不会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; display:none; }</style><div class="box"></div>

 

三、scale 缩放

语法：transform:scale(0)    值大于1放大，小于1缩小

注意：元素消失，但是还会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; transform:scale(0) }</style><div class="box"></div> 

 

四、使用visility

语法：visibility:hidden 隐藏 / visible显示

注意： 元素消失，但是还会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; visibility:hidden; }</style><div class="box"></div>

 

五、使用宽高和overflow

语法：width:0;overflow:hidden;

注意： 元素消失，但是还会占据空间

<style> .box{ width: 0px; height: 0px; background-color: aquamarine; overflow:hidden; visibility:hidden; }</style><div class="box"></div>

 

 

六、使用position定位

语法：position:absolute; top:-当前元素的高度；left：-当前元素的宽度

注意： 元素消失，不会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; position:absolute; top:-100px; left:-100px; }</style><div class="box"></div>