【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地址