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

上一篇:IT项目管理-简答题【太原理工大学】


下一篇:Javaweb项目搭建以及介绍