css代码的定位及浮动

   上次,我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。

元素转换

元素分为块元素、行元素和行内块。   display  显示:转换元素的类型 

display:inline;  display:block;  display:inline-block;  display:none;元素隐藏     opacity  透明度

块元素block   特点:1.可以设置宽高    2.独占一行   举例:div、p、h1-h6、li

行元素inline   特点:1.不可以设置宽高    2.可以和其他的行快元素在一行  举例: a、span、del

行内块inline-block   特色:1.可以和别的元素在一行显示  2.可以设置宽高  举例:img、input

cursor:pointer 设置鼠标箭头、使其变成小手   +获取下一个兄弟标签  例如:.but:hover+ul{ 值  }

  元素隐藏   display:none; 元素不占位置    opacity:0-1   1不透明    0完全透明  半透明 0-1之间的数

浮动  float:left/right       清除浮动   clear:left/right/both      盒子设为阴影: box-shadow
静态定位   position:static  

定位position:  可以决定元素在网页上的位置   left左  right右  top上  bottom下  z-index层级

静态定位(默认值)  c

相对定位  position:relattive

1.relative  相对定位  相对于自身位置进行移动、保留原位置  position:relattive;  

绝对定位  position:absolute

absolute  绝对定位  1.不占位置   2.相对于那哪里移动   默认:相对于整个网页   父元素进行移动,父元素有定位,则子元素会相对于父元素进行移动(父相子绝)

固定定位   position:fixed

fixed 固定定位  1.相对于进行移动   2.是否占原位

   

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

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

相关文章

基于STM32单片机的汽车胎压、速度及状态监测系统设计与实现

基于STM32单片机的汽车胎压、速度及状态监测系统设计与实现 摘要: 随着汽车电子技术的快速发展,车辆状态实时监控系统的需求日益增长。本文设计并实现了一种基于STM32单片机的汽车胎压、速度及状态监测系统。该系统能够实时监测汽车的胎压、速度以及其他…

MCU自动测量单元:自动化数据采集的未来

随着科技的飞速发展,自动化技术在各个领域中的应用日益广泛。其中,MCU(微控制器)自动测量单元以其高效、精准的特性,成为自动化数据采集领域的佼佼者,引领着未来数据采集技术的革新。本文将深入探讨MCU自动测量单元的原理、优势以…

实习面试算法准备之图论

这里写目录标题 1 基础内容1.1 图的表示1.2图的遍历 2 例题2.1 所有可能的路径 1 基础内容 图没啥高深的,本质上就是个高级点的多叉树而已,适用于树的 DFS/BFS 遍历算法,全部适用于图。 1.1 图的表示 图的存储在算法题中常用邻接表和邻接矩…

84.柱形图中最大的矩阵

二刷终于能过了. 思路解析: 不愧是hard,第一步就很难想, 对于每一个矩阵,我们要想清楚怎么拿到最大矩阵, 对于每个height[i],我们需要找到left和right,left是i左边第一个小于height[i]的,right是右边第一个小于height[i]的,那么他的最大矩阵就是height[i] * (right-left-…

linux下安装deepspeed

安装步骤 一开始安装deepspeed不可以使用pip直接进行安装。 这时我们需要利用git进行clone下载到本地: git clone https://github.com/microsoft/DeepSpeed.git 进入到deepspeed的安装目录下 cd /home/bingxing2/ailab/group/ai4agr/wzf/Tools/DeepSpeed 激活…

LeetCode-旋转链表

每日一题,很久没做链表的题了,今天做l一道相对简单的力扣中等难度题。 题目要求 给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置。 示例 1: 输入:head [1,2,3,4,5], k 2 输出&…

智慧浪潮下的产业园区:洞察智慧化转型如何打造高效、绿色、安全的新园区

目录 一、引言 二、智慧化转型的内涵与价值 三、打造高效园区的智慧化策略 1、建设智能化基础设施 2、推广智能化应用 3、构建智慧化服务平台 四、实现绿色园区的智慧化途径 1、推动绿色能源应用 2、实施绿色建筑设计 3、加强环境监测与治理 五、保障园区安全的智慧…

大白菜启动U盘想格式化但格式化不了

部分区域被修改分区表保护起来了。直接格式化的话,里面的文件夹都还在。根本格式化不了。特别是可用容量并未还原出来。 进入计算机管理》磁盘管理,看到U盘盘符。别搞错了。删除掉里面的已经分的区域和未分区区域,让它还原成一个整体。退出。…

Webpack-入门

定义 静态模块:指的是编写代码过程中的html,css,js,图片等固定内容的文件 打包:把静态模块内容压缩、整合、翻译等(前端工程化) 1)把less/sass转成css代码 2)把ES6降级…

