<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
精灵技术
CSS精灵的英文叫法CSS sprites(又称为雪碧图),通常被解释为“CSS图像拼合”或“CSS贴图定位”,
其实就是把网页中的一些背景图片整合到一张图片文件中,再利用CSS“background-imge”,"background-repeat"
"background-position"的组合进行背景定位,"background-position"精确定位出背景图片的位置
实现步骤:
①限定容器大小
②图片拼合
③背景定位
优点:、
①减少网页http的请求,从而大大提高页面的性能,
②解决图片上命名的困扰
③更换风格方便
缺点:
①必须要限定容器的大小
②需要计算位置
使用场景:
适用于一般小图片(包括小图标,小背景),不适合大背景和大布局的图片.
-->
<!--
单行文本溢出显示:
overflow:hidden;(溢出隐藏)
white-space:norap;(强制不换行)
text-overflow:ellipsis;(溢出显示省略号)
-->
<!--
多行文本溢出显示:
p{
width:
height:
border:
text-align:justify;(两端对齐)
position:relative;
overflow:hidden;
line-height:
}
p:after{
content:"..."
position:absolute;
background-color:
width:1em;
bottom:0
right:0
}
-->
<!--
弹性盒
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
overflow:hidden;
-->
</body>
</html>