1. 在一行中，如何让文字垂直居中？
<style>
.text {
height:50px;
line-height:50px;
}
</style>
2. 超出内容用省略号显示
- 多行
<style>
.text{
display:-webkit-box; //必需
width:400px;
height: 96px; //算出来的，font-size * line-height * -webkit-line-clamp
margin: 0 auto;
border:1px solid red;
font-size:16px;
line-height:1.5; //这里不能用像素
-webkit-line-clamp: 4; //设定展示的行数
-webkit-box-orient:vertical; //设置方向
overflow:hidden; //必需
text-overflow:ellipsis; //必需
}
</style>
- 单行
.text {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
3. 如何消除inline-block之间的间隙(两种方法)
- 父级元素font-size:0; 子级元素font-size:16px;
.parent{
font-size:0;
}
span{
display:inline-block;
font-size:16px;
border:1px solid blue;
}
- 第二种办法：把两个inline-block标签写到一行，不要折行
<span>小明</span><span>小华</span>
4. 背景模糊的实现方法
思路：给相应的div再添加一个div，绝对定位，宽高100%，z-index:-1; 添加背影图片后用filter:blur做出模糊效果，对于模糊超出的部分用overflow:hidden；来隐藏
<style>
.parent{
position:relative;
width:256px;
height:256px;
overflow:hidden;
background-color:rgba(0,0,0,0.25); //黑色遮罩
}
.child{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
filter:blur(10px); //滤镜效果
z-index:-1; //这一步很重要
}
.child > img{
width:100%;
height:100%;
}
</style>
<body>
<div class="parent">
<div class="child">
 //这里要用img标签，不要用background-image，因为放在vue不好用bind绑定
</div>
</div>
</body>
5.如何让一行文字和边上的小图片居中对齐？
思路：这个很乱，要看具体情况，一般来说，一行字和个小图标的话，使用vertical-align:top; line-height再设置成与图片高度一样即可;如果图片过大,可以将文字也设置成vertical-align:top;line-height:1;然后再算一下用margin-top来实现垂直居中。图片过小也可以这样弄。
这个方法挺重要，要牢记！
网友评论