webpack 入口和出口的最佳实践

入口和出口的最佳实践 {ignore} 具体情况具体分析 下面是一些经典场景 一个页面一个JS 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 源码结构 |—— src|—— pageA 页面A的代码目录|—— index.js 页面A的启动模块|—— ...|—— pageB 页面…

matlab学习007-已知离散时间系统的系统函数并使用matlab绘制该系统的零极点图;判断系统的稳定性;幅频和相频特性曲线

目录 题目 离散时间系统的系统函数:H(z)(3*z^3-5*z^210z)/(z^3-3*z^27*z-5) 1,绘制该系统的零极点图 1)零极点图 2)代码 2,判断系统的稳定性 1)判断结果 2)代码 3,试用MATL…

闲话 ASP.NET Core 数据校验(一):内置数据校验

前言 所谓输入的是垃圾,输出也必然是垃圾,有多少安全问题隐藏在请求的数据中,所以永远不能相信来自用户端的输入。 对请求数据的合法性进行校验,不仅有助于提升用户界面的友好性,而且有助于提高后台程序的安全性和稳…

【车载开发系列】UDS诊断时间参数说明

【车载开发系列】UDS诊断时间参数说明 一. 应用层诊断时间参数 1)P2 CAN_Client 诊断仪成功发送诊断报文请求之后到收到 ECU回复诊断响应的超时时间间隔 2)P2 CAN_Server ECU 接收到诊断请求之后到开始发送诊断报文的时间间隔,一般默认最…

二维码门楼牌管理应用平台建设:场所检查的新模式

文章目录 前言一、二维码门楼牌管理应用平台的优势二、场所检查记录的重要性三、二维码门楼牌管理应用平台在场所检查中的应用四、二维码门楼牌管理应用平台的未来展望 前言 随着信息技术的飞速发展,二维码作为一种高效、便捷的信息识别方式,正逐渐渗透…

服务器数据恢复—存储硬盘坏道,指示灯亮黄色的数据恢复案例

服务器数据恢复环境&故障: 一台某品牌EqualLogic PS系列某型号存储,存储中有一组由16块SAS硬盘组建的RAID5磁盘阵列,RAID5上划分VMFS文件系统存放虚拟机文件。存储系统上层一共分了4个卷。 raid5阵列中磁盘出现故障,有2块硬盘…

二极管钳位型光伏逆变并网建模simulink仿真

整理了二极管钳位型光伏逆变并网建模simulink仿真,效果明显,附赠仿真报告。适合小白 二极管钳位型光伏逆变并网是将光伏发电系统中的直流电能转换为交流电能,并与电网连接。在此仿真中使用最大功率点追踪(MPPT)技术&a…

基于CANoe从零创建以太网诊断工程(2)—— TCP/IP Stack 配置的三种选项

🍅 我是蚂蚁小兵,专注于车载诊断领域,尤其擅长于对CANoe工具的使用🍅 寻找组织 ,答疑解惑,摸鱼聊天,博客源码,点击加入👉【相亲相爱一家人】🍅 玩转CANoe&…

微信第三方开放平台,实现代公众号保留排版样式和图片发布文章

大家好,我是小悟 要想实现代公众号发布文章的功能,就得接入富文本编辑器,市面上富文本编辑器有很多,轻量的、重量的都有。 从开发者的角度,自然把轻量作为第一选择,因为好对接,怎么方便怎么来…

在win下,python如何调用.so库

#撰写c代码 #通过gcc命令编译成.so库 gcc -shared -o ./lib/pointlib.so point.c #python调用.so库 #运行结果 觉得本文对你有用,麻烦点赞或关注或收藏,你的肯定是我创作的无限动力,谢谢!!!

制作一个RISC-V的操作系统十四-任务同步和锁

文章目录 并发与同步临界区和锁锁死锁解决死锁自旋锁(spin lock)原子性问题原子操作实现amoswap.w.aq例子 另一种方法自旋锁的注意事项代码其他同步技术 并发与同步 控制流:可理解为任务或进程 中断也可以理解为一个切换到另一个任务&#…