css中display设置显示隐藏、定位功能

取值范围0-1,【0完全消失，1完全显示】这个属性和display：none隐藏元素有一个很相似的地方都是能够让元素隐藏的，但是display能够让元素的位置在页面中消失，但是opacity这个属性只是让元素看不见，但实际上位置还在原来的地方，另外一个区别就是display显示隐藏不能直接让一个元素直接使用hover直接显示，但是opacity可以使用hover显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day08学习css层叠样式表</title>
    <style type="text/css">
        /* 字体属性——font-family*/
        /*         
        .one {
            width: 100px;
            height: 100px;
            user-select: all; */
        /* 多出来的会被修剪 */
        /* overflow: hidden; 
    }*/
        
        div {
            display: none;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        
        p:hover+div {
            display: block;
        }
    </style>
</head>

<body>
    <p>出现吧 </p>
    <!-- <div class="one">
    </div> -->
    <div></div>

</body>

</html>

效果图：

当我鼠标聚焦在文字上才会出现被隐藏的元素。

opacity和display的区别：【display不占位置，opacity占位置它于rgba有点类似】

二、定位

1.为什么要定位

当我们滚动窗口的时候，某些盒子是固定屏幕的某个位置的，比如一些导航栏。

这样的效果，标准流成浮动都无法快速实现，此时需要定位来实现。

定位的组成：

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

2.定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

static	静态定位（默认）
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移：

边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right四个属性。

top	顶端偏移量（定义元素相对于其父元素上边线的距离）
bottom	底部偏移量（定义元素相对于其父元素下边线的距离）
left	左侧偏移量（定义父元素相对于父元素左边线的距离）
right	右侧偏移量（相对于父元素右边线的距离）

静态定位

默认的元素定位方式，无定位的意思。

选择器{position：static} 静态定位按照标准流特性摆放位置，它没有边偏移；静态定位在布局时很少遇到。

相对定位

元素的移动位置是根据它自身原来的位置而言

选择器{position：relative}

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置参照点是自己原来的位置）
在原来标准流的位置继续占有，后面的盒子仍然以标准流方式对待它（不脱标，保留原来位置）

绝对定位

元素移动是相对于它父元素。

选择器{position：absolute}

其特点：

如果父元素没有定位，则以浏览器为准定位。
如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的元素作为参考点移动位置。
绝对定位不在占有原先的位置（脱标）。

案列展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
        }
        
        .one {
            background-color: aqua;
        }
        
        .two {
            background-color: brown;
        }
        
        .thr {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="thr"></div>
</body>

</html>

效果图：

上一篇：盒子样式及阴影

天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

Handy 离线语音转写教程：免费开源，本地跑不连网

你肯定遇到过：语音输入 5 分钟，云转写服务要登录、要付费；或者出差没网，想口述一段会议纪要，发现全都没法用。Handy 离线语音转写工具就是为解决这个问题做的，声音全程不出你的电脑。## 🎯 这个工具是什么Handy 是一款免费、开源、跨平台（Windows / macOS / Linux）的离线语音转写应用。按住快捷键说话，松手后文字直接粘贴进任意输入框，全程不联网。核心能力就三条：

天工造物局

Supabase Edge Functions 编写与部署完整指南：Deno 运行时上的无服务器利器

Supabase Edge Functions 是基于 Deno 运行时编写、面向 Web 的无服务器函数服务，帮你把后端逻辑部署到全球边缘节点。作为 Postgres 开发平台的核心能力之一，它让你用 TypeScript 就能快速搭建低延迟的 API 端点、Webhook 接收器和 AI 集成服务，无需管理任何服务器。本文将从零带你完成一个 Edge Function 的创建、本地调试与全球部

天工造物局

celld从v0.1.0到v0.2.0为何不能滚动升级：两个破坏性变更详解

celld 是一个自托管、分布式的 Durable Objects 开源守护进程，它在你自己的机器上运行 Cloudflare Workers，每个对象对应一个独立的 SQLite 数据库，并持续复制到你自己拥有的 S3 兼容存储桶中。如果你正准备把 v0.1.0 的集群（fleet）升级到 v0.2.0，这篇文章必须先读：这次升级**不能滚动升级**，必须采用"先停光、再启动"的一次性发布方式。