1、精灵图
1）原理
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
2）使用
使用精灵图核心：
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图中。
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position。
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的左边有所不同。
5.一般情况下往上往左移动，数值是负值。（一般情况下，都是负值）
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
<style>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png) no-repeat;
background-position: -182px 0;
}
.box2 {
width: 27px;
height: 25px;
margin: 200px;
background: url(images/sprites.png) no-repeat;
background-position: -155px -106px;
}
</style><body>
<div class="box1"></div>
<div class="box2"></div>
</body>2、字体图标
字体图标展示的是图标，但是本质上是字体，具有字体的属性。
字体图标优点：
字体图标下载
下载网站：
icomoon字库 http://icomoon.io
阿里iconfont字库 http://www.iconfont.cn/
阿里的字体图标使用方法：
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
3、CSS三角
由下面代码可知，制作一个三角可以让其他三个三角是透明的即可。
<style>
.box1 {
width: 0;
height: 0;
border-top: 10px solid skyblue;
border-right: 10px solid rgb(92, 221, 116);
border-bottom: 10px solid rgb(226, 235, 148);
border-left: 10px solid rgb(245, 155, 210);
}
</style><body>
<div class="box1"></div>
</body>
<style>
.box2 {
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-top-color: skyblue;
}
</style><body>
<div class="box2"></div>
</body>
3、用户界面样式
1）更改用户的鼠标样式
语法：li { cursor: pointer; }
2）表单轮廓线
给表单添加outline:0；或者outline：none；样式之后，就可以去掉默认的蓝色边框。
3）防止表单域拖拽
语法：textarea{ resize: none; }
4、vertical-align属性应用
1）对齐方式
vertical-align属性应用场景：用于设置图片或者表单（行内块元素）和文字垂直对齐。
但是它只针对于行内元素或者行内块元素有效。
语法（默认和基线对齐）：
vertical-align : baseline | top | middle | bottom
2）图片底侧空白缝隙问题
由于图片默认和文字是基线对齐，所以图片底侧会出现空白缝隙。
解决方法：
1.给图片添加vertical-align : top | middle | bottom
2.把图片转换为块级元素display:block;
5、溢出的文字省略号显示
1）单行文本溢出显示省略号
必须满足三步：
1.先强制一行内显示文本
nowrap不换行，默认normal自动换行
white-space: nowrap;
2.超出部分隐藏
overflow: hidden;
3.文字用省略号替代超出的部分
text-overflow: ellipsis;
2）多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内 核）。
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;6、常见布局技巧
1）margin负值的运用
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid skyblue;
margin-left: -1px;
}
ul li:hover {
border: 1px solid red;
}
</style><body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
由此，我们发现第四个盒子的右边框被压到了，此时只需要当前的盒子添加position: relative;因为相对定位会压住其他标准流的盒子。
<style>
ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid skyblue;
margin-left: -1px;
}
ul li:hover {
position: relative;
border: 1px solid red;
}
</style>注意：如果盒子都有定位，则加z-index。
2）文字围绕浮动元素
---运用浮动元素不会压住文字的技巧
<style>
* {
margin: 0;
padding: 0;
}
.box {
float: left;
width: 250px;
height: 100px;
background-color: skyblue;
margin: 0 auto;
padding: 5px
}
.photo {
float: left;
width: 180px;
height: 80px;
margin-right: 5px;
}
.photo img {
width: 100%;
}
</style><body>
<div class="box">
<div class="photo"><img src="images/jianlai.jpg" alt=""></div>
<p>岁岁平，岁岁安，岁岁平安</p>
</div>
</body>
3）行内块巧妙运用
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .now,
.box .will {
background-color: #fff;
border: none;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style><body>
<div class="box">
<a href="#" class="prev">
<<上一页</a>
<a href="#" class="now">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="will">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
4）CSS三角强化
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 0;
height: 0;
/* border-top: 20px solid transparent;
border-right: 10px solid skyblue;
border-bottom: 0px solid rgb(226, 235, 148);
border-left: 0px solid rgb(245, 155, 210); */
border-color: transparent skyblue transparent transparent;
border-style: solid;
border-width: 20px 10px 0 0;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
margin: 30px 0;
}
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
color: #fff;
font-weight: 700px;
}
.ms {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
}
.ms i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 12px 0 0;
}
.ori {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style><body>
<div class="box1"></div>
<div class="price">
<span class="ms">￥1650
<i></i>
</span>
<span class="ori">￥5650</span>
</div>
</body>
7、CSS初始化
每个网页都必须首先进行CSS初始化。