06 css高级技巧
1. css用户界面样式
所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。
鼠标样式(cursor)
鼠标样式使用cursor属性设置，设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
常用属性值：
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
- 我是小白
- 我是小手
- 我是移动
- 我是文本
轮廓样式(outline)
轮廓是绘制于元素周围的一条线，位于边框边缘border的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
平常基本不设置轮廓线，一般都是去掉轮廓线的，写法为：outline: 0;或者outline: none;
示例如下：
文本域拖拽(resize)
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
之前学习表单时，文本域默认在右下角是可以进行拖拽更改大小的。实际工作中，我们一般会禁止文本域拖拽，避免影响页面布局。
设置文本域不能拖如下：
垂直对齐(vertical-align)
之前我们讲过水平居中对齐，如文字水平居中：text-align: center; 盒子内文字垂直居中：line-height等于盒子height即可。
有宽度盒子水平居中：设置margin左右为auto即可。
绝对定位盒子水平垂直居中：先走父元素尺寸的一半，再走外边距为自己尺寸的一半（负值）即可（margin对绝对定位盒子无效）。
垂直居中设置或检索对象内容的垂直对其方式，语法格式如下：
vertical-align : baseline |top |middle |bottom
vertical-align 不影响块级元素中的内容对齐（对块级元素无效）。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.first {
width: 400px;
height: 50px;
border: 1px solid red;
margin: 100px auto;
/*垂直对齐对块级元素无效*/
vertical-align: center;
}
.second {
width: 400px;
height: 50px;
border: 1px solid red;
margin: 100px auto;
line-height: 50px;
}
style>
head>
<body>
<div class="first">垂直对齐对块级元素内容无效div>
<div class="second">块级元素内容垂直居中可使用line-height=heightdiv>
body>
html>
vertical-align只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。
注意：默认情况下，图片和文字是相对于文字的基线对齐，可使用vertical-align修改对齐方式。
去除图片底部空白间隙
图片或者表单等行内块元素，其底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决方法：
- 图片vertical-align属性设置为middle | top等，让图片不要和基线对齐。
- 给图片添加 display：block; 转换为块级元素就不会存在问题。
2. 溢出文字隐藏
word-break
word-break用来控制文本内容如何换行，主要处理英文单词。
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行。
- keep-all 只能在半角空格或连字符处换行。
white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容（可以处理中文）。
- normal : 默认处理方式
- nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。
text-overflow : clip | ellipsis
- clip : 不显示省略标记（…），而是简单的裁切
- ellipsis : 当对象内文本溢出时显示省略标记（…）
注意:一定要首先强制一行内显示，再次和overflow属性 搭配使用
selector {
white-space: nowrap; /* 强制一行内显示 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 溢出使用省略号标记 */
}
3. css精灵技术
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度，提高服务器的压力。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。**通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图）。
精灵技术使用
一般来说，美工会将多张小的背景图放在一张图片上，我们要做的是准确地定位需求图片在大精灵图上的位置，将其取出来作为背景使用。
其使用的是css中的背景属性：背景图片（大精灵图）、背景平铺、背景位置（定位需求背景小图片）。其定位背景图片使用的是x,y轴坐标偏移量，相对点为大精灵图左上角（以将大精灵图移动到需求位置坐标为准，一般为负值）。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.mobile {
/*根据目标图的大小及在大精灵图的坐标位置进行确定*/
width: 15px;
height: 20px;
background: url(images/jd.png) 0 -100px no-repeat;
}
.fast {
width: 220px;
height: 54px;
background: url(images/jd.png) 0 -130px no-repeat;
}
style>
head>
<body>
<div class="mobile">
div>
<div class="fast">div>
body>
html>
制作精灵图
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。大部分情况下，精灵图都是网页美工做。
注意：
- 我们精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
- 我们精灵图的宽度取决于最宽的那个背景。
- 我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
- 在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
4. 字体图标
图片是有诸多优点的，但是缺点很明显，图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 字体图标（iconfont)虽然看着像是图片，但本质上是文字，因此不会失真。
字体图标优点
- 可以做出跟图片一样可以做的事情,改变透明度、旋转度。
- 本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等。
- 本身体积更小，但携带的信息并没有削减。
- 几乎支持所有的浏览器，移动端设备必备良药。
字体图标网站
- icomoon字库
- 阿里icon font字库
- fontello
- Font-Awesome
字体图表使用
一般情况下，我们将UI的svg格式图片上传到上面的网站转换为字体图标格式，下载下来（或者直接去上面网站找需要的字体图标文件下载下来）。
当下载下来之后，解压文件后，会有下面内容：
我们直接将fonts目录复制到项目目录即可，然后按照下面步骤操作：
- css样式声明字体
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
- 目标元素使用字体
span {
font-family: "icomoon";
}
- 盒子内部添加结构（将解压后目录中的demo.html在网页中打开，复制前面的代码或者后面的图形均可）
span::before {
content: "\e900";
}
或者
追加字体图标
把压缩包里面的selection.json重新上传，然后选中自己想要增加的新图标，重新下载压缩包，替换原来的字体文件即可。
5. 滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。滑动门使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
技术实现
核心技术就是利用CSS精灵（主要是背景位置定位左右两边背景和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<li>
<a href="#">
<span>导航栏内容span>
a>
li>
示例如下：
.nav li {
float: left;
margin: 0 10px;
padding-top: 21px;
}
.nav li a {
display: block;
line-height: 33px;
font-size: 16px;
color: #fff;
background: url(images/to.png) no-repeat left;
padding-left: 15px;
text-decoration: none;
}
.nav li a span {
display: block;
line-height: 33px;
background: url(images/to.png) no-repeat right;
padding-right: 15px;
}
总结：
- a标签使用背景属性设置背景左侧，padding撑开合适宽度。
- span标签设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
- a包含span就是因为整个导航都是可以点击的。
6. before和after伪元素详解
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
注意:
- 伪元素:before和:after添加的内容默认是inline元素
- 这两个伪元素的
content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。