当前位置: 开发笔记 > 编程语言 > 正文

CSS定位、flex及gird布局

作者：Eva绫波_772 | 来源：互联网 | 2023-09-17 12:50

positionclass=reference-link

position" class="reference-link">1.CSS定位 `position`
CSS定位通过position属性进行设置，共有以下5个值：

static：静态定位，默认定位方式，元素定位完全由浏览器控制，按照页面的文档流进行定位。
relative：相对定位，元素相对于其正常位置进行定位。
absolute：绝对定位，相对于离它最近的”定位元素”进行偏移,如果没有,就一直向上,直到最上级元素(html,body)。
fixed：固定定位，相对于根元素进行定位，可以当做是绝对定位的一个特例。
sticky：粘性定位，是相对定位和固定定位的二合一，

“定位元素”：一旦某一个元素使用了非static的定位属性,那么它就转换成了”定位元素”，通常把某个元素的position属性设置为relative，使它成为“定位元素”。

模态框案例演示
`博客管理后台`
`onclick="document.querySelector('.modal').style.display='block'">`
`登录`

`class="modal">`

`class="modal-bg"`
`onclick="this.parentNode.style.display='none'"`
`>`

action="" class="modal-form">

用户登录

type="text" name="username" placeholder="请输入用户名" />

type="password" name="password" placeholder="请输入密码" />

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: lightskyblue;
color: #fff;
display: flex;
padding: 0.5em 1em;
}
header button {
margin-left: auto;
width: 4em;
}
.modal {
/* 把模态框容器转为"定位元素" */
position: relative;
}
.modal .modal-form fieldset {
background-color: seashell;
border: none;
padding: 2em;
box-shadow: 0 0 5px #888;
display: grid;
gap: 1em;
}
.modal .modal-form fieldset legend {
padding: 5px 1em;
background-color: rgb(93, 214, 164);
color: white;
}
.modal .modal-form {
/* 固定定位 */
position: fixed;
top: 10em;
left: 20em;
right: 20em;
}
/* 半透明的遮罩 */
.modal .modal-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0, 0, 15, 0.5);
}
.modal {
display: none;
}

2.Flex布局

3.Gird布局

推荐阅读

go
Python 伦理黑客技术：深入探讨后门攻击（第三部分）

在《Python 伦理黑客技术：深入探讨后门攻击（第三部分）》中，作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流，难以确定消息批次的结束点，这给后门攻击的实现带来了挑战。为了解决这一问题，文章提出了一系列有效的技术方案，包括使用特定的分隔符和长度前缀，以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性，还为安全研究人员提供了宝贵的参考。 ... [详细]

蜡笔小新 2024-11-09 16:33:02
go
ClassList对象学习心得与表单事件非空校验技巧

ClassList对象学习心得与表单事件非空校验技巧 ... [详细]

蜡笔小新 2024-11-10 13:48:02
install
服务器部署中的安全策略实践与优化

服务器部署中的安全策略实践与优化 ... [详细]

蜡笔小新 2024-11-10 13:04:30
install
如何在Conda环境中高效配置并安装PyTorch与TensorFlow GPU版

在Conda环境中高效配置并安装PyTorch和TensorFlow GPU版的方法如下：首先，创建一个新的Conda环境以避免与基础环境发生冲突，例如使用 `conda create -n pytorch_gpu python=3.7` 命令。接着，激活该环境，确保所有依赖项都正确安装。此外，建议在安装过程中指定CUDA版本，以确保与GPU兼容性。通过这些步骤，可以确保PyTorch和TensorFlow GPU版的顺利安装和运行。 ... [详细]

蜡笔小新 2024-11-10 10:49:24
install
深入解析Java虚拟机的内存分区与管理机制

Java虚拟机的内存分区与管理机制复杂且精细。其中，某些内存区域在虚拟机启动时即创建并持续存在，而另一些则随用户线程的生命周期动态创建和销毁。例如，每个线程都拥有一个独立的程序计数器，确保线程切换后能够准确恢复到之前的执行位置。这种设计不仅提高了多线程环境下的执行效率，还增强了系统的稳定性和可靠性。 ... [详细]

蜡笔小新 2024-11-09 19:53:02
install
E. DeadLee：思维导图与拓扑结构的深度解析

题目 E. DeadLee：思维导图与拓扑结构的深度解析问题描述：给定 n 种食物，每种食物的数量由 wi 表示。同时，有 m 位朋友，每位朋友喜欢两种特定的食物 x 和 y。目标是通过合理分配食物，使尽可能多的朋友感到满意。本文将通过思维导图和拓扑排序的方法，对这一问题进行深入分析和求解。 ... [详细]

