【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.mzph.cn/diannao/9228.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebSocket 来单提醒和客户催单功能

一:WebSocket : WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接, 并进行双向数据传输。 HTTP协议和WebSocket协议对比&#…

算法提高之迷宫问题

算法提高之迷宫问题 核心思想&#xff1a;最短路问题 从(n-1,n-1)开始bfs 往前走一个就存入pre数组 之后再遍历pre数组输出 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 1010,M N*N;#define x first#def…

vue 代码样式问题

部分电脑存在样式错乱问题&#xff0c;部分电脑样式正常。最后发现是样式写在 el-col 里面导致的。 注意&#xff1a;写样式不要放在 el-row 或者 el-row &#xff0c;导致部分电脑会出现莫名其妙的样式问题 <el-row class"detail"><el-col class"it…

OSPF NSSA区域

原理概述 OSPF 协议定义了 Stub 区域和 Totally Stub 区域这两种特殊的非骨干区域&#xff0c;为的是精简 LSDB 中 LSA 的数量&#xff0c;同时也精简路由表中的路由条目数量&#xff0c;实现优化设备和网络性能的目的。根据定义&#xff0c; Stub 区域或 Totally Stub 区域中是…

Springboot项目使用redis实现session共享

1.安装redis&#xff0c;并配置密码 这里就不针对于redis的安装约配置进行说明了&#xff0c;直接在项目中使用。 redis在windows环境下安装&#xff1a;Window下Redis的安装和部署详细图文教程&#xff08;Redis的安装和可视化工具的使用&#xff09;_redis安装-CSDN博客 2…

PHP+MySQL组合开发 自定义商城系统源码 带完整的安装代码包以及安装部署教程

随着电子商务的蓬勃发展&#xff0c;越来越多的企业和个人希望拥有自己的在线商城系统。小编给大家分享一款基于PHP和MySQL技术栈&#xff0c;开发的一套自定义商城系统源码。该系统旨在帮助用户快速搭建稳定、高效的电子商务平台&#xff0c;并提供灵活的自定义功能&#xff0…

笨蛋学C++ 之 CMake的使用

笨蛋学C 之 CMake的使用 CMake生成可执行程序的流程CMake命令执行流程安装CMakelinux执行cpp文件运行删除 基本语法cmake命令构成运行.cmake文件&#xff0c;在CMake中如何打印信息变量操作set、listsetlist 流程控制条件流程控制循环流程控制forwhile 函数作用域全局作用域局部…

解读Inscode AI:开启代码智能化的新时代

导语&#xff1a; 近年来&#xff0c;人工智能技术的迅猛发展已经深刻地影响着各个行业&#xff0c;而在软件开发领域&#xff0c;Inscode AI的出现无疑将给代码智能化带来一场革命。本文将为大家解读Inscode AI的特点和应用&#xff0c;探索其如何改变我们的软件开发方式。 一…

java设计模式八 享元

享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过共享技术有效地支持大量细粒度的对象。这种模式通过存储对象的外部状态在外部&#xff0c;而将不经常变化的内部状态&#xff08;称为享元&#xff09;存储在内部&#xff0c;以此来减…

ORA-02020:过多的数据库链接在使用

一、问题描述 今天同事说&#xff0c;有一个查询功能&#xff0c;同时查了几个子平台的dblink&#xff0c;页面返回报错。 提示ORA-02020&#xff1a;过多的数据库链接在使用&#xff1b; bad SQL grammar 二、解决办法 1&#xff09;分析业务需求 分析业务场景 &#xff0c;发…

美食推荐网站设计

**中文摘要&#xff1a;**在当今信息化、网络化的时代背景下&#xff0c;美食文化正逐渐融入人们的日常生活&#xff0c;而网络平台成为人们获取美食信息、分享美食体验的重要途径。为了满足广大美食爱好者对美食信息的探索和推荐需求&#xff0c;本文提出了一种创新的美食推荐…

谷歌开源!用 js 编写 Shell 脚本! | 开源日报 No.247

google/zx Stars: 41.4k License: Apache-2.0 zx 是一个用于编写更好脚本的工具。 提供有用的包装器&#xff0c;简化了对 child_process 的操作转义参数并提供合理的默认值使用 JavaScript 编写复杂脚本时比 Bash 更方便可以直接使用 npm 安装 dani-garcia/vaultwarden St…

Nest 快速上手 —— (三)中间件 / 异常过滤器

一、 中间件&#xff08;Middleware&#xff09; 1.特点 中间件是一个在路由处理程序之前被调用的函数。中间件函数可以访问请求和响应对象&#xff0c;以及应用程序请求-响应周期中的next()中间件函数。下一个中间件函数通常由一个名为next的变量表示。 中间件函数可以执行以…

5.9gunplot绘图堆叠柱状图

gunplot绘图堆叠柱状图 plot"要用的数据&#xff08;后缀名是.dat)" using 2 t(或者title) 跟着是要命名的属性名称 这个名称可以用.dat里的每列列名&#xff0c;也可以直接在后面跟着定义 plot "data.dat" using 2 t columnheader(2), using 3 t column…

PyQt5 解决界面无响应方案

文章目录 前言版本案例解决方案QThreadQTimer 局部变量创建异步线程导致 UI 未响应如果 QTimer 不使用 self.time 写法 个人简介 前言 在PyQt5中&#xff0c;GUI线程通常指的是Qt的主事件循环线程&#xff0c;也称为主线程。主线程负责处理GUI事件、更新UI界面等任务。在PyQt5…

vue的组件库

作为一个Vue.js开发者&#xff0c;使用组件库是提高效率和代码重用的关键。Vue的组件库为开发者提供了一系列预先构建好的组件&#xff0c;可以在项目中直接引用和定制。以下是一些关于Vue组件库的知识点和用法&#xff1a; 常见的Vue组件库&#xff1a; Element UI&#xff…

如何通过OMS加快大表迁移至OceanBase

OMS&#xff0c;是OceanBase官方推出的数据迁移工具&#xff0c;能够满足众多数据迁移场景的需求&#xff0c;现已成为众多用户进行数据迁移同步的重要工具。OMS不仅支持多种数据源&#xff0c;还具备全量迁移、增量同步、数据校验等功能&#xff0c;并能够对分表进行聚合操作&…

系统运维(虚拟化)

1.VLAN VLAN&#xff08;Virtual Local Area Network&#xff09;即虚拟局域网&#xff0c;是将一个物理的LAN在逻辑上划分成多个广播域的通信技术。 每个VLAN是一个广播域&#xff0c;VLAN内的主机间可以直接通信&#xff0c;而VLAN间则不能直接互通。这样&#xff0c;广播报…

深度学习网络:设计、开发和部署

​书籍&#xff1a;Deep Learning Networks: Design, Development and Deployment 作者&#xff1a;Jayakumar Singaram&#xff0c;S. S. Iyengar&#xff0c;Azad M. Madni 出版&#xff1a;Springer书籍下载-《​深度学习网络&#xff1a;设计、开发和部署》该教材为学生和工…

vue使用screenfull实现全屏模式

vue实现全屏模式可以通过第三方依赖screenfull完成效果。 实现效果&#xff1a;查看源码 首先需要安装第三方依赖 // npm npm install screenfull//yarn yarn add screenfull// pnpm pnpm install screenfull代码实现&#xff1a; <div class"flex-center w100 h…