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.mfbz.cn/a/581746.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nodejs 第六十九章(杀毒)

杀毒 杀毒(Antivirus)是指一类计算机安全软件,旨在检测、阻止和清除计算机系统中的恶意软件,如病毒、蠕虫、木马、间谍软件和广告软件等。这些恶意软件可能会对计算机系统和用户数据造成损害,包括数据丢失、系统崩溃、…

⑥ - 后端工程师通识指南

📖 该文隶属 程序员:职场关键角色通识宝典 ✍️ 作者:哈哥撩编程(视频号同名) 博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者 🏆 推荐专栏…

windows下git提交修改文件名大小写提交无效问题

windows系统不区分大小写,以及git提交忽略大小写,git仓库已存在文件A.js,本地修改a.js一般是没有提交记录的,需要手动copy一份出来A.js,再删除A.js文件提交仓库删除后,再提交修改后的a.js文件。 windows决…

岚图汽车与东软睿驰签署战略合作协议

4月26日,东软睿驰与岚图汽车正式签署战略合作协议,双方将结合在各自领域拥有的产业资源、技术研发和资本运作等优势,聚焦智能化产品和应用,建立长期共赢的战略合作伙伴关系,通过不断探索未来新技术、新产业、新业态和新模式,围绕用户需求共同打造极致的智能出行体验。 图为岚图…

【AIGC调研系列】llama3微调具体案例

Llama3的微调可以通过多种方式进行,具体案例包括: 使用XTuner进行微调,尝试让Llama3具有"它是SmartFlowAI打造的人工智能助手"的自我认知。这涉及到准备自我认知训练数据集,并通过脚本生成数据[2][8]。利用Unsloth和Go…

GD32E103C8T6 封装LQFP-48 GigaDevice(兆易创新) 单片机

GD32E103C8T6 是由GigaDevice(兆易创新)公司生产的一款基于ARM Cortex-M4内核的32位MCU(微控制器)。以下是GD32E103C8T6的一些主要功能和参数介绍: 主要功能: 高性能ARM Cortex-M4内核: 采用120MHz的ARM …

求解素数环问题

注:这里我的代码是以第一位为最大数n为首元素不动的 思路: 首先我们分析问题要以较小规模的样例进行分析,例如n3时 第一步:深入搜索 我们先不管后面怎么样,当前的首要目标是先确定第一个元素的值,可知有…

paddlehub的简单应用

1、下载安装 pip install paddlehub -i https://pypi.tuna.tsinghua.edu.cn/simple 报错&#xff1a; Collecting onnx<1.9.0 (from paddle2onnx>0.5.1->paddlehub)Using cached https://pypi.tuna.tsinghua.edu.cn/packages/73/e9/5b953497c0e36df589fc60cc6c6b35…

Java中集合概述(补充ing)

一、集合分类 Java中的集合框架提供了多种类型的集合&#xff0c;主要分为两大类&#xff1a;单列集合&#xff08;只保存单一类型的对象&#xff09;和双列集合&#xff08;保存具有键值对关系的对象&#xff09;。下面对这些集合进行分类介绍&#xff0c;但由于源码分析会涉…

开源相机管理库Aravis例程学习(五)——camera-api

开源相机管理库Aravis例程学习&#xff08;五&#xff09;——camera-api 简介例程代码函数说明arv_camera_get_regionarv_camera_get_pixel_format_as_stringarv_camera_get_pixel_formatARV_PIXEL_FORMAT_BIT_PER_PIXEL 简介 本文针对官方例程中的&#xff1a;03-camera-api…

沉浸式翻译 chrome 插件 Immersive Translate - Translate Website PDF

免费翻译网站&#xff0c;翻译PDF和Epub电子书&#xff0c;双语翻译视频字幕 &#x1f4e3; 网络上口碑爆炸的网站翻译扩展工具【沉浸式翻译】⭐⭐⭐⭐⭐ &#x1f4bb; 功能特点如下&#xff1a; &#x1f4f0; 网站翻译 &#x1f680; 提供双语网站翻译&#xff0c;智能识…

618科技嘉年华!五款极致科技产品,开启智能生活新篇章!

准备好迎接一年一度的618了吗&#xff1f;这不仅仅是一场购物的狂欢&#xff0c;更是一次科技的盛宴&#xff0c;一次智能生活的全新启航。今年&#xff0c;我们将带来五款令人瞩目的极致科技产品&#xff0c;它们将彻底颠覆你对智能生活的认知。从娱乐到工作&#xff0c;这些产…

【Node.js工程师养成计划】之原生node开发web服务器

一、使用node创建http服务器 var http require(http);// 获取到服务器实例对象 var server http.createServer() server.listen(8080, function() {console.log(http://127.0.0.1:8080); })server.on(request, function(req, res){console.log(request);res.write(6666666688…

《微服务设计》读书笔记

此为阅读纽曼《微服务设计》一书后总结的读书笔记&#xff0c;点此处下载PDF文档。 一、微服务的概念 微服务&#xff08;或称微服务架构&#xff09;是一种云原生架构方法&#xff0c;其核心思想在于将单个应用拆分为众多 小型、松散耦合的服务&#xff0c;服务之间均通过网…

百度语音识别的springboot应用

1、pom依赖 <dependency> <groupId>com.baidu.aip</groupId> <artifactId>java-sdk</artifactId> <version>4.16.18</version> </dependency> 2、测试的demo 创建语音识别应用 百度智能云-管理中心 (baidu.com) 代码中要…

十大USDT交易平台大全XEX交易所

USDT是一种基于比特币区块链网络的加密代币&#xff0c;主要运用于数字货币交易平台&#xff0c;以稳定币为主。USDT的核心价值在于其与真实货币的固定兑换比率1:1&#xff0c;所以被称为Tether。随着加密货币市场的不断壮大&#xff0c;越来越多的交易平台开始支持USDT&#x…

Android 设置头像 - 裁剪及圆形头像

书接上文 Android 设置头像 - 相册拍照&#xff0c;通过相册和照片的设置就可以获取到需要的头像信息&#xff0c;但是在通常情况下&#xff0c;我们还想要实现针对头像的裁剪功能和圆形头像功能。 先上截图&#xff1a; 图像裁剪 通常裁剪可以分为程序自动裁剪和用户选择裁剪…

上位机图像处理和嵌入式模块部署(树莓派4b设置ftp下载)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 作为一个开发板&#xff0c;最好支持ftp下载&#xff0c;这样文件的上传和下载都会比较方便。虽然目前为止&#xff0c;利用mobaxterm和ssh也能实现…

8.11 分析工具 8.14 设计工具

一、分析工具 &#xff08;一&#xff09;结构化分析 1、数据流图&#xff08;DFD&#xff09; &#xff08;1&#xff09;数据流图 从数据传递、加工的角度&#xff0c;以图形刻画系统内的数据运动情况。全面描述系统逻辑模型的工具。通过符号&#xff0c;表示出数据流动、…

C++中的数据结构与算法

随处可见的红黑树 一般会用到[key,value]。 例如github中这个例子&#xff0c;第一个是访问网站&#xff0c;第二个是访问次数&#xff0c;但是这个不是静态的&#xff0c;这有个动态排序&#xff0c;并且当我们需要让相应的访问次数加1的时候&#xff0c;我们用红黑树查找的时…
最新文章