Web笔记（基础7）

八.CSS高级使用技巧 

1.精灵图 sprite
(1)精灵技术目的:减少服务器接收和请求次数，提高页面加载速度
(2)核心:主要针对小的背景图片
移动背景图片 background-position:xy 坐标; 水平右x轴 垂直下y轴
给盒子设置个大小 > 链接一个背景 >  调试位置
background:url(../..地址) no-repeat x y;

2.字体图标
(1)字体图标的使用
下载    网页下载好之后   把fonts文件夹放入页面根目录下（页面旁边）
引入    通过css方式引入页面<style>中        引用内容在下载文件夹style.css中 @font---{---block}
使用    下载的字体图标在 下载文件夹>demo.html中    找到对应字体图标 复制小框框放入<span>中
声明    在<style>中给图标声明字体 span{font-family:'icomoon';}
(2)字体图标的追加
上传文件时选择压缩包中selection.json文件夹        下载好新的图标替换直接替换原来解压包，font文件也要替换

3.css三角
盒子宽高为0 > border设置透明 > 单独给三角设置颜色border-left-color 
后面依靠定位移动到合适位置（子绝父相）

4.css用户界面样式 > style
(1)鼠标样式 cursor 
cursor:default;        小白箭头（默认）
cursor:pointer;        小手
cursor:move;        移动
cursor:text;        文本
cursor:not-allowed;    禁止

(2)表单轮廓线 ontline
input{outline:none/0;}        取消轮廓线(点击时蓝色边框/border:0;取消边框线)
(3)防止拖拽文本域resize > style
textatea{resize:none;}        防止拖拽文本域
<textarea> </textarea>        文本域标签尽量写一行上防止光标定过去有空格

(4)图片 表单和文本垂直对齐 vertical-align
只针对于行内元素和行内块元素 块级元素无效无这个属性
vertical-align:middle;    垂直居中对齐
vertical-align:bottom;    底线对齐
图片加边框后下面有空白缝隙:底线对齐/转换为块级元素

(5)溢出文本用省略号显示
.1.单行文本 三个步骤 
white-space:nowrap;    强制一行内显示文本 不换行
overflow:hidden;        超出部分隐藏
text-overflow:ellipsis; 文本溢出用省略号代替
.2.多行文本  
overflow:hidden;        超出部分隐藏
text-overflow:ellipsis; 文本溢出用省略号代替
兼容问题 直接复制代码
display:-webkit-box;
-webkit-line-clamp:--行数--;
-webkit-box-orient:vertical;

5.常见的布局技巧
(1)解决重合边框加粗问题    margin-left:负值（负个边框的值）;
(2)当鼠标经过时出现边框
.1.若盒子没有定位，则鼠标经过添加相对定位即可
相对定位会压住其他盒子，（相对盒子占有位置，绝对定位不占有位置盒子会跑掉）
.2.若有定位，鼠标经过时增加层级

(3)文字围绕浮动元素
给盒子中图片浮动显示，浮动不会压住盒子

(4)行内块巧妙布局
text-align: center;    会使行内元素，行内块元素水平居中
行内块元素可以设置宽高，可以在一行显示，并且中间有缝隙

(5)css三角妙用-三角强化 直角三角形
不设置下左边框，只设置上右边框，上边框调大挤开，再改为透明色

(6)css初始化