css高级技巧

一、精灵图（sprites）

1、含义：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度

2、原理：

①、将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求隐藏就可以

②、借助背景位置 background-position 来实现

③、一般情况下精灵图都是负值

二、字体图标（icon font）

1、展示的是图标，本质是文字

2、轻量级：比一系列图像要小

3、灵活性：可以随意改变颜色、产生阴影、透明、旋转等

4、兼容性：几乎支持所有浏览器

注：字体图标不能代替精灵技术，只是对工作中部分图标的提升和优化

5、字体图标的引入

①、网站下载： icomoon字库 http://icomiin.io 阿里 iconfont字库 http://www.iconfont.cn/

②、将下载好的fonts文件放在页面的根目录上

③、在css样式中全局声明字体--通过css引入

④、创建一个span标签，打开下载好的页面，复制目标图标后面的小方框

⑤、在style里面，声明字体的样式

6、字体图标的追加（需要添加新的字体到原来的文件中）

把selection.json 从新上传，选中想要的新图标并下载，然后替换原来的文件即可

三、文字围绕浮动元素

让文字和父元素盒子一样宽，然后给兄弟元素盒子设置浮动，文字就会自动围绕

四、css中的三角

1、将一个宽高为零的盒子，四个边框设置大小、样式、不同颜色，盒子中就出现4个不同颜色的三角

2、想要得到一个三角，就将其余三个边框颜色设置为透明（transparent）

五、三角强化（直角三角形）

1、盒子宽高设置为0

2、border-color：transparent  red transparent transparent一个有颜色

3、设置边框样式  

 4、设置边框大小 border-width：22px 8px 0 0 ；两个边为零，另外一条边比另一条边大个两倍

六、css用户界面样式

1、鼠标样式：{cursor：属性}

default小白（默认）       pointer 小手    move 移动          text 文本            not-allowed 禁止

2、轮廓线：

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

3、文本域防拖拽：textarea { resize： none；}

注：文本域标签尽量放在一行，不然会出现空白

4、vertical-align属性：

①、经常用于设置图片跟表单（行内块元素）和文字的垂直对齐

注：只针对行内元素和行内块元素  

②、baseline 基线对齐   top 顶端与行中最高元素的顶端对齐  middle 此元素放置在父元素的中部  bottom 此元素的底端与行中最低的元素底端对齐

七、解决图片底部默认空白缝隙问题

1、给图片添加vertical-align：middle  |  top  | bottom 等（提倡）

2、把图片转换为块级元素  display：block；

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

单行文字：

1、white-space：nowrap 强制文字显示不开也必须一行内显示

 2、overflow：hidden 隐藏溢出的部分

3、text-overflow：ellipsis 溢出的时候用省略号表示

多行文字：

1、overflow：hidden 隐藏溢出

 2、text-overflow：ellipsis 溢出的时候用省略号表示

3、display：-webkit-box    以弹性伸缩盒子模型显示

 4、-webkit-line-clamp：2 限制在一个块元素显示的文本行数

5、-weblit-box-orient：vertical;设置或检索伸缩盒对象的子元素的排列方式

注：1、兼容有问题，不建议使用 2、推荐让后台人员做这个效果
常用的布局技巧

九、margin负值的应用：

解决相邻两个边框1+1=2的问题

让每个盒子margin往左侧移动-1px正好压住相邻盒子边框就出现1+1=1的效果

当盒子边框被压住时，想要显示四个边框的方法（提高当前盒子的层级）：

1、没有定位，给盒子加相对单位（保留位置，不会影响其他盒子）

2、有定位，给盒子加z-index

十、css初始化

1、指重新设置浏览器的样式（也称为css reset）

2、每个网页都必须首先进行 CSS初始化

3、不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化