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

news/2024/5/20 15:36:28

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.mrgr.cn/p/33134567

相关文章

【Java】初识网络编程

文章目录 前言✍一、互联网的发展1.独立模式2.网络的出现局域网LAN广域网WAN ✍二、网络编程概述✍三、网络编程中的术语介绍IP地址端口号协议OSI七层模型TCP\IP四层模型 ✍四、协议的层级之间是如何配合工作的 前言 在本文中,会对网络编程的一些术语进行解释&#…

《最新出炉》系列入门篇-Python+Playwright自动化测试-45-鼠标操作-下篇

1.简介 鼠标为我们使用电脑提供了很多方便,我们看到的东西就可以将鼠标移动过去进行点击就可以打开或者访问内容,当页面内容过长时,我们也可以使用鼠标滚轮来实现对整个页面内容的查看,其实playwright也有鼠标操作的方法。上一篇文章中已经讲解过鼠标的部分操作了,今天宏哥…

redux中核心组件有哪些,reducer的作用

在redux中,核心组件包括Action、Reducer、Store和Middleware。 Action是一个普通的JavaScript对象,用于描述发生了什么事件。它必须包含一个type属性,用于标识事件的类型。可以在Action中添加其他自定义的属性来传递数据。 Reducer是一个纯函数,用于根据收到的Action来更新…

学习记录+vcode+GPIO例程+正点原子 DNESP32S3 开发板教程-IDF 版

第一个程序: UART模式和JTAG模式,配置完成不同。配置主要就是.vscode 文件夹中 c_cpp_properties.json,tasks.json,launch.json,settings.json四个文件。 一个想法:备份UART模式和JTAG模式的配置文件,用时直接文件替换。简单粗暴方式是.vscode 文件夹替换。当然每次要选…

chrome extension插件替换网络请求中的useragent

感觉Chrome商店中的插件不能很好的实现自己想要的效果,那么就来自己动手吧。 本文以百度为例: 一般来说网页请求如下: 当前使用的useragent是User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safar…

AB实验相关流程

本篇文章介绍的是一个完整AB测试流程应该怎么走。 AB测试流程有以下几个步骤: 一、选取实验指标 二、建立实验假设 三、选取实验单位 四、确定最小提升预期值 五、计算最小样本量 六、流量分割 七、确定实验时长 八、数据统计 九、得出结论 接下来就详细说明每个步骤。 一、选…

RS232引脚方向及意义与接线参考

RS232引脚方向及定义编号引脚意义方向作为IO使用说明1CD载波检测(Carrier Detect)计算机《调制解调器输入调制解调器通知计算机有载波被侦测到2RXD接收(Receive)计算机《调制解调器 接收数据3TXD发送(Transmit)计算机》调制解调器 发送数据4DTR数据终端设备(DTE)备好(Data Te…

jenkins 拉取代码之后 自动执行jar包到部署服务器自动运行

原文地址: https://blog.csdn.net/xiuyuandashen/article/details/124490378

springboot整合rabbitmq的不同工作模式详解

前提是已经安装并启动了rabbitmq,并且项目已经引入rabbitmq,完成了配置。 不同模式所需参数不同,生产者可以根据参数不同使用重载的convertAndSend方法。而消费者均是直接监听某个队列。 不同的交换机是实现不同工作模式的关键组件.每种交换…

MindSpore反向传播配置关键字参数

继上一篇文章从Torch的两个Issue中找到一些类似的问题之后,可以发现深度学习框架对于自定义反向传播函数中的传参还是比较依赖于必备参数,而不是关键字参数,MindSpore深度学习框架也是如此。但是我们可以使用一些临时的解决方案,对此问题进行一定程度上的规避,只要能够自定…

AR精灵——风险分析和典型用户

风险分析典型用户 典型用户一名字:盛宇伟 年龄:28岁,收入:每月约8000元 代表的用户在市场上的比例和重要性:虽然使用AR精灵的付费用户比例较少,但他们对产品的热爱和忠诚度很高,他们的反馈和建议对产品的改进至关重要。 使用这个软件的典型场景:李梅在下班后回到家中,…

Python-Socket编程实现tcp-udp通信

本文章是记录我准备大创项目时学的socket编程的用法,纯属记录生活,没有教学意义,视频我是看b站up主王铭东学的,讲的很详细,我只粗略学了个大概,我想要通过tcp,udp传输yolo目标检测中的物体坐标信…

sql 注入 1

当前在email表 security库 查到user表 1、第一步,知道对方goods表有几列(email 2 列 good 三列,查的时候列必须得一样才可以查,所以创建个临时表,select 123 ) 但是你无法知道对方goods表有多少列 用order …

BOSHIDA AC/DC电源模块在通信与网络设备中的应用研究

BOSHIDA AC/DC电源模块在通信与网络设备中的应用研究 随着通信与网络技术的不断发展,通信与网络设备的使用不断增加。电源作为通信与网络设备的重要组成部分之一,在其稳定工作中起到至关重要的作用。AC/DC电源模块作为一种常用的电源转换器,广泛应用于通信与网络设备中。 一…

AWVS(acunetix) 安装详细教程

一、软件介绍Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的Web网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞。AWVS官方网站是:http://www.acunetix.com/ 软件有window版本,linux版本,还可以docker安装 二、下载安装 官方下载地址: h…

国密算法SM3-java实现

aven依赖<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15on</artifactId><version>1.56</version> </dependency> SM3Utilsimport org.bouncycastle.crypto.digests.SM3Digest; import org.bouncy…

区块链 | IPFS:Merkle DAG

&#x1f98a;原文&#xff1a;IPFS: Merkle DAG 数据结构 - 知乎 &#x1f98a;写在前面&#xff1a;本文属于搬运博客&#xff0c;自己留存学习。 1 Merkle DAG 的简介 Merkle DAG 是 IPFS 系统的核心概念之一。虽然 Merkle DAG 并不是由 IPFS 团队发明的&#xff0c;它来自…

uniapp:抖音PK进度条(nvue)

nvue中,仿抖音PK进度条效果, <template><view class="index" :style="{width:windowWidth+px,height:index_windowHeight+px,paddingTop:windowTop+px}"><view class="pk"><text class="pk_jindu_left_val fsz-24 …

【OpenGL4.6】VS2022安装OpenGL4.6的全过程

文章目录 一、说明二、vs2022环境安装2.1. 安装vs20222.2 为OpenGL专门建立目录 三、下载安装cmake&#xff0c;用于编译源代码3.1 为什么安装Cmake3.2 下载和安装Cmake 四、下载安装glfw&#xff0c;用于窗口界面4.1 设置glfw库&#xff0c;用于创建窗体4.2 如何使用glfw库? …

密码学《图解密码技术》 记录学习 第十二章

目录 第十二章 12.1 骡子的锁匠铺 12.2 本章学习的内容 12.3 使用随机数的密码技术 12.4 随机数的性质 12.4.1 对随机数的性质进行分类 12.4.2 随机性 12.4.3 不可预测性 12.4.4 不可重现性 小测验 1 骰子 &#xff08;答案见 1…