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

devtools/2024/9/25 5:30:36/

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.ppmy.cn/devtools/38455.html

相关文章

领域驱动设计架构演进

领域驱动设计由于其强调对领域的深入理解和关注业务价值,其架构演进依赖于领域的变化和特定领域中的技术实践。 初始阶段 一个单体架构,所有的功能都集成在一个应用程序中,领域模型可能还不完全清晰,甚至并未形成。这个阶段主要是为了验证产品的可行性,快速迭代并尽快推…

CSS中的Float(浮动)

CSS中的Float(浮动) 目录 CSS中的Float(浮动) 一、 什么是Float? 二、 Float的工作原理 三、Float的属性值 四、Float的清除 五、 Float的注意事项 六、 Float的代码示例 七、Float的最佳实践 一、 什么是Floa…

住宅物业满意度定性和定量调研方法有哪些?

本文由群狼调研(长沙物业收费价格调研)出品,欢迎转载,请注明出处。住宅物业满意度调研可以结合定性和定量方法,以获取更全面的数据和深入的理解。以下是一些常见的定性和定量调研方法: 1.定性调研方法&…

爬虫:爬取豆瓣电影

文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 上篇我们将到如何利用xpath的规则,那么这一次,我们将通过案例来告诉读者如何使用Xpath来定位到我们需要的数据,就算你不懂H5代码是怎么个嵌套或者十分复…

MySQL#MySql数据库的操作

目录 一、创建数据库 二、字符集和校验规则 1.查看系统默认字符集以及校验规则 2.查看数据库支持的字符集 3.查看数据库支持的字符集校验规则 4.校验规则对数据库的影响 1.以UTF-8格式创建数据库 2.不区分大小写 3.区分大小写 4 大小写对数据库的影响 三、操纵数据…

c语言排序算法之七(希尔排序)

前言 以下内容是被验证可以有效理解希尔排序,代码也较容易理解。如果你发现还有很多需要增加的,欢迎留言。 为什么要单独写排序算法这一系列,看过一些贴子普遍篇幅较长。看完还依旧云里雾里,难以直观理解原理及整个过程。代码永…

保姆级零基础微调大模型(LLaMa-Factory,多卡版)

此处非常感谢https://github.com/hiyouga/LLaMA-Factory这个项目。 看到网上的教程很多都是教如何用webui来微调的,这里出一期命令行多卡微调教程~ 1. 模型准备 模型下载比较方便的方法: 1. modelscope社区(首选,速度很高,并且很多需要申请的模型都有)注意要选择代码…

模型剪枝——Linear Combination Approximation of Feature for Channel Pruning

线性逼近剪枝代码实现见文末 论文地址:CVPR 2022 Open Access Repositoryhttps://openaccess.thecvf.com/content/CVPR2022W/ECV/html/Joo_Linear_Combination_Approximation_of_Feature_for_Channel_Pruning_CVPRW_2022_paper.html 1.概述 传统的剪枝技术主要集中在去除对…