【Web前端】定位_浮动_音视频

1、定位

1.1想对定位

  • 相对定位,使用relative,参考点是标签之前的位置,不是相对于父节点、同级节点或浏览器。
  • 相对定位通过left、right进行水平偏移,通过top、bottom进行垂直偏移
  • Ieft:表示相对于原本位置的左外边界右移的距离
  • right:表示相对于原本位置的右外边界左移的距离
  • top:表示相对于原本位置的上外边界下移的距离
  • bottom:表示相对于原本位置的下外边界上移的距离
  • 相对定位,不脱离标准文档流,原有的位置保留不变,后面的元素不能占用它原有的位置
  • 主要用于承载内部元素绝对定位的参考标准。

1.2绝对定位

  • 绝对定位相对于最近的定位的祖先元素进行定位,如果没有祖先元素,则使用文档主体(body)即浏览器,并随页面滚动时,一起移动。(绝对定位的祖先元素,不能是static定位)
  • 绝对定位会脱离标准文档流,原有的位置,会被后面元素占用

1.3固定位置

  • fixed属性值,相对于浏览器容器进行固定定位

2、浮动

2.1 属性

  • 使用float,能够让元素向左或向右移动,直到其外边距遇到父级内边距或者同级上一个元素的外边距停止
  • left:元素向左浮动
  • right:元素向右浮动
  • none:默认值,不浮动

2.2 特点

  • 当元素浮动之后,脱离原有标准文档流,原有的位置会被后面元素占用
  • 浮动元素支持所有 css样式
  • 如果没有设置,内容撑开宽高
  • 一个元素浮动起来之后,在下个元素中,文本会围绕这个元素的周围
  • 不管元素是行级还是块级,一旦浮动起来,display属性就相当于设置了inline-block,也就是元素变成了内联块级

2.3 父级元素高度

  • 如果没有设置父级元素高度,则它的高度是由子元素撑开的。
  • 当子元素全部浮动起来之后,脱离了标准文档流,父元素高度塌陷了
  • 可以使用overfow:hidden,触发浏览器重新计算父元素高度

2.4 浮动的清除

  • left:在左侧清除浮动影响
  • right:在右侧清除浮动影响
  • both:在两侧清除浮动影响

3、音视频

3.1音频标签

  • controls具有控制器界面
  • autoplay设置音频在就绪后马上播放,不同浏览器要有不同设置
  • loop对音频进行循环播放处理
  • source->src音频文件的url地址

3.2视频标签

  • controls具有控制器界面
  • width设置视频界面宽度
  • height设置视频界面高度
  • poster设置视频封面
  • source->src视频文件的url地址

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

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

相关文章

融知财经:期权期货及其他衍生产品

期权、期货及其他衍生产品是金融市场中用于管理风险和进行投机的金融工具。这些衍生产品的价值依赖于一个或多个基础资产,如股票、商品、利率、汇率等。以下是关于这些衍生产品的一些基本介绍: 1、期货(Futures):期货是…

5月7号(信息差)

🌍首次,西湖大学用蛋白质语言模型定向改造碱基编辑器,登Cell子刊 https://www.jiqizhixin.com/articles/2024-05-07-10 🎄 哈马斯宣布同意停火提议 https://finance.eastmoney.com/a/202405073067687785.html ✨ 中国将对…

数据结构学习:栈(详细讲解)

🎁个人主页:我们的五年 🔍系列专栏:C语言基本概念 🌷追光的人,终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章 目录 🚗1.对栈概念理解: &a…

【Debug日记】albumentations包安装失败解决方案

直接pip安装pip install albumentations 报错: ERROR: Command errored out with exit status 1:command: D:\anaconda3\envs\pytorch\python.exe D:\anaconda3\envs\pytorch\lib\site-packages\pip\_vendor\pep517\in_process\_in_process.py build_wheel C:\Users…

【编程题-错题集】连续子数组最大和(动态规划 - 线性 dp)

牛客对应题目链接:连续子数组最大和_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 简单线性 dp。 1、状态表示 dp[i] 表示:以 i 位置为结尾的所有子数组中,最大和是多少。 2、状态转移方程 dp[i] max(dp[i - 1] arr[i], arr[i]) 3、返回…

Sarcasm detection论文解析 |使用 BERT 进行中间任务迁移学习的刺检测

