css常用到的设置总结

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;
	}