对在使用
vue的过程中遇到的问题总结
设置背景图片
- 设置
静态背景图html:
<template>
<section class="login-container">
<p1>这里是内容</p1>
</section>
</template>
css:
.login-container {
background: url(../../assets/img/login/login_bg0.jpg) 50% 0 no-repeat fixed;
background-size: cover;
width: 100%;
height: 100%;
}
注意：此时background值的格式是url(静态照片资源路径)，举例url(../../assets/img/login/login_bg0.jpg)。
- 绑定
动态背景图html:
<template>
<section class="login-container" :style="backgroundObject">
<p1>这里是内容</p1>
</section>
</template>
js代码：
- 在data里面定义绑定属性
backgroundObject
//在data里面定义绑定属性backgroundObject
data() {
return {
backgroundObject:{
backgroundImage: "url(" + require("../../assets/img/login/login_bg0.jpg") + ")",
},
}
注意: 作用于背景图是backgroundImage属性而不是background属性.
backgroundImage值
静态资源格式："url(" + require("静态照片资源路径") + ")"。
backgroundImage值
动态资源格式："url(" + http向后台获取的资源路径 + ")"。
- js代码对
动态获取的照片进行处理。
// 获取背景图片
backgroundImgFun() {
this.$request.fetchBackgroundImage().then((res) => {
if (res.code === 200) {
if (res.data) {
//this.$getPath(res.data)为照片的http路径
this.backgroundObject.backgroundImage="url(" + this.$getPath(res.data) + ")";
} else {
this.loginImg = require("../../assets/img/login-bg.jpg");
}
}
});
},
音频和照片的动态绑定
html:
//音频
<audio ref="audio" controls hidden="true">
<source :src="audioSrc" type="audio/mpeg" />
</audio>
data绑定：
data() {
return {
//静态默认资源写法
audioSrc: require(`@/assets/audio/black_alerm.mp3`),
}
可对audioSrc赋值动态音频http资源路径，照片和音频一样。
文档流和脱离文档流
css提供了三种基本的定位机制：
普通流，定位和浮动来实现页面排版
文档流(普通流）
html的元素主要分三种：
块状元素，行内元素和行内块状元素块状元素:
独占一行，在文本流中从上到下一个接一个地排列,能设置宽高。常用元素：
div, p, h1-h6, ul, li, dl, dt, dd , form , table行内元素：在一行中
并排排列，遇到父元素的边沿会换行继续排列，不能设置宽高。常用元素：
a, span, strong, u, em行内块状元素：
既能在一行中并排排列，也能设置宽高常用元素：
img, input, textarea
positon定位
positon常用的属性有：
absolute,relative,fixed
- absolute
相对于父级元素进行定位，脱离完档流，不占原先文档处的位置,父级元素最好使用positon : relative定位。
html
<div class="div">
<div class="div1">满堂花醉三千客</div>
<div class="div2">一剑光寒十四州</div>
<div class="div3">满床清梦压星河</div>
</div>
css
.div{
width: 200px;
height: 600px;
position: relative;
border:1px solid;
}
.div1{
width: 200px;
height: 200px;
background:blue;
}
.div2{
width: 200px;
height: 200px;
background:red;
position: absolute;
left: 0px;
top: 0px;
}
.div3{
width: 200px;
height: 200px;
background:green;
}
总结：脱离文档流后，后面的元素会补上空位
- relative
相对于元素
原先所在的位置进行偏移，但仍在文档中占据位置，后面元素不能补上.但后面元素同样也可以通过脱离文档流层叠在此位置上。
html
<div class="div">
<div class="div1">满堂花醉三千客</div>
<div class="div2">一剑光寒十四州</div>
<div class="div3">满床清梦压星河</div>
</div>
css
.div{
width: 100px;
height: 300px;
position: relative;
border:1px solid;
}
.div1{
width: 100px;
height: 100px;
background:blue;
}
.div2{
width: 100px;
height: 100px;
background:red;
position: relative;
left: 0px;
bottom:100px;
}
.div3{
width: 100px;
height: 100px;
background:green;
}
总结: 半脱离文档流，元素原先位置依旧会被占据，但元素本身已经浮到了其他位置,与其他元素层叠。
- fixed
相对于浏览器（
body）定位,脱离文档流
html
<div class="div">
<div class="div1">满堂花醉三千客</div>
<div class="div2">一剑光寒十四州</div>
<div class="div3">满床清梦压星河</div>
</div>
css
.div {
width: 100px;
height: 300px;
position: relative;
border: 1px solid;
}
.div1 {
width: 100px;
height: 100px;
background: blue;
}
.div2 {
width: 100px;
height: 100px;
background: red;
position: fixed;
left: 0px;
top: 0px;
}
.div3 {
width: 100px;
height: 100px;
background: green;
}
总结：脱离文档流，原位置其他元素可以补上
float定位
半脱离文档流，使得块状元素可以排成一列（达到类似行内元素的效果），但其他元素不能补上原先元素占据的位置，除非当其他元素也是脱离或半脱离文档流可补上这个位置。
html
<div class="div">
<div class="div1">满堂花醉三千客</div>
<div class="div2">一剑光寒十四州</div>
<div class="div3">满床清梦压星河</div>
</div>
css
.div {
width: 600px;
height: 300px;
position: relative;
border: 1px solid;
}
.div1 {
width: 100px;
height: 100px;
background: blue;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.div2 {
width: 100px;
height: 100px;
background: red;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.div3 {
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 20px;
margin-top: 20px;
}
z-index属性简单介绍
7阶层叠
- z-index 用途
设置元素的堆叠顺序:该属性设置一个元素沿Z轴的定位位置，为负数离用户越远，为正数离用户越近，越大离用户越近
