CSS的定位(文档流,相对定位,绝对定位,固定定位)

news/2024/11/14 6:35:15/
htmledit_views">

 网页文档流

概念

网页文档流(Document Flow)是指元素在页面中出现的先后顺序。它决定了网页的整体布局和排版方式,也是实现网页布局的基础。

文档流的特点:将一个页面从上到下分为一行一行的,其中块元素独占一行,而行内元素在每一行从左到右依次排列,直到铺满当前的行布局。

块元素的文档流

自上而下流水线摆放

html"><style>div{width: 50px;height: 50px;background-color: darkgrey;border: 2px red solid;} </style>
</head>
<body><div></div><div></div><div></div><div></div>
</body>

在这里使用了块级元素作为一个代码演示,我们可以看到 每个块级元素独占一行,从上到下。

 行内元素的文档流

从左到右流水线摆放

html"><style>b{background-color: darkgrey;border: 2px red solid;} </style>
</head>
<body><b>行内元素代码演示</b><b>行内元素代码演示</b><b>行内元素代码演示</b><b>行内元素代码演示</b><b>行内元素代码演示</b><b>行内元素代码演示</b><b>行内元素代码演示</b><b>行内元素代码演示</b><b>行内元素代码演示</b>
</body>

 这里使用了行内元素进行了一个代码演示,我们可以看到行内元素在每一行从左到右依次排列,直到铺满当前的行布局。

  网页文档流的缺陷

从以上块级元素和行内元素的代码演示中我们可以看到关于文档流的缺陷:

1.元素排列及布局不灵活

2.元素之间间隙过小

3.空格折叠

缺陷1

html"><style>#img1{width: 50px;height: 50px;border: 2px red solid;}</style>
</head>
<body><b>缺陷1</b><img src="./第五图片.png" id="img1">
</body>

 元素排列及布局不灵活,元素高低不平,元素间底边对齐,当想要做出排列不一的网页效果时,就相对比较困难。

缺陷2 

html"><style>img{width: 50px;height: 50px;border: 2px red solid;}</style>
</head>
<body><img src="./第五图片.png"><img src="./第五图片.png"><img src="./第五图片.png"><br><img src="./第五图片.png"><img src="./第五图片.png"><img src="./第五图片.png">
</body>

 元素之间间隙过小,元素之间看起来十分拥挤,对于网页观感相对来说不舒适

 缺陷3

html"><b>空格演示</b>               <b>空格演示</b><br><b>空格演示</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>空格演示</b>

第一行代码中间 隔了几个空格,但是在代码演示中却只有一个空格的间隔,这就是文档流的空格折叠

