HTML_CSS学习：定位

一、相对定位

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>.outer{width: 500px;background-color: #999ff0;border: 1px solid #000;padding: 20px;}.box{width: 200px;height: 200px;font-size: 20px;}.box1{background-color: #ff0000;}.box2{background-color: #00ff00;/*position: relative;*//*left: 100px;*/}.box3{background-color: #0000ff;}</style>
</head>
<body><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div></body>
</html>

显示结果：

二、绝对定位

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>.outer{width: 500px;background-color: #999ff0;border: 1px solid #000;padding: 20px;position: relative;}.box{width: 200px;height: 200px;font-size: 20px;}.box1{background-color: #ff0000;}.box2{background-color: #00ff00;position: absolute;top: 220px;left: 20px;/*transition: 1s all linear;*//*float: right;*//*top: 50px;*//*right: 50px;*//*right: -100px;*//*bottom: -50px;*//*margin-left: 50px;*//*margin-top: 50px;*//*margin-right: 3000px;*/}.box3{background-color: #0000ff;}.outer:hover .box2{left:220px}</style>
</head>
<body><div class="outer"><div class="box box1">1</div>
<!--        定位元素也能设置宽高--><div class="box box2">2</div><div class="box box3">3</div></div></body>
</html>

显示结果：

三、固定定位

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>.outer{width: 500px;background-color: #999ff0;border: 1px solid #000;padding: 20px;position: relative;}.box{width: 200px;height: 200px;font-size: 20px;}.box1{background-color: #ff0000;}.box2{background-color: #00ff00;position: fixed;bottom:0;right:0;float: left;}.box3{background-color: #0000ff;}.outer:hover .box2{left:220px}</style>
</head>
<body><div class="outer"><div class="box box1">1</div>
<!--        定位元素也能设置宽高--><span class="box box2">heiheiehiehiehiei</span><div class="box box3">3</div></div><div>lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecatiodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenetlorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecatiodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenetlorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecatiodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenetlorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecatiodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt temporatempore tenetlorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenetlorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecatiodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt temporatempore tenetlorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecatiodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt tempora tempore tenetlorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque autem beatae blanditiis consectetur consequuntur cumque delectus doloribus eaque eius eligendi enim eum,excepturi expedita fuga harum hic illum incidunt iure iusto laboriosam laudantium libero magnam maiores mol,l molestiae mollitia nam nesciunt nihil nobis nostrum numquam obcaecatiodio officia omnis optio pariatur perferendis placeat quae quam quibusdam quidem quisquam quo repellat repudiandae rerum saepe sapientesequi similique sit soluta sunt temporatempore tenet</div></body>
</html>

显示结果：

四、粘性定位

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>粘性定位</title><style>*{margin: 0;padding: 0;}body{height: 2000px;}.page-header{height: 100px;text-align: center;line-height: 100px;background-color: #bfad39;font-size: 20px;}.item{background-color: silver;}.first{background-color: #0dcaf0;font-size: 40px;position: sticky;top: 0px;}</style>
</head>
<body>
<!--    头部--><div class="page-header">头部</div>
<!--    内容区--><div class="content">
<!--        每一项--><div class="item"><div class="first">A</div><h2>A1</h2><h2>A2</h2><h2>A3</h2><h2>A4</h2><h2>A5</h2><h2>A6</h2><h2>A7</h2><h2>A8</h2></div><div class="item"><div class="first">B</div><h2>B1</h2><h2>B2</h2><h2>B3</h2><h2>B4</h2><h2>B5</h2><h2>B6</h2><h2>B7</h2><h2>B8</h2></div><div class="item"><div class="first">C</div><h2>C1</h2><h2>C2</h2><h2>C3</h2><h2>C4</h2><h2>C5</h2><h2>C6</h2><h2>C7</h2><h2>C8</h2></div></div></body>
</html>

显示结果：

五、定位的层级

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位的层级</title><style>.outer{width: 500px;background-color: #999ff0;border: 1px solid #000;padding: 20px;position: relative;z-index: 2;}.box{width: 200px;height: 200px;font-size: 20px;}.box1{background-color: #ff0000;}.box2{background-color: #00ff00;position: relative;top: -150px;left: 50px;/*z-index:auto;*/}.box3{background-color: #0000ff;position: absolute;top: 130px;left: 130px;}.box4{background-color: #00ffb7;position: fixed;top: 200px;left: 200px;z-index: 50;}.box5{background-color: #ff00ff;position: fixed;top: 300px;left: 300px;z-index: 10;}</style>
</head>
<body><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div></body>
</html>

显示结果：

六、定位可以越过padding

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位可以越过padding</title><style>.outer{width: 800px;height: 600px;padding: 20px;background-color: #999ff0;position: relative;}.inner{width: 200px;height: 200px;background-color: #ff0000;position: absolute;top: 0;left: 0;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div></body>
</html>

显示结果：

七、定位的特殊应用1

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位的特殊应用</title><style>.outer{height: 400px;background-color: silver;position: relative;}.inner{background-color: yellow;font-size: 20px;padding: 20px;border: 10px solid #000;position: absolute;/*top:0;*/left: 0px;right:0px;top:0px;bottom:0px;/*width: 100%;*/}</style>
</head>
<body><div class="outer"><div class="inner">你好啊</div></div>
</body>
</html>

显示结果：

八、定位的特殊应用2

相关代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位的特殊应用</title><style>.outer{height: 400px;width: 800px;background-color: silver;/*overflow: hidden;*/position: relative;}.inner{width: 400px;height: 100px;background-color: yellow;font-size: 20px;/*nargin:0 auto;*//*margin-top: 150px;*/position: absolute;/*top:0;*//*bottom: 0;*//*left: 50%;*//*right: 50%;*//*top:50%;*//*margin-left: -200px;*//*margin: auto;*/top:0;bottom:0;left:0;margin: auto;}</style>
</head>
<body><div class="outer"><div class="inner">你好啊</div></div></body>
</html>

显示结果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/320571.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

BEV下统一的多传感器融合框架 - FUTR3D

BEV下统一的多传感器融合框架 - FUTR3D

BEV下统一的多传感器融合框架 - FUTR3D 引言 在自动驾驶汽车或者移动机器人上&#xff0c;通常会配备许多种传感器&#xff0c;比如&#xff1a;光学相机、激光雷达、毫米波雷达等。由于不同传感器的数据形式不同&#xff0c;如RGB图像&#xff0c;点云等&#xff0c;不同模态…
阅读更多...
【Docker学习】docker start深入研究

【Docker学习】docker start深入研究

docker start也是很简单的命令。但因为有了几个选项&#xff0c;又变得复杂&#xff0c;而且... 命令&#xff1a; docker container start 描述&#xff1a; 启动一个或多个已停止的容器。 用法&#xff1a; docker container start [OPTIONS] CONTAINER [CONTAINER...] 别名&…
阅读更多...
标准IO学习

标准IO学习

思维导图&#xff1a; 有如下结构体 struct Student{ char name[16]; int age; double math_score; double chinese_score; double english_score; double physics_score; double chemistry_score; double bio_score; }; 申请该结构体数组&#xff0c;容量为5&#xff0c;初始…
阅读更多...
Android手写自己的路由SDK

Android手写自己的路由SDK

实现自己的路由框架 ​ 在较大型的Android app中常会用到组件化技术&#xff0c;针对不同的业务/基础功能对模块进行划分&#xff0c;从上到下为壳工程、业务模块、基础模块。其中业务模块依赖基础模块&#xff0c;壳工程依赖业务模块。同级的横向模块&#xff08;比如多个业务…
阅读更多...
小微公司可用的开源ERP系统

小微公司可用的开源ERP系统

项目介绍 华夏ERP是基于SpringBoot框架和SaaS模式的企业资源规划&#xff08;ERP&#xff09;软件&#xff0c;旨在为中小企业提供开源且易用的ERP解决方案。它专注于提供进销存、财务和生产功能&#xff0c;涵盖了零售管理、采购管理、销售管理、仓库管理、财务管理、报表查询…
阅读更多...
【SpringMVC 】什么是SpringMVC（二）？如何整合ssm框架以及使用mybatisPlus？

【SpringMVC 】什么是SpringMVC（二）？如何整合ssm框架以及使用mybatisPlus？

文章目录 SpringMVC第三章1、ssm整合1、基本步骤1-3步4-5步6步7步8-12步13步14-15步2、添加数据3、删除数据4、配置事务5、修改数据2、pageHelpe分页1、基本步骤第四章1、mybatisPlus1、基本步骤1-45-7892、基本方法的使用查询2、新ssm项目1、基本步骤1-5678-910-111213-15Spri…
阅读更多...
[C++][数据结构]红黑树的介绍和模拟实现

[C++][数据结构]红黑树的介绍和模拟实现

前言 之前我们简单学习了一下搜索树和平衡搜索树&#xff0c;今天我们来学习一下红黑树 简介 概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着…
阅读更多...
数据结构学习/复习8--树与二叉树的概念与基本性质练习

数据结构学习/复习8--树与二叉树的概念与基本性质练习

一、树 1.概念 2.树的表示 二、二叉树 1.二叉树的概念 2.与性质相关的题
阅读更多...
有什么方便的教学口语软件？6个软件教你快速练习口语

有什么方便的教学口语软件？6个软件教你快速练习口语

有什么方便的教学口语软件&#xff1f;6个软件教你快速练习口语 以下是六个方便实用的教学口语软件&#xff0c;它们可以帮助您快速练习口语&#xff1a; AI外语陪练: 这是一款知名的语言学习软件&#xff0c;提供多种语言的口语练习课程。它采用沉浸式的学习方法&#xff0…
阅读更多...
【iOS】NSOperation、NSOperationQueue

【iOS】NSOperation、NSOperationQueue

文章目录 前言一、NSOperation、NSOperationQueue 简介二、NSOperation、NSOperationQueue 操作和操作队列三、NSOperation四、NSOperationQueue五、NSOperationQueue 控制串行执行、并发执行六、 NSOperation 操作依赖七、NSOperation 优先级八、NSOperation、NSOperationQueu…
阅读更多...
【python】基础语法

【python】基础语法

目录 一.注释和常见规则 二.变量及类型 1.数据类型 2.Numbers数字数据类型 3. 字符串类型 &#xff08;1&#xff09;字符串访问 &#xff08;2&#xff09;字符串拼接 4.List&#xff08;列表&#xff09;类型 &#xff08;1&#xff09; 定义 &#xff08;2&#…
阅读更多...
STM32开启停止模式，用外部中断唤醒程序运行

STM32开启停止模式，用外部中断唤醒程序运行

今天学习了一下STM32的停止模式&#xff0c;停止模式下&#xff0c;所有外设的时钟和CPU的电源都会被关闭&#xff0c;所以会很省电&#xff0c;打破这种停止模式的方式就是外部中断可以唤醒停止模式。要想实现这个功能&#xff0c;其实设置很简单的&#xff0c;总共就需要两步…
阅读更多...
websevere服务器从零搭建到上线（四）｜muduo网络库的基本原理和使用

websevere服务器从零搭建到上线（四）｜muduo网络库的基本原理和使用

文章目录 muduo源码编译安装muduo框架讲解muduo库编写服务器代码示例代码解析用户连接的创建和断开回调函数用户读写事件回调 使用vscode编译程序配置c_cpp_properties.json配置tasks.json配置launch.json编译 总结 muduo源码编译安装 muduo依赖Boost库&#xff0c;所以我们应…
阅读更多...
五月节放假作业讲解

五月节放假作业讲解

目录 作业1&#xff1a; 问题&#xff1a; 结果如下 作业2&#xff1a; 结果: 作业1&#xff1a; 初始化数组 问题&#xff1a; 如果让数组初始化非0数会有问题 有同学就问了&#xff0c;我明明已经初始化定义过了&#xff0c;为啥还有0呀 其实这种初始化只会改变第一个…
阅读更多...
Fluent 区域交界面的热边界条件

Fluent 区域交界面的热边界条件

多个实体域公共交界面的壁面&#xff0c;Fluent 会分拆为 wall 和 wall-shadow 的两个壁面&#xff0c;两者为配对关系&#xff0c;分别从属于一个实体域。 配对面可使用热通量、温度、耦合三类热边界条件&#xff0c;前两者统称为非耦合热边界条件。 耦合为配对面默认的热边界…
阅读更多...
MYSQL基础架构、执行过程分析、事务的实现、索引的选择、覆盖索引

MYSQL基础架构、执行过程分析、事务的实现、索引的选择、覆盖索引

本文是mysql45讲的1-5的总结 文章目录 基础架构连接器分析器优化器执行器SQL查询执行过程详细执行步骤 SQL更新执行过程重要的日志模块&#xff1a;redo log重要的日志模块&#xff1a;binlog阶段性提交 事务事务隔离的实现启动 索引数据库索引模型InnoDB索引组织结构主键选择…
阅读更多...
【深度学习】第二门课 改善深层神经网络 Week 2 3 优化算法、超参数调试和BN及其框架

【深度学习】第二门课 改善深层神经网络 Week 2 3 优化算法、超参数调试和BN及其框架

&#x1f680;Write In Front&#x1f680; &#x1f4dd;个人主页&#xff1a;令夏二十三 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f4e3;系列专栏&#xff1a;深度学习 &#x1f4ac;总结&#xff1a;希望你看完之后&#xff0c;能对…
阅读更多...
Qt5 框架学习及应用 — 对象树

Qt5 框架学习及应用 — 对象树

Qt 对象树 对象树概念Qt为什么使用对象树 &#xff1f;将对象挂到对象树上 对象树概念 对象树&#xff1a;对于树的概念&#xff0c;相信许多学过数据结构的同学应该都不会陌生。在学习数据结构的时候我们所接触的什么二叉树、多叉树、哈夫曼树、AVL树、再到红黑树、B/B树………
阅读更多...
【LeetCode刷题】739. 每日温度（单调栈）

【LeetCode刷题】739. 每日温度（单调栈）

1. 题目链接2. 题目描述3. 解题方法4. 代码 1. 题目链接 739. 每日温度 2. 题目描述 3. 解题方法 用一个栈st保存每个数的下标&#xff0c;同时创建一个数组res保存结果&#xff0c;初始值都为0。循环遍历题目中的数组temperature。如果temperature[i] > st.top()&#x…
阅读更多...
Vue入门到关门之Vue3项目创建

Vue入门到关门之Vue3项目创建

一、vue3介绍 1、为什么要学习vue3&#xff1f; vue3的变化&#xff1a; 首先vue3完全兼容vue2&#xff0c;但是vue3不建议用vue2的写法&#xff1b;其次&#xff0c;vue3拥抱TypeScript&#xff0c;之前vue2使用的JavaScript&#xff0c;ts完全兼容js 最后之前学的vue2 是…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023