css常用到的设置总结
1.每段文本自动缩进两个字符
text-indent:2em;
2.元素超出盒子宽度自动变成省略号
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
3.ES6数组去重
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
4.es6中的模板字符串拼接
结果:
5.数组里面有多个对象,对象中有多个属性,在这些属性中选取其中的id和name重新组成一个新的数组对象。
得到数组对象res循环取出该结果中每一个对象的id和name,然后将id和name拼接在一起再传给接收的数组,该数组要先置为空,不然数据会堆积。
如:
6.map函数的应用
从后台返回来的res中的数据格式:长沙,武汉,广州
要实现将“长沙”“武汉”“广州”分别取出来放入一个数组中保存
取出返回数据中的每一项,用逗号分开再返回给this.getActivityList变量中保存
7. 设置div中的图片居中,
vertical-align: middle;但要注意这个值是基于基线对齐的,父元素要设置line-height: 300px;属性才能达到效果
.father{
background-color: orange;
width: 100%;
height: 300px;
line-height: 300px;
}
.father image{
width: 40px;
height: 40px;
vertical-align: middle;
}
运行结果:
注意:如果有一方不设置会出现偏差,达不到自己想要的结果
如:父元素只设置line-height,图片不设置vertical-align
再如:
8.让div中的图片居中
(1)设置图片上下左右居中:
用定位来实现,父元素为相对定位,里面的图片用绝对定位,然后上下左右设置为0.再给margin:auto;即可实现,
如:
<template>
<view>
<view class="father">
<image src="../../static/wenjianimg.png" mode=""></image>
</view>
</view>
</template>
<script>
</script>
<style scoped>
.father{
background-color: orange;
width: 100%;
height: 300px;
position: relative;
}
.father image{
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
结果截图:
(2)设置图片左右居中:
①设置图片:margin: 0 auto;display: block;
.father{
background-color: orange;
width: 100%;
height: 300px;
}
.father image{
width: 40px;
height: 40px;
margin: 0 auto;
display: block;
}
② 设置父级div:text-align: center;
.father{
background-color: orange;
width: 100%;
height: 300px;
text-align: center;
}
.father image{
width: 40px;
height: 40px;
}