css高级技巧

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制作出来的

图形的代码：

 实现了四个三角形拼接

那么要做一个三角形：

 

要实现上面这个个效果代码如下：