蜡笔小新 2024-11-09 15:43:40
web
Web开发框架概览：Java与JavaScript技术及框架综述

Web开发涉及服务器端和客户端的协同工作。在服务器端，Java是一种优秀的编程语言，适用于构建各种功能模块，如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示，同时借助JavaScript增强交互性和动态效果。此外，现代Web开发还广泛使用各种框架和库，如Spring Boot、React和Vue.js，以提高开发效率和应用性能。 ... [详细]

蜡笔小新 2024-11-09 11:59:38
web
如何撰写初级和高级前端开发者的专业简历

如何撰写初级和高级前端开发者的专业简历 ... [详细]

蜡笔小新 2024-11-09 08:36:22
import
深入解析Java多线程同步机制与应用

本文深入探讨了Java多线程环境下的同步机制及其应用，重点介绍了`synchronized`关键字的使用方法和原理。`synchronized`关键字主要用于确保多个线程在访问共享资源时的互斥性和原子性。通过具体示例，如在一个类中使用`synchronized`修饰方法，展示了如何实现线程安全的代码块。此外，文章还讨论了`ReentrantLock`等其他同步工具的优缺点，并提供了实际应用场景中的最佳实践。 ... [详细]

蜡笔小新 2024-11-08 16:11:26
go
精选Linux经典著作在数字图书馆展出

数字图书馆近期展出了一批精选的Linux经典著作，这些书籍虽然部分较为陈旧，但依然具有重要的参考价值。如需转载相关内容，请务必注明来源：小文论坛（http://www.xiaowenbbs.com）。 ... [详细]

蜡笔小新 2024-11-08 10:55:29
object
单链表的高效遍历及性能优化策略

本文探讨了单链表的高效遍历方法及其性能优化策略。在单链表的数据结构中，插入操作的时间复杂度为O(n)，而遍历操作的时间复杂度为O(n^2)。通过在 `LinkList.h` 和 `main.cpp` 文件中对单链表进行封装，我们实现了创建和销毁功能的优化，提高了单链表的使用效率。此外，文章还介绍了几种常见的优化技术，如缓存节点指针和批量处理，以进一步提升遍历性能。 ... [详细]

蜡笔小新 2024-11-07 15:55:20
include
某CMS 20180827版前端存在GETShell漏洞分析

2018年9月21日，Destoon官方发布了安全更新，修复了一个由用户“索马里的海贼”报告的前端GETShell漏洞。该漏洞存在于20180827版本的某CMS中，攻击者可以通过构造特定的HTTP请求，利用该漏洞在服务器上执行任意代码，从而获得对系统的控制权。此次更新建议所有用户尽快升级至最新版本，以确保系统的安全性。 ... [详细]

蜡笔小新 2024-11-06 11:57:32
go
Docker入门指南：初探容器化技术

Docker入门指南：初探容器化技术摘要：Docker 是一个使用 Go 语言开发的开源容器平台，旨在实现应用程序的构建、分发和运行的标准化。通过将应用及其依赖打包成轻量级的容器，Docker 能够确保应用在任何环境中都能一致地运行，从而提高开发和部署的效率。本文将详细介绍 Docker 的基本概念、核心功能以及如何快速上手使用这一强大的容器化工具。 ... [详细]

蜡笔小新 2024-11-06 10:32:10
object
深入解析Spring AOP框架中的代理对象生成机制

在前文探讨了Spring如何为特定的bean选择合适的通知器后，本文将进一步深入分析Spring AOP框架中代理对象的生成机制。具体而言，我们将详细解析如何通过代理技术将通知器（Advisor）中包含的通知（Advice）应用到目标bean上，以实现切面编程的核心功能。 ... [详细]

蜡笔小新 2024-11-06 10:11:10
export
在Ubuntu系统中配置Python环境变量的方法与技巧

在Ubuntu系统中配置Python环境变量是确保项目顺利运行的关键步骤。本文介绍了如何将Windows上的Django项目迁移到Ubuntu，并解决因虚拟环境导致的模块缺失问题。通过详细的操作指南，帮助读者正确配置虚拟环境，确保所有第三方库都能被正确识别和使用。此外，还提供了一些实用的技巧，如如何检查环境变量配置是否正确，以及如何在多个虚拟环境之间切换。 ... [详细]

蜡笔小新 2024-11-05 21:42:25

CSS定位、flex及gird布局

博客管理后台

2.Flex布局

3.Gird布局 var cpro_id = "u6885494";

3.Gird布局