测开：前端基础-css页面布局-定位
一 、传统网页布局的三种方式
网页布局的本质–用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来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式，分别是标准流，浮动和定位三种。 二、 定位 2.1 啥是定位 我的理解，就是要把这个元素，…...
Servlet中八个监听器介绍
一、监听对象创建的监听器 1、ServletContextListener /*** 用于监听ServletContext对象创建和销毁的监听器* since v 2.3*/public interface ServletContextListener extends EventListener {/*** 对象创建时执行此方法。该方法的参数是ServletContextEvent事件对象…...
LicenseBox Crack,对服务器的要求最低
LicenseBox Crack,对服务器的要求最低 LicenseBox是用于管理基于PHP的软件、WordPress插件或主题、主题、插件和WordPress的更新和许可的完整软件。它易于安装，对服务器的要求最低，用户友好的界面，无限脚本的使用为您的创造力打开了大门。 Li…...
css中重难点整理(vertical-align)
一、vertical-align 在学习vertical-align的时候，可能会很困惑。即使网上有一大推文章讲veitical-align,感觉看完好像懂了，等自己布局的时候用到vertical-align的时候好像对它又很陌生。这就是我在布局的时候遇到的问题。 本来vertical-align就很不好理…...
javaScript基础面试题 ---宏任务微任务
宏任务微任务一、为什么JS是单线程语言？二、JS是单线程，怎样执行异步代码？1、JS是单线程语言 2、JS代码执行流程，同步执行完，再进行事件循环（微任务、宏任务） 3、清空所有的微任务，再…...
基于JSP的网上书城
技术：Java、JSP等摘要：随着科技的迅速发展，计算机技术已应用到社会的各个领域。随着计算机技术和通信技术的迅速发展，网络的规模也逐渐增大，网络的元素也随之不断增加，有的利用其通信，有的利用其…...
C#教程 05 常量
文章目录 C# 常量整数常量浮点常量字符常量字符串常量定义常量C# 常量 常量是固定值，程序执行期间不会改变。常量可以是任何基本数据类型，比如整数常量、浮点常量、字符常量或者字符串常量，还有枚举常量。 常量可以被当作常规的变量，只是它们的值在定义后不能被修改。 整数…...
【华为OD机试真题java、python】基站维修工程师【2022 Q4 100分】（100%通过）
代码请进行一定修改后使用，本代码保证100%通过率。本文章提供java、python两种代码 题目描述 小王是一名基站维护工程师，负责某区域的基站维护。 某地方有 n 个基站（ 1<n<10 ），已知各基站之间的距离 s（ 0<s<500 ）， 并且基站 x 到基站 y 的距离，与基站 y …...
你是真的“C”——为冒泡排序升级赋能！
你是真的“C”——为冒泡排序升级赋能！😎前言🙌冒泡排序升级赋能之境界一！冒泡排序升级赋能之境界二！qsort库函数的运用和认识总结撒花💞😎博客昵称：博客小梦 😊最喜欢的…...
【JavaEE】基于mysql与servlet自制简易的表白墙程序
文章目录1 表白墙页面构建2 Servlet 回顾3 表白墙后端程序实现3.1 我们需要做什么？3.2 实现细节4 实现结果写在最后1 表白墙页面构建 该页面由标题、文本、三个 input 输入框与一个提交按钮构成，整体比较简单，相关样式文件和页面代码会在后面…...
抓包技术(浏览器APP小程序PC应用)
P1 抓包工具 01. Fidder 首先第一个Fiddler它的优势，独立运行，第二个支持移动设备（是否能抓移动APP的包，）在这一块的话wireshark、httpwatch就不支持，因此在这一块就可以排除掉前连个，因为我们…...
linux笔记(10):ubuntu环境下，基于SDL2运行lvgl+ffmpeg播放mp4
文章目录1.ubuntu安装ffmpeg1.1 源码安装1.1 克隆ffmpeg源码1.2 配置编译条件，编译，安装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…...
JavaScript专题之类型判断(下)
参考原文：JavaScript专题之类型判断(下) 前言 在上篇《JavaScript专题之类型判断(上)》中，我们抄袭 jQuery 写了一个 type 函数，可以检测出常见的数据类型，然而在开发中还有更加复杂的判断，比如 plainObject、空对象…...
【VC 7/8】vCenter Server 基于文件的备份和还原Ⅲ—— 使用 SMB 协议备份 VC（VAMI 中文）
目录2.2 使用 SMB 协议备份 VC（VAMI 中文）（1）登录 vCenter Server 管理界面（2）进入备份页面（3）配置 Backup Schedule（4）开始备份（5）备…...
linux - 内核编译
一. 编译的实质基于头文件和c文件--->产生对象文件(.o)将所有的对象文件链接起来，产生可执行文件。内核的编译系统组成Makefile分布在内核源代码中的Makefile， 定义内核的编译规则，配合Kconfig使用。Kconfig配置文件，给用户提供…...
Spring——配置文件实现IOC和DI入门案例
现在先如图创建如下的Maven项目，在业务层和数据层分别写上对应的接口和实现类 在BookServiceImpl中创建一个BookDaoImpl对象，并调用里面的save()方法。 在测试类里面new一个bookservice的实现类，调用save()方法 输出如下图所示 要使用IOC容…...
机器学习100天（四十一）：041 对偶支持向量机-公式推导
《机器学习100天》完整目录：目录 机器学习 100 天，今天讲的是：对偶支持向量机-公式推导！ 本节主要延续上一节的内容，推导线性支持向量机的对偶形式。本节内容包含的数学理论和推导很多，我尽量简化其中的数学部分，只做感性的介绍，便于大家在理解的同时不受数学复杂公式…...
C语言下的signal()函数
signal()简介 signal() 函数是 C 语言中用于处理系统信号的函数。它在 signal.h 头文件中进行声明。信号用作进程间通信，报告异常行为，例如除零，或用户的一些按键组合，例如同时按下 Ctrl 与 C 键，产生信号 SIGINT。 …...
google独立站和与企业官网的区别是什么？
google独立站和与企业官网的区别是什么？ 答案是：独立站通过谷歌SEO优化可以更好的获取自然排名的流量。 随着互联网的不断发展，企业越来越重视自身网站的建设和优化，而在企业网站建设中，很多人会犯一个常见的错误&am…...
Vue3---语法初探
目录 hello world 实现简易计时显示 反转字符串 显示隐藏 了解循环 了解双向绑定实现简易记事 设置鼠标悬停的文本 组件概念初探，进行组件代码拆分 hello world 最原始形态，找到 id 为 root 的标签，将 Vue 实例的模板放入标签之内 …...
esp8266WiFi模块通过MQTT连接华为云
esp8266WiFi模块通过MQTT连接华为云总结：一、 MQTT透传AT固件烧录二、 串口调试2.1 设置模块为STA模式2.2 连接WiFi2.3 设置MQTT的登陆用户名与密码2.4 设置MQTT的ClientID2.5 设置MQTT接入地址2.6 订阅设备属性上报的主题2.7 上传数据2.8 平台下发命令2.9 华为云物…...
苹果新卫星专利公布，苹果Find My功能知多少
根据美国商标和专利局（USPTO）公示的清单，苹果公司获得了一项新的卫星专利，可在非地面网络（Non-Terrestrial Networks，NTN）中定位用户设备（iDevice、MacBook 等）。 在专利…...
[ICLR‘22] DAB-DETR: Dynamic Anchor Boxes Are Better Queries for DETR
paper: https://arxiv.org/pdf/2201.12329.pdfcode: GitHub - IDEA-Research/DAB-DETR: [ICLR 2022] DAB-DETR: Dynamic Anchor Boxes are Better Queries for DETR将位置相关性计算显式的引入到decoder中，通过box坐标(x, y, w, h) 影响Q和K的相关性计算。特征图要有…...
双周赛99（贪心、数学、区间合并计算、换根DP）
文章目录双周赛99[6312. 最小和分割](https://leetcode.cn/problems/split-with-minimum-sum/)贪心[6311. 统计染色格子数](https://leetcode.cn/problems/count-total-number-of-colored-cells/)找规律[6313. 统计将重叠区间合并成组的方案数](https://leetcode.cn/problems/c…...
OpenText Exceed TurboX（ETX） 客户案例——弗吉尼亚理工大学
弗吉尼亚理工大学简化了高性能计算的使用。OpenText Exceed TurboX 提供高性能图形远程应用程序访问，提高工作效率 挑战 图形界面响应缓慢，影响用户使用； 对复制应用程序输出文件进行本地分析时，影响带宽和速度； 使用…...
【Python】torch.norm()用法解析
【Python】torch.norm()用法解析 文章目录【Python】torch.norm()用法解析1. 介绍1.1 p-范数1.2 Frobenius 范数1.3 核范数2. API3. 示例1. 介绍 torch.norm()是对输入的tensor求对应的范数。tensor的范数有以下三种： 1.1 p-范数 1.2 Frobenius 范数 即ÿ…...
C++核心编程＜内存分区模型＞(1)
C核心编程<内存分区模型>1.内存分区模型1.1内存分区模型概述1.2内存分区的意义1.3程序允许前1.3.1代码区1.3.2全局区1.3.2.1全局区的演示1.4程序运行后1.4.1栈区1.4.1.1栈区演示1.4.2堆区1.4.2.1堆区演示1.5new操作符1.5.1new操作的概述1.内存分区模型 1.1内存分区模型概…...
电路基础（1）电路模型和电路定律
电路中的电压、电流之间具有两种约束，一种是由电路元件决定的元件约束；另一种是元件间连接而引入的几何约束（就是拓扑约束），后者由基尔霍夫定律来表达。基尔霍夫定律是集总参数电路的基本定律。 1.电路和电路模型电源又…...
pytest 基础
pytest安装 安装 pip install -U pytest 验证安装 pytest --version 约束： 所有的测试文件名都需要满足test_ *.py格式或* _test.py格式。 测试文件中的测试类以Test_开头，并且不能带有 init 方法。 测试类中可以包含一个或多个test_开头的函数。 步骤…...
软测入门(七)python操作数据文件(Json、yaml、csv、excel、xml)
python操作文件 txt文件 read() : 读取所有readline() : 读取一行readlines() : 读取所有，且以行为单位，放入list列表中 file open(r"F:\abc.txt", "r", encoding"utf-8") # 以utf-8格式读取文件 # 读取所有 # print…...