论文地址 论文地址:https://www.mdpi.com/2227-7390/10/5/844#/ github:edosavini/TransferBertSarcasm (github.com) 论文首页 笔记框架 使用 BERT 进行中间任务迁移学习的讽刺检测 📅出版年份:2022 📖出版期刊:Mathematics &…

[C/C++] -- 装饰器模式

装饰器模式是一种结构型设计模式,它允许在不改变原始对象的基础上动态地扩展其功能。这种模式通过将对象包装在装饰器类的对象中来实现,每个装饰器对象都包含一个原始对象,并可以在调用原始对象的方法之前或之后执行一些额外的操作。 装饰器…

炫龙电脑数据恢复方法有哪些?4个常用方法大放送

随着科技的不断发展,电脑已成为我们日常生活中不可或缺的一部分。然而,无论是由于操作失误、病毒感染、系统崩溃还是硬件故障,数据丢失都可能是每个电脑用户都可能面临的问题。对于使用炫龙电脑的用户来说,了解并掌握一些基本的数…

webassembly入门详解(C++)

一、环境配置 环境说明,操作系统为window操作系统。 1.1 下载和安装python 下载 需要python版本至少3.6版本 python下载地址:https://www.python.org/getit/ 安装 检测安装结果 win+R组合键->cmd->输入python->回车 1.2 下载和安装emsdk 下载 下载地址:https://gi…

这个Python库Streamlit,5分钟内搭建可视化WEB应用

在数据科学的世界里,将分析结果快速、直观地呈现给非技术背景的决策者,是一项重要的技能。而Streamlit,这个开源的Python库,正是为此而生。它允许数据科学家和工程师通过少量的代码,快速创建和分享数据应用。今天&…

OpenAI推出DALL·E 3识别器、媒体管理器

5月8日,OpenAI在官网宣布,将推出面向其文生图模型DALLE 3 的内容识别器,以及一个媒体管理器。 随着ChatGPT、DALLE 3等生成式AI产品被大量应用在实际业务中,人们越来越难分辨AI和人类创建内容的区别,这个识别器可以帮…

【Git】Git学习-15:分支简介和基本操作

学习视频链接:【GeekHour】一小时Git教程_哔哩哔哩_bilibili​编辑https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780 git bran…

pycharm code行太长显示波浪线取消

实际操作如下:个人比较合适的位置为160,180时有点多 效果:

Agent AI智能体:塑造未来社会的智慧力量

🔥 个人主页:空白诗 文章目录 🤖 Agent AI智能体:塑造未来社会的智慧力量🎯 引言🌱 智能体的未来角色预览💼 行业革新者🌟 创意合作者🛡️ 公共安全与环保🚀 …

武汉星起航:亚马逊欧洲站:丰富商品与卓越服务铸就高客单价典范

亚马逊,作为全球最大的电商平台之一,其欧洲站在全球电商市场中占据着举足轻重的地位。其中,亚马逊欧洲站的人均客单价更是高居世界前列,这背后究竟隐藏着哪些原因呢? 首先,亚马逊具有丰富且高质量的商品品…

工业镜头助力锂电制造业精准检测

在电动汽车、电动轻型车、电动工具、消费电子和新型储能等行业大发展的背景下,锂电池综合优势与下游领域对电池大容量、高功率、使用寿命和环境保护日益提升的需求相契合,存在广阔的市场应用前景。受益于动力、消费和储能三大细分领域的快速发展&#xf…

Debug项目失败Run成功

一:问题 idea中启动服务,服务一直在启动中,最后超时启动失败 重新构建项目也是一样 二:个人分析 debug因为断点太多了项目起不起来,试一下run直接运行,项目可以快速启动 三:解决办法 在控制…

Liunx系统怎么设置免密登录?看这一篇!

远程口令爆破也是黑客常用的手段,有些人安全意识薄弱的会设置一些简单的密码,这样分分钟会被黑客爆破进去,一旦操作系统沦陷,里面的数据必将被黑客一览无余,使用免密登录可以有效降低密码被爆破的风险,具体…

docker 方式 elasticsearch 8.13 简单例子

安装 docker 虚拟机安装 elastic search 安装本地 # 创建 elastic 的网络 docker network create elastic # 用镜像的方式创建并启动容器 docker run -d --name es --net elastic -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -e "xpack.secur…

Android 终端查看CPU信息源码分析

代码如下: 终端获取信息(左为H9,右为H5) 觉得本文对您有用,麻烦点赞、关注、收藏,您的肯定是我创作的无限动力,谢谢!!!
最新文章