1.元素的显示与隐藏
效果就是：
广告点叉叉能消失
鼠标移到客户服务会出现多余内容
1.1显示
虽然隐藏且位置不保留了了但是在我们的页面里面还是存在的
1.2visibility可见性
visibility：hidden用于隐藏元素，并且隐藏以后还沾有原来位置
1.3overflow溢出
overflow：visible就是默认值
如果盒子中的文字写得多就会溢出：（overflow：visible）
加上hidden就会使超出部分的文字隐藏
overflow：scroll效果：（但是这个太丑了一般不用）
1.4总结
2.css用户界面样式
2.1鼠标样式cursor
在不同内容区域我们鼠标的样式可以做成不同的·：
小手就是让用户知道点一下是有效果的
2.2轮廓线
一般我们不需要表单点击后出现轮廓线，不好看
2.3防止拖拽文本域
当我们写了一个文本域点击以后就会出现轮廓线，所以我们先去除轮廓线
我们文本域有一个缺点就是可以随意拖拽，大小也是随便变化，就会影响我们后面的元素，
所以我们防止拖拽：
3.vertical-align垂直对齐
3.1图片、表单和文字对齐？？？
3.2去除图片底侧空白缝隙
图片底部和盒子间有一定的距离
这是因为图片和文字默认是基线对齐，虽然此处没有文字但是仍然留有空袭
所以要想没有缝隙，加一个对齐方式只要不是基线对齐就行
解决方法汇总：
第二种解决方法是因为对于块级元素vertical-align是无效的，就不会有基线对齐的问题了
4.溢出的文字省略号显示
要实现这种效果三部曲：
强制在一行显示才有可能用.....
4.1white-space
4.2text-overflow文字溢出
5.css精灵技术（sprite）
5.1技术详解
这就是一张精灵图：
要想从这张图片上获取某一个图标到特定位置：
先量取某一图标正好所需要的盒子大小，然后对于背景操作
5.2总结
5.3制作精灵图
现在所有背景图片是分开的，我们先目测最大的图上右键查看图片属性，就可以看到图片的长和宽，在ps中ctrl+n新建一个文档，创建一个盒子包含这些所有的小背景，盒子要求：
创建好盒子后会出现：
然后把小背景图片都拿进来，文件-打开-打开所有背景图，把背景图拖到我们的盒子中
拖动到盒子里面后摆放好位置，再把背景隐藏：
变成：（第一个卡在左上角）
最后：文件-存储为-png格式（透明背景）
只有我们页面中小图标小背景图片多了，我们才需要做精灵图
6.滑动门
本来我们手中的背景图片大小是固定的，我哦们通过滑动门来实现自动改变大小
行内块元素是根据元素中的文字多少撑开的，没有文字行内块元素就不显示
例子：
注意选择器，是a里面的span
没有padding文字就会正好在圆角边框上
7.拓展
7.1margin负值之美
对于网页中的坐标，往右边、下边是正值
如果我们两个盒子相邻，两盒子边框重叠，就会出现：
我们为了让边框不加粗，我们可以通过让两个边框完全重叠，
但是给每个都加了margin最后盒子相对位置都不变，不是还是粗的？
我们浮动的盒子的特点是紧密相连，最左边的盒子向左移动出现空隙，由于浮动第二个盒子先贴上去再margin移动
left实现行上重叠，top是实现列上
我们还想实现当鼠标放在盒子上盒子边框变色：
但是我们后面的盒子边框压住前面会导致有的边框不变色 ：
我们可以让鼠标经过 的盒子上升到最高层，定位的盒子是最高的
最终：
我们要实现这种效果：
就要给橘色的部分加上绝对定位，那么我们的div就要加相对定位，div加上相对定位了，div也就到了上层，我们鼠标经过的时候橘色边框仍然会有部分不显示，这时我们就要用到index
7.2css三角形之美
这个小三角是通过我们css制作出来的
图形的代码：
实现了四个三角形拼接
那么要做一个三角形：
要实现上面这个个效果代码如下：
