css学习之高级技巧

1、精灵图

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要发送一次请求就可以了。主要针对背景图像

目的：有效减少服务器接收和发送请求的次数，提高页面的加载速度。

左走为负；上走为负

 背景图像是精灵图，然后指定位置，显示某一个图标 

在实际情况中，遇到结构和样式简单的图标，就用字体图标；

遇到结构样式复杂的小图标，就用精灵图

字体图标的下载

 字体图标的引用：把下载包里面的font添加到文件夹下；将style.css里面的代码复制到网页的<style></style>中；---

三角形的制作：

界面样式

鼠标样式       

cursor：属性值

 轮廓线     outline

给表单添加outline：0；或者outline：none样式之后，就可以去掉默认的蓝色边框

防止拖拽文本域   resize：none；

vertical-align

用于设置一个元素的垂直对齐方式，只针对于行内元素或行内块元素（如图片、表单等）。

 溢出文字的省略号显示

单行文本溢出显示省略号--必须满足三个条件

 多行文本溢出显示省略号

 常用布局技巧：

1、margin负值运用

为了使得两个盒子中间的border还是保持1px：

margin-left：-1px   让盒子向左侧移动1px，压住旁边盒子的右边的border

 2、文字围绕浮动元素

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

左边的图像浮动，文字直接用标准流

3、行内块巧妙运用

text-align：center 水平居中

行高设置与盒子高度相同可垂直居中

4、css三角强化

上右下左