第二行代码中,用了标签&nbsp;代码演示中 文本与文本之间的间隔变大了,这就说明在文本流中我们可以使用&nbsp;标签来进行一个空格的实现

 如何克服文档流的缺陷?脱离文档流!


 相对定位(relative

  概念

使用相对定位的盒子会相对于原本的位置,通过偏移到指定的距离,到达新的位置;盒子本体仍处于文档流中。

CSS代码添加 position: relative;
水平方向:left、right
垂直方向:top、bottom

注:1.两个方向各选一个参数即可定位;
         2.定位的数值可以为负数。 

实验1:

html"><style>#div1{width: 100px;height: 100px;background-color: gainsboro;border: red 3px solid;padding: 10px;opacity: 0.3;}#div2{width: 100px;height: 100px;background-color: gainsboro;border: red 3px solid;padding: 10px;position: relative;left: 30px;bottom: 30px;}</style>
</head>
<body><div id="div1"></div><div id="div2"></div>

id="div1" 的盒子是一个正常的文档流的盒子,而id="div2"的盒子使用了相对定位方式定位,因此相对于原本位置向下,向左移动了30px。

我们把id="div1" 的盒子看成是未进行相对定位的盒子,即"原本的位置";而id="div2"盒子是移动后的盒子,这样我们可以清晰的看到,使用相对定位的盒子仍在文档流中

实验2:

以下是三个块元素的文档流排版:

这里是通过相对定位将第二个块元素进行了一个向右,向上偏移30px

html"><style>#div1{width: 100px;height: 100px;background-color: red;}#div2{width: 100px;height: 100px;background-color: green;position: relative;left: 30px;bottom: 30px;}#div3{width: 100px;height: 100px;background-color: yellow;position: relative;}</style>
</head>
<body><div id="div1">红</div><div id="div2">绿</div><div id="div3">黄</div>
</body>

通过实验我们可以看到,使用相对定位对盒子进行的移动 ,对其他元素并没有影响。

相对定位练习

html"><style>img{width: 40px;height: 40px;}#img1{border:green 3px solid;}#img2{border: blue 3px solid;position: relative;left: 20px;top: 20px;}#img3{border: red 3px solid;}div{width: 40px;height: 40px;border: yellow 3px solid;}</style>
</head>
<body><img src="./第五图片.png" id="img1"><img src="./第五图片.png" id="img2"><img src="./第五图片.png" id="img3"><br><img src="./第五图片.png"><img src="./第五图片.png"><img src="./第五图片.png"><div></div><div></div><div></div>
</body>

 


 绝对定位(absolute)

绝对定位是相对于最近的已定位父元素或根元素进行定位,它会脱离正常文档流,并且不占据原来的位置,通过指定上、下、左、右属性来定位元素。

CSS代码添加 position: absolute;
水平方向:left、right
垂直方向:top、bottom

注:1.两个方向各选一个参数即可定位;
         2.定位的数值可以为负数
         3.每个设置了绝对定位的盒子,都会有专属的浮层,有几个绝对定位的盒子,就有几个浮层。

 实验1

绝对定位前的效果(未脱离文档流): 

对第一个盒子进行绝对定位向下偏移了20px,向右偏移了30px后(这里更改了盒子大小以便更好观察到浮层盒子的活动):

 

html"><style>#div1{width: 70px;height: 70px;background-color: red;position: absolute;left: 30px;top: 20px;}#div2{width: 100px;height: 100px;background-color: green;}#div3{width: 100px;height: 100px;background-color: blue;}
</style></head>
<body><div id="div1"></div><div id="div2"></div><div id="div3"></div>
</body>

根据绝对定位后效果看,我们可以得知,绝对定位的盒子从正常文档流中脱离,但对其他的兄弟盒子的定位并无影响,就好像这个盒子并不存在,继而向上填补掉那个空出的位置(浮层)。

就和排队一样,这里相当于3个人在排队,第一个人由于绝对定位的位置变动,而空出来的位置则被下一个人填补上。

 实验2

接下来我们对第二个盒子进行同样位置的绝对定位

html"><style>#div1{width: 70px;height: 70px;background-color: red;position: absolute;left: 30px;top: 20px;}#div2{width: 70px;height: 70px;background-color: green;position: absolute;left: 30px;top: 20px;}#div3{width: 100px;height: 100px;background-color: blue;}
</style></head>
<body><div id="div1"></div><div id="div2"></div><div id="div3"></div>
</body>

 在这里我们发现第一个红色的盒子消失了,那是因为绝对定位具有覆盖性;当第二个盒子进行了绝对定位后,第三个盒子就向上补空位;而第二个盒子由于设置了和第一个盒子一样的偏移位置且盒子大小一样,所以第二个盒子定位后的位置和第一个盒子一样,所以第一个盒子被第二个盒子覆盖掉了。

 实验3

如果第二个盒子的大小小于第一个盒子那么第二个盒子还会被覆盖吗?

html">#div2{width: 50px;height: 50px;background-color: green;position: absolute;left: 35px;top: 25px;}

答案是 :不会。也就是说如果第二个盒子尺寸大于第一个盒子时,第一个盒子才会出现覆盖的情况;如果是小于的话,那么就不会出现覆盖的情况。 

绝对定位练习

用绝对定位来做出以下图片的效果吧

html"><style>article{width: 600px;height: 600px;background-color: rgb(117, 117, 117);position: absolute;left: 100px;top: 100px;}#div1{width: 70px;height: 70px;background-color: blue;position: absolute;left: 300px;top: 250px;}#div5{width: 40px;height: 40px;background-color: yellow;position: absolute;left: 312px;top: 262px;}#div2{width: 60px;height: 60px;background-color: rgb(255, 255, 255);position: absolute;left: 500px;top: 150px;}#div3{width: 60px;height: 60px;background-color: rgb(255, 255, 255);position: absolute;left: 100px;top: 150px;}#div4{width: 400px;height: 40px;background-color: rgb(255, 255, 255);position: absolute;left: 100px;top: 400px;}</style></head>
<body><article><div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5"></div></article></body>

固定定位(fixed

固定定位是绝对定位的子类别,一个设置固定定位的元素是相对于视窗固定的,就算页面文档发生了滚动,它也会一直待在相同的地方。

固定定位代码添加:position : fixed

水平方向:left  right

垂直方向:top  bottom

注:1. 两个方向各选一个参数即可定位;

        2. 定位的数值可以为负数

        3. 每个设置了固定定位的盒子,都会有专属的浮层,有几个固定定位的盒子,就有几个浮层。

 实验1

没有进行盒子固定定位前的盒子排列(未脱离文档流)

为了对固定定位演示更加清晰,将盒子3进行固定定位(脱离文档流)

html"><style>div{/* 给所有div盒子进行宽和高的定值 */width: 200px;height: 200px;background-color: gray;margin-bottom: 5px;}#div3{/* 背景色为红色 */background-color: red;/* 下外边距5px */margin-bottom: 5px;/* 进行固定定位 */position: fixed;/* 向左偏移至距离浏览器窗口顶端208px */left: 208px;/* 垂直向上偏移至距离浏览器窗口顶端70px */top: 70px;}
</style>
<body><div>1</div><div>2</div><div id="div3">3</div><div>4</div>
</body>

 调整页面高度,滚动进度条后,盒子3的位置

 我们通过盒子的固定定位示例可以看到,当我们对盒子进行固定定位,原本的盒子就会根据我们对其设置的位置进行偏移。例如示例中的盒子3,当盒子3移动到了其所固定的位置时,原本属于盒子3的位置则空了出来(浮层),紧随其后的盒子就往上填补掉空出的位置(浮层)。而被固定定位的盒子3的位置不会进行改变,就算页面文档发生了滚动,它也会一直固定在相同的地方。

固定定位练习

通过用固定定位,来做一个和下图一样效果的盒子吧!

这是一个未进行固定定位的网页

html"><body>  <header>  <h1 align="center">第五人格</h1>  <p align="center">欢迎来到: <ins>第五人格</ins></p>  <hr> <nav>  <ul type="none">  <li><a href="#">战绩</a></li>  <li><a href="#">排位</a></li>  <li><a href="#">匹配</a></li>  <li><a href="#">归宿</a></li>  </ul>  </nav>  </header>  <hr>  <main>  <section>  <article>  <h3>文章标题</h3>  <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  <br><br><br><img src="../CSS常用属性/第五图片.png" alt="文章配图" width="200" height="200">  <p>想了解第五人格:<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  </article>  <aside>  <h3>侧边栏</h3>  <p>侧边栏内容,如快速链接、广告等。</p>  <table border="1">  <tr>  <th>角色</th>  <th>链接</th>  </tr>  <tr>  <td>求生者</td>  <td><a href="角色A详情页.html">专业A详情</a></td>  </tr>  <tr>  <td>监管者</td>  <td><a href="角色B详情页.html">专业B详情</a></td>  </tr>  </table>  </aside>  <div style="clear: both;"></div></section>  <section id="contact">  <h4>联系我们</h4>  <form>  姓名:<input type="text" id="name" name="name"><br>  邮箱:<input type="email" id="email" name="email"><br>  <input type="submit" value="提交">  </form>  </section>  </main>  <hr>  <footer>  <p>版权所有 &copy; 2024 第五人格官方</p>  </footer>  </body>  

 用固定定位设置一个浮动的盒子

html">nav ul{height:30px;  /*给父盒设置高度,避免高度塌陷影响其他兄弟盒*/background-color: aquamarine;}nav ul li{/* 右外边距设置 */margin-right: 20px;/* 导航栏内容左浮动 */float:left;}#contact{width: 220px;height: 160px;background-color: pink;border: 2px black solid;/* 用固定定位制作一个浮动的小盒子 */position: fixed;/* 向左偏移至距离浏览器窗口顶端1100px */left:1100px;/* 垂直向上偏移至距离浏览器窗口顶端500px */top:500px;}

 


http://www.ppmy.cn/news/1546859.html

相关文章

YOLO即插即用模块---MEGANet

MEGANet: Multi-Scale Edge-Guided Attention Network for Weak Boundary Polyp Segmentation 论文地址&#xff1a; 解决问题&#xff1a; 解决方案细节&#xff1a; 解决方案用于目标检测&#xff1a; 即插即用代码&#xff1a; 论文地址&#xff1a; https://arxiv.org…

c++ 二分查找

二分法&#xff08;Binary Search&#xff09;是一种高效的查找算法&#xff0c;它在有序数组中查找一个元素&#xff0c;利用分治法的思想将查找空间逐步缩小一半。二分法的时间复杂度是 O(log n)&#xff0c;比起线性查找&#xff08;O(n)&#xff09;要高效得多。 基本思想…

TOEIC 词汇专题:科技硬件篇

TOEIC 词汇专题&#xff1a;科技硬件篇 在科技硬件领域中&#xff0c;有一些核心词汇能帮助大家更准确地表达设备的兼容性、功能等内容。今天我们就来学习这些词汇&#xff0c;并配上例句&#xff0c;帮助您更轻松地掌握&#xff01; 1. 设备与制造 科技硬件包括各类设备&…

Scala图书馆创建图书信息

图书馆书籍管理系统相关的练习。内容要求&#xff1a; 1.创建一个可变 Set&#xff0c;用于存储图书馆中的书籍信息&#xff08;假设书籍信息用字符串表示&#xff0c;如 “Java 编程思想”“Scala 实战” 等&#xff09;&#xff0c;初始化为包含几本你喜欢的书籍。 2.添加两本…

2.操作系统常见面试问题2

2.19 说说什么是堆栈溢出&#xff0c;会怎么样&#xff1f; 堆溢出&#xff08;Heap Overflow&#xff09;是指程序在运行时向堆内存区域写入了超出预定大小的数据&#xff0c;导致堆内存区域的数据结构&#xff08;如动态分配的内存块&#xff09;被破坏&#xff0c;从而引发…

7天用Go从零实现分布式缓存GeeCache(改进)(未完待续)

lru包 好的&#xff0c;我来为您完整地解说这段代码&#xff0c;指出其中的问题并给出改进方案。 代码分析&#xff1a; 您提供的 Add 方法用于将一个键值对添加到缓存中&#xff0c;或者更新已有的键值对。代码如下&#xff1a; // Add 将一个值添加到缓存中。 func (c *C…

Prometheus面试内容整理-Prometheus 的架构和工作原理

Prometheus 的架构设计基于分布式系统中的监控需求,能够高效地收集、存储和查询时间序列数据。它采用拉取(pull)模型、自动服务发现、数据持久化存储等方式来满足现代系统的监控和告警需求。 Prometheus 的架构 Prometheus 的架构包含多个核心组件,各自负责不同的功能模块,…

【大语言模型学习】LORA微调方法

LORA: Low-Rank Adaptation of Large Language Models 摘要 LoRA (Low-Rank Adaptation) 提出了一种高效的语言模型适应方法,针对预训练模型的适配问题: 目标:减少下游任务所需的可训练参数,降低硬件要求。方法:冻结预训练模型权重,注入低秩分解矩阵,从而在不影响推理…