本文主要是介绍【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地址
这篇关于【Web前端】定位_浮动_音视频的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
