当前位置： 首页 > news >正文

测开：前端基础-css页面布局-定位

news 2025/6/29 23:08:28

一 、传统网页布局的三种方式

网页布局的本质–用CSS来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式，分别是标准流，浮动和定位三种。

二、 定位 

2.1 啥是定位

我的理解，就是要把这个元素，放在哪个位置，这就是定位。

2.2 实现定位

通过属性 position 实现

2.3 定位的四种方式

前提，页面中有4个box.

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

2.3.1 静态定位

设置方式为position: static;

静态定位的盒子是标准流状态，用于取消定位。

静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。

2.3.2 相对定位

设置方式为position: relative;

相对定位：相对于原来在文档流的位置进行偏移

相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，相对定位的盒子是相对自己在标准流中的位置进行偏移，但是盒子在页面中占据的位置是不会改变的。

操作：

设置box1 ，相对定位，进行偏移.

			.box1{background-color: aqua;width: 120px;height: 120px;position: relative;left: 20px;bottom: 2.5rem;}

效果：

box1 相对于原来在文档流的位置进行偏移

 

2.3.3 绝对定位

设置方式为position: absolute;

绝对定位的盒子脱离了标准流，在页面中不占位置.

盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

注意：

设置了top、left、bottom、right属性后，绝对定位的盒子是相对设置了定位属性（静态定位不算）的最近的父级盒子的位置进行偏移，

如果没有设置了定位的父级盒子，则是相对于body标签进行偏移。

绝对定位的盒子可以通过设置z-index属性改变层级。

举例：

设置绝对属性，的元素，它的最近的父类没有设置定位，则相对于body标签进行偏移。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;position: absolute;left: 20px;bottom: 2.5rem;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

绝对定位的元素box1,相对于body进行了偏移 

 

 举例：

设置绝对属性，的元素，与它最近的父级盒子的位置进行偏移。

如下图，box6 设置了绝对定位。box6的父类id=app 设置了相对定位。

则box6的位置，是相对于它的app父类进行偏移的。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#app{background-color: chartreuse;position: relative;height: 200px;}.box5{background-color: aquamarine;width: 100px;height: 100px;}.box6{background-color: aqua;width: 120px;height: 120px;position: absolute;left: 200px;}.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><div class="mybigbox" id="app"><div class="box5">box5</div><div class="box6">box6</div></div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

案例：

实现banner，两侧的滑动按钮。

父类设置相对定位，子类设置绝对定位。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#app{background-color: chartreuse;position: relative;height: 200px;}.box5{background-color: aquamarine;width: 100px;height: 100px;position: absolute;left: 200px;top: 40%;}.box6{background-color: aqua;width: 100px;height: 100px;position: absolute;right: 200px;top: 40%;}.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="mybigbox" id="app"><div class="box5">box5</div><div class="box6">box6</div></div><div class="box">box</div><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

2.3.4 固定定位

设置方式为position: fixed;

固定定位的盒子脱离了标准流，在页面中不占位置，

盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动，固定定位的盒子永远显示在浏览器窗口，不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。

固定定位的盒子可以通过设置z-index属性改变层级。

固定定位的盒子默认的宽高由其内容决定。

			.box{background-color: aquamarine;position: fixed;right: 20px;width: 100px;height: 100px;}


 

相关文章：

测开：前端基础-css页面布局-定位

一 、传统网页布局的三种方式 网页布局的本质–用CSS来摆放盒子&#xff0c;把盒子摆放到相应的位置&#xff0c;css提供了三种传统布局方式&#xff0c;分别是标准流&#xff0c;浮动和定位三种。 二、 定位 2.1 啥是定位 我的理解&#xff0c;就是要把这个元素&#xff0c…...

编程日记 2023/3/6 20:10:03

Servlet中八个监听器介绍

