前端学习之css 定位与浮动

定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位和浮动</title><style>*{/* 将模块紧紧贴着浏览器边框 */margin: 0;}.c{background-color: blueviolet;width: 100px;height: 100px;border: 2px solid chocolate;/* 固定定位,位置固定 */position: fixed;/* 提供了设置位置的属性 */right: 50px;bottom: 50px;}.a{background-color: aquamarine;width: 200px;height: 200px;/* 相对定位,参考原来的位置定位 */position: relative;top: 20px;left: 20px;/* 浮动 */float: left;}.b{background-color: blue;width: 100px;height: 100px;/*1、绝对定位父级元素有定位,则根据父级元素定位没有定位,则1根据body来定位,脱离文档流*/position: absolute;top: 20px;left: 20px;}</style>
</head>
<body><!-- 1、定位静态定位:static等价于无定位固定定位:fiexd固定一个值,用于锚链接,“回到顶部那个按钮”相对定位:relative绝对定位:absoult--><div class="c">c</div><div class="a">a<div class="b">b</div></div>
</body>
</html>

结果

浮动 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>/* 类似于display的行级变换  */.a{background-color: aqua;width: 100px;height: 100px;float: left;}.b{background-color: red;width: 100px;height: 100px;float: left;}</style>
</head>
<body><div class="a">a</div><div class="b">b</div><div class="b">b</div><div class="b">b</div><div class="b">b</div><div class="b">b</div></body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

 

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

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

相关文章

【Tanshtech】生物膜/细胞膜包裹的纳米颗粒的制备

癌症传统治疗的限制性&#xff0c;如化疗产生的非靶向副作用以及肿瘤可能产生的耐药性&#xff0c;使得医生需要在抗肿瘤活性和患者安全之间取得平衡。纳米医学在解决这一问题上发挥了巨大作用&#xff0c;纳米制剂能够被动或主动靶向到肿瘤部位。而纳米载体也被用于提高药物的…

HTTP(2)

HTTP 通信过程包括从客户端发往服务器端的请求及从服务器端返回客户端的响应。 那么请求和响应是怎样运作的呢 HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文。 请求端&#xff08;客户端&#xff09;的HTTP 报文叫做请求报文&#xff0c;响应端&#xff08;服务器…

静态路由综合实验

一.实验拓扑图 二.实验要求 1、R6为ISP&#xff0c;接口IP地址均为公有地址&#xff0c;该设备只能配置IP地址&#xff0c;之后不能再对其进行任何配置&#xff1b; 2、R1-R5为局域网&#xff0c;私有IP地址192.168.1.0/24&#xff0c;请合理分配&#xff1b; 3、R1、R2、R…

亚马逊云科技《生成式 AI 精英速成计划》

最近亚马逊云科技推出了「生成式AI精英速成计划」&#xff0c;获取包含&#xff1a;免费学习热门生成式AI课程、技能证书、人力主管的面试辅导、云计算国际认证、免费去往北美参加全球用户大会等&#xff5e; 针对开发者和企业非技术专业人士&#xff0c;了解如何使用大模型平台…

OpenCV学习笔记(十一)——利用Sobel算子计算梯度

Sobel算子是基于一阶导数的离散差分算子&#xff0c;其中Sobel对于像素值的变化是十分敏感的&#xff0c;在进行边缘检测的时候&#xff0c;Sobel算子常用于对周围像素的重要性进行检测。 Sobel算子包括检验水平方向的算子和检测竖直方向的算子 计算机梯度值的操作如下&#x…

Java设计模式 | 抽象工厂模式

抽象工厂模式 工厂方法模式中考虑的是一类产品的生产&#xff0c;如幼儿园只培养小朋友&#xff0c;鞋厂只生产鞋子。这些工厂只生产同种类产品&#xff0c;同种类产品称为同等级产品&#xff0c;即工厂方法模式只考虑生产同等级的产品&#xff0c;但是在现实生活中许多工厂都…

【计算机网络】计算机网络概述

文章目录 一、计算机网络的概念二、 计算机网络的功能1. 数据通信2. 资源共享3. 分布式处理4. 提高可靠性5. 负载均衡 补充&#xff1a; 计算机的发展阶段小结三、计算机网络的组成1. 组成部分2. 工作方式3. 功能组成 四、 计算机网络的分类1. 按分布范围2. 按使用者3. 按交换技…

Docker 【通过Dockerfile构建镜像】【docker容器与镜像的关系】

文章目录 前言一、前期的准备工作二、上手构建一个简单的镜像三、DcokerFile1 指令总览2 指令详情 四、Dockerfile文件规范五、docker运行build时发生了什么?六、调试手段1. 修改镜像打包后&#xff0c;如何验证新内容已更新至镜像 七、Dockerfile优化方案 前言 docker构建镜…

