- 段落文字缩进2个汉字:
div{
text-indent: 2em;
}
- 单行文字垂直水平都居中:
div{
border: 1px solid black;
text-align: center;
height: 20px;
line-height: 20px;/*这个数值要和height值一样*/
}
- 中划线效果(不用del标签):
div{
text-align: left;
line-height: 20px;
text-decoration: line-through;
}
- 下划线:
div{
text-align: left;
line-height: 20px;
text-decoration: underline;
}
- 单行文本超出容器宽度点点点显示:
p{
width: 300px;
height: 20px;
line-height: 20px;
border: 1px solid black;
/*已下是点点点显示三件套*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
- 在div中添加背景图片
div{
width: 500px;
height: 500px;
border: 1px solid red;
background-image: url(wh.jpg);
background-size: 100px 50px;
background-repeat: no-repeat;
background-position: left center;
}
- 浏览器才有默认加载策略,浏览器还能使用(在网速不好的时候不加载css和js情况):
方法一:文字移出图片外隐藏显示。
a{
text-decoration: none;
display: inline-block;
color: #424242;
width: 190px;
height: 140px;
border: 1px solid black;
background-image: url(https://gw.alicdn.com/tfs/TB1dYlEs9zqK1RjSZPxXXc4tVXa-190-140.gif);
background-size: 190px 140px;
/*将文字移出图片*/
text-indent: 190px;
white-space: nowrap;
overflow: hidden;
}
方法二:容器height高度变为0,增加padding尺寸来填充背景图片,不能显示文字的特性达到效果。
a{
text-decoration: none;
display: inline-block;
color: #424242;
width: 190px;
height: 0;
padding-top: 140px;
overflow: hidden;
border: 1px solid black;
background-image: url(https://gw.alicdn.com/tfs/TB1dYlEs9zqK1RjSZPxXXc4tVXa-190-140.gif);
background-size: 190px 140px;
}