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 图的表示 图的存储在算法题中常用邻接表和邻接矩…

庆祝我在CSDN上创作满四年:分享知识,共同成长

引言: 今天,我非常高兴地迎来了在CSDN平台上创作四周年的纪念日。这四年对我来说既是挑战也是成长,我在这里记录了自己的技术探索和心得体会,也收获了来自社区的宝贵知识和友谊。 正文: 创作初衷: 开始在C…

SUSE Linux Rsync+inotify精准系统同步配置实战

配置不难,也可以说难,这完全取决于需求。一.服务器状况: NFS文件服务器,存储提交的附件和图片。希望搭建一个在线的备份文件服务器,实现主服务和备份服务器之间的文件的实时同步。 Filesserver:/tmp # lsb_release -a LSB Version: n/a Distributor ID: SUSE Descri…

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 输出&…

Java基础入门day41

day41 约束 实体完整性 主键约束 唯一约束 自增约束 域完整性 限制列的单元格的数据的正确性 非空约束 not null,非空,此列必须有值 create table subject03(sid int primary key auto_increment,subname varchar(20) unique not null,subHour int…

C++ 异常处理机制详解:轻松掌握异常处理技巧

C 异常处理 C 异常处理机制允许程序在运行时处理错误或意外情况。它提供了捕获和处理错误的一种结构化方式,使程序更加健壮和可靠。 异常处理的基本概念: 异常: 程序在运行时发生的错误或意外情况。抛出异常: 使用 throw 关键字将异常传递给调用堆栈。…

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

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

pam配置文件中[default=2 ignore=ignore success=ok]

pam配置文件中第二字段为[default2 ignoreignore successok],例如: auth [default2 ignoreignore successok] pam_localuser.so {include if "with-smartcard"}这行配置中的第二字段[d…

REST API规范

目录 一、REST相关规范1.1 Http Method1.2 REST接口格式1.3 Http Status1.4 版本控制 二、SpringMVC相关规范2.1 参数校验2.2 响应结果2.3 接口全局异常处理2.4 参数校验提示信息支持国际化2.5 响应码规范 REST JSON已成为Http接口的事实标准,本文给出我平时推荐的R…

大白菜启动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 接收到诊断请求之后到开始发送诊断报文的时间间隔,一般默认最…

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

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