css高级技巧（一）

一、精灵图和字体图标

1.1 为什么需要精灵图

以前，每当客户端需要服务器时，便向服务器请求一张图片，为了改善服务器的压力，所以将多张图片放到一张图片上，减少了服务器的请求次数。

1.2 精灵图片（sprites）的使用

注意事项：

设置一个和小图标一样大小的盒子。然后测出其坐标，设置background-position即可。

1.3 字体图标的产生

字体图标展示的是图标，实际上是字体。

1.4 图标的优点

1.5 字体图标的下载与使用

（1）下载图标

（2）在style中引入字体图标，做一个字体声明，直接复制css文件就可以@font{。。。}

并且在demo.html中复制小方框

然后在对应的盒子的css中，设置font-family：‘icnmoon’

1.6 字体图片的追加

1.7 css三角做法

（1）设置宽高为0；并且给边界框设置粗细和透明色，再设置想得到的对应的小三角形的边，即可得到对应的小三角。其中，边界框的粗细可以控制三角的大小。

案例练习：css练习——写一个小三角_xuan971130的博客-CSDN博客效果图： <.[这里是图片009]https://blog.csdn.net/xuan971130/article/details/123337950

二、用户界面样式

2.1 鼠标样式 cursor

2.2 表单的轮廓线

2.3 防止拖拽文本域

文本域本身点击右下角，可以将其拉大。

在textarea中设置resize：none即可。

textarea标签尽量放到一行上，否则输入内容时会有一个padding距离。

三、vertical-align属性

3.1 vertical-align设置图片与文本垂直对齐

设置图片和文字垂直对齐。只适用于行内元素和行内块元素。

对于块元素，首先将其设置为display：inline-block行内块元素，然后再加vertical-align属性。

3.2 vertical-align 解决图片底侧空白缝隙

因为图片与文字默认是基线对齐，所以img底测会有空白缝隙。

（1）因此将img的vertical-align设置为bottom | top | middle，即可解决这个问题。（提倡使用）

（2）把图片转换为块级元素：display：block,因为只有行内元素和行内块元素才有vertical-align这个属性。

四、溢出的文字省略号显示

4.1 单行文字溢出省略号显示

4.2 多行文字溢出省略号显示

五、常见布局技巧

5.1 margin负值的运用

（1）去除重复的粗线：多个带边框的盒子摆在一起时，由于边界贴到一起，因此中间的线会很粗，因此可以设置margin-left：-1px，似的线变细。

（2）当鼠标选中某个框时，显示一整个盒子。但是由于上述margin-left：-1px操作，使得盒子不能显示。解决办法：

鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（因为相对定位不脱标，保留原来位置，所以能够显示），如果有定位，则加z-index，提高层级。）

5.2 文字围绕浮动元素巧妙运用

巧妙运用浮动元素不会压住文字的特性

让图片浮动，文字继续显示即可。

5.3 行内块元素的巧妙应用

复习：让块元素水平居中，使用margin：0 auto；即可设置成功。

然而让行内块元素水平剧中，对其父元素设置text-align：center即可。

案例：做下一页的静态样式。

5.4 css三角巧妙运用

修改border的粗细得到不同样式的三角形

案例：做京东价格的图片展示。

5.5 css初始化

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的Gitee获取。
还有 高级java全套视频教程 java进阶架构师 视频+资料+代码+面试题！

全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。