JavaEE-文件操作和IO

我们先来认识狭义上的⽂件(file)。针对硬盘这种持久化存储的I/O设备&#xff0c;当我们想要进⾏数据保存时&#xff0c;往往不是保存成⼀个整体&#xff0c;⽽是独⽴成⼀个个的单位进⾏保存&#xff0c;这个独⽴的单位就被抽象成⽂件的概念&#xff0c;就类似办公桌上的⼀份份真…

stm32平衡车

目录 一.所需材料 二.PID算法&#xff08;简单说明&#xff09; 直立环 速度环 串级PID 三.使用到的外设 1.定时器输出比较-PWM 2.定时器编码器模式 3.编码器读取速度 4.电机驱动函数 5.外部中断 四、小车 调试 一.所需材料 1.陀螺仪MPU6050--读取三轴的加速度…

隐语笔记2 —— 隐私计算开源如何助力数据要素流通

数据生命周期 数据流转链路主要包括&#xff1a;采集、存储、加工、使用、提供、传输 数据要素外循环是构建数据要素市场的核心 数据外循环中的信任焦虑 三个代表性问题&#xff1a; 不可信内部人员不按约定使用用户隐私泄漏 数据权属问题 解决方案&#xff1a;从主体信任…

JDK下载配置

一、JDK的作用 Java开发环境&#xff1a;JDK提供了完整的Java开发环境&#xff0c;包含编译器&#xff08;javac&#xff09;、解释器&#xff08;java&#xff09;、打包工具&#xff08;jar&#xff09;、文档生成工具&#xff08;javadoc&#xff09;等一系列工具&#xff0…

SpringBoot健康监控

文章目录 1-SpringBoot2-监控-健康监控服务2-SpringBoot2-监控-Admin可视化 在Spring Boot中&#xff0c;可以通过Actuator模块实现应用程序的健康监控。Actuator是Spring Boot提供的一个用于监控和管理应用程序的模块&#xff0c;可以轻松地查看应用程序的运行状况、性能指标和…

有什么可以下载网页视频的浏览器插件 浏览器如何下载网页视频 网页视频怎么下载到本地 网页视频下载软件 IDM下载

在视频网站上看电影追剧&#xff0c;已经成为了大众生活中必不可少的一部分。为了保护自家视频的版权&#xff0c;很多平台都禁止用户下载会员视频。其实只要掌握了正确的方法&#xff0c;一样可以将会员视频下载到本地保存。那么有关有什么可以下载网页视频的浏览器&#xff0…

Websocket + Vue使用

这里有一篇文档可以参考一下> 闪现 POM文件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.0</version> </dependency> WebSocketConf…

数据库之MongoDB应用与开发

MongoDB应用与开发 1. MongoDB安装 l 官网下载安装介质&#xff1a; Try MongoDB Atlas Products | MongoDB 选择对应版本 修改环境变量 vi /etc/profile export MONGODB_HOME/home/lijin/mongodb export PATH P A T H : PATH: PATH:MONGODB_HOME/bin source /etc/profile …

TnT-LLM: Text Mining at Scale with Large Language Models

TnT-LLM: Text Mining at Scale with Large Language Models 相关链接&#xff1a;arxiv 关键字&#xff1a;Large Language Models (LLMs)、Text Mining、Label Taxonomy、Text Classification、Prompt-based Interface 摘要 文本挖掘是将非结构化文本转换为结构化和有意义的…

矩阵计算-线性系统和 LU 分解

一、三角系统 …… 二、高斯消元法 …… 三、LU分解--直接三角分解法 求解线性方程Axb&#xff1a; 参考视频&#xff1a;【数值分析】矩阵LU三角分解| 速成讲解 考试宝典_哔哩哔哩_bilibili 令ALU&#xff0c;其中L是单位下三角矩阵&#xff08;对角线上元素都是1&#xff…

精神暴力的来源与解药

导致人生病的&#xff0c;不仅是病毒或细菌&#xff0c;也有精神暴力。与病毒破坏物理肌体、摧毁生命不同&#xff0c;精神暴力是让人们在过度的自我狂热中燃尽自我、而毁灭自身的。 21世纪以来&#xff0c;精神方面的疾病越来越多&#xff0c;为什么这样呢&#xff1f;大的背景…

git基础-查看提交历史

查看提交历史 在创建了多个提交之后&#xff0c;或者如果克隆了一个具有现有提交历史的存储库&#xff0c;可能会想要回顾一下发生了什么。最基本和强大的工具就是 git log 命令。 运行下git log查看下输出状态 默认情况下&#xff0c;不带任何参数运行 git log 命令会以逆时…