一、监听对象创建的监听器 1、ServletContextListener /*** 用于监听ServletContext对象创建和销毁的监听器* since v 2.3*/public interface ServletContextListener extends EventListener {/*** 对象创建时执行此方法。该方法的参数是ServletContextEvent事件对象&#xf…...

编程日记 2023/3/6 20:08:55

LicenseBox Crack,对服务器的要求最低

LicenseBox Crack,对服务器的要求最低 LicenseBox是用于管理基于PHP的软件、WordPress插件或主题、主题、插件和WordPress的更新和许可的完整软件。它易于安装&#xff0c;对服务器的要求最低&#xff0c;用户友好的界面&#xff0c;无限脚本的使用为您的创造力打开了大门。 Li…...

编程日记 2023/3/6 20:07:50

css中重难点整理(vertical-align)

一、vertical-align 在学习vertical-align的时候&#xff0c;可能会很困惑。即使网上有一大推文章讲veitical-align,感觉看完好像懂了&#xff0c;等自己布局的时候用到vertical-align的时候好像对它又很陌生。这就是我在布局的时候遇到的问题。 本来vertical-align就很不好理…...

编程日记 2023/3/6 20:06:43

javaScript基础面试题 ---宏任务微任务

宏任务微任务一、为什么JS是单线程语言&#xff1f;二、JS是单线程&#xff0c;怎样执行异步代码&#xff1f;1、JS是单线程语言 2、JS代码执行流程&#xff0c;同步执行完&#xff0c;再进行事件循环&#xff08;微任务、宏任务&#xff09; 3、清空所有的微任务&#xff0c;再…...

编程日记 2023/3/6 20:05:38

基于JSP的网上书城

技术&#xff1a;Java、JSP等摘要&#xff1a;随着科技的迅速发展&#xff0c;计算机技术已应用到社会的各个领域。随着计算机技术和通信技术的迅速发展&#xff0c;网络的规模也逐渐增大&#xff0c;网络的元素也随之不断增加&#xff0c;有的利用其通信&#xff0c;有的利用其…...

编程日记 2023/3/6 20:04:31

C#教程 05 常量

文章目录 C# 常量整数常量浮点常量字符常量字符串常量定义常量C# 常量 常量是固定值，程序执行期间不会改变。常量可以是任何基本数据类型，比如整数常量、浮点常量、字符常量或者字符串常量，还有枚举常量。 常量可以被当作常规的变量，只是它们的值在定义后不能被修改。 整数…...

编程日记 2023/5/11 6:44:38

【华为OD机试真题java、python】基站维修工程师【2022 Q4 100分】（100%通过）

代码请进行一定修改后使用，本代码保证100%通过率。本文章提供java、python两种代码 题目描述 小王是一名基站维护工程师，负责某区域的基站维护。 某地方有 n 个基站（ 1<n<10 ），已知各基站之间的距离 s（ 0<s<500 ）， 并且基站 x 到基站 y 的距离，与基站 y …...

编程日记 2023/3/6 20:02:16

你是真的“C”——为冒泡排序升级赋能！

你是真的“C”——为冒泡排序升级赋能&#xff01;&#x1f60e;前言&#x1f64c;冒泡排序升级赋能之境界一&#xff01;冒泡排序升级赋能之境界二&#xff01;qsort库函数的运用和认识总结撒花&#x1f49e;&#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的…...

编程日记 2023/5/11 21:05:17

【JavaEE】基于mysql与servlet自制简易的表白墙程序

文章目录1 表白墙页面构建2 Servlet 回顾3 表白墙后端程序实现3.1 我们需要做什么&#xff1f;3.2 实现细节4 实现结果写在最后1 表白墙页面构建 该页面由标题、文本、三个 input 输入框与一个提交按钮构成&#xff0c;整体比较简单&#xff0c;相关样式文件和页面代码会在后面…...

编程日记 2023/5/11 21:05:14

抓包技术(浏览器APP小程序PC应用)

P1 抓包工具 01. Fidder 首先第一个Fiddler它的优势&#xff0c;独立运行&#xff0c;第二个支持移动设备&#xff08;是否能抓移动APP的包&#xff0c;&#xff09;在这一块的话wireshark、httpwatch就不支持&#xff0c;因此在这一块就可以排除掉前连个&#xff0c;因为我们…...

编程日记 2023/5/11 21:05:08

linux笔记(10):ubuntu环境下，基于SDL2运行lvgl+ffmpeg播放mp4

文章目录1.ubuntu安装ffmpeg1.1 源码安装1.1 克隆ffmpeg源码1.2 配置编译条件&#xff0c;编译&#xff0c;安装1.2 直接安装依赖包2.下载lvgl源码2.1 测试原始代码2.2 运行lv_example_ffmpeg_2()例程2.2.1 配置 LV_USE_FFMPEG 为 12.2.2 lv_example_ffmpeg_2()替换lv_demo_wid…...

编程日记 2023/5/8 20:04:15

JavaScript专题之类型判断(下)

参考原文&#xff1a;JavaScript专题之类型判断(下) 前言 在上篇《JavaScript专题之类型判断(上)》中&#xff0c;我们抄袭 jQuery 写了一个 type 函数&#xff0c;可以检测出常见的数据类型&#xff0c;然而在开发中还有更加复杂的判断&#xff0c;比如 plainObject、空对象…...

编程日记 2023/5/11 21:05:03

【VC 7/8】vCenter Server 基于文件的备份和还原Ⅲ—— 使用 SMB 协议备份 VC（VAMI 中文）

目录2.2 使用 SMB 协议备份 VC&#xff08;VAMI 中文&#xff09;&#xff08;1&#xff09;登录 vCenter Server 管理界面&#xff08;2&#xff09;进入备份页面&#xff08;3&#xff09;配置 Backup Schedule&#xff08;4&#xff09;开始备份&#xff08;5&#xff09;备…...

编程日记 2023/5/11 21:05:00

linux - 内核编译

一. 编译的实质基于头文件和c文件--->产生对象文件(.o)将所有的对象文件链接起来&#xff0c;产生可执行文件。内核的编译系统组成Makefile分布在内核源代码中的Makefile&#xff0c; 定义内核的编译规则&#xff0c;配合Kconfig使用。Kconfig配置文件&#xff0c;给用户提供…...

编程日记 2023/5/11 21:04:55

Spring——配置文件实现IOC和DI入门案例

现在先如图创建如下的Maven项目&#xff0c;在业务层和数据层分别写上对应的接口和实现类 在BookServiceImpl中创建一个BookDaoImpl对象&#xff0c;并调用里面的save()方法。 在测试类里面new一个bookservice的实现类&#xff0c;调用save()方法 输出如下图所示 要使用IOC容…...

编程日记 2023/5/11 21:04:48

机器学习100天（四十一）：041 对偶支持向量机-公式推导

《机器学习100天》完整目录：目录 机器学习 100 天，今天讲的是：对偶支持向量机-公式推导！ 本节主要延续上一节的内容，推导线性支持向量机的对偶形式。本节内容包含的数学理论和推导很多，我尽量简化其中的数学部分，只做感性的介绍，便于大家在理解的同时不受数学复杂公式…...

编程日记 2023/5/11 21:04:41

C语言下的signal()函数

signal()简介 signal() 函数是 C 语言中用于处理系统信号的函数。它在 signal.h 头文件中进行声明。信号用作进程间通信&#xff0c;报告异常行为&#xff0c;例如除零&#xff0c;或用户的一些按键组合&#xff0c;例如同时按下 Ctrl 与 C 键&#xff0c;产生信号 SIGINT。 …...

编程日记 2023/5/11 21:04:34

google独立站和与企业官网的区别是什么？

google独立站和与企业官网的区别是什么&#xff1f; 答案是&#xff1a;独立站通过谷歌SEO优化可以更好的获取自然排名的流量。 随着互联网的不断发展&#xff0c;企业越来越重视自身网站的建设和优化&#xff0c;而在企业网站建设中&#xff0c;很多人会犯一个常见的错误&am…...

编程日记 2023/5/11 21:04:25

Vue3---语法初探

目录 hello world 实现简易计时显示 反转字符串 显示隐藏 了解循环 了解双向绑定实现简易记事 设置鼠标悬停的文本 组件概念初探&#xff0c;进行组件代码拆分 hello world 最原始形态&#xff0c;找到 id 为 root 的标签&#xff0c;将 Vue 实例的模板放入标签之内 …...

编程日记 2023/5/11 21:04:20

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/6/26 0:39:27

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/6/21 5:38:34

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/6/26 0:13:17

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/6/21 12:22:59

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/6/26 14:52:48

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/6/26 22:25:56

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/6/25 14:50:35

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/6/27 23:59:27

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/6/23 7:26:01

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/6/26 3:30:57