CSS高级技巧导读

能够使用精灵图 能够使用字体图标 能够写出CSS三角 能够写出常见的CSS用户界面样式 能够说出常见的布局技巧

精灵图 字体图标 CSS三角 CSS用户界面样式 vertical-align属性应用 溢出的文字省略号显示 常见布局技巧   为什么需要精灵图   我们写的网站要放到远程服务器里面，只要能上网输入网址就能看到网页 网页的图片需要浏览器向服务器发送请求，每次请求太频繁 为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。   使用精灵图核心：     1、精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。 插入类、产品类图片不需要精灵技术，因为需要经常更换。 2、这个大图片也成为sprites 精灵图 或者 雪碧图 3、移动背景图片位置，此时可以使用  background-position 4、一般情况下精灵图都是负值     字体图标可以为前端提供一种方便高效的图标使用方式，展示的是图标，本质属于字体 字体图标是一些网页常见的小图标，直接网上下载即可 1、字体图标的下载 2、字体图标的引入 3、字体图标的追加 推荐下载网站 ： icomoon.io   www.iconfont.cn 引入：下载完毕后把下载包里的fonts文件夹放入页面根目录下 复制css代码，  html复制标签，设置标签字体样式 追加：打开网页 选择.json文件 下载， 更换.css代码 html标签，  font文件夹(这个不知道需不需要)   css三角就是边框的其中一个角   css用户界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 li {cursor: pointer;}  pointer：小手  move移动 text文本 not-allowed禁止   轮廓线 outline 给表单添加outline: 0; 或者 outline:none; 样式之后，就可以去掉默认的蓝色边框。 input{outline: none;}     textarea{resize: none;}防止拖拽文本域   vertical-align属性应用：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。 用于设置元素的垂直对齐方式，但是只针对行内元素或者行内块元素，块级元素无效 vertical-align: baseline | top | middle | bottom   解决图片底部默认空白缝隙问题   bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐 解决方案有两种： 1.给图片添加 vertical-align：middle | top | bottom等 (提倡使用) 2.把图片转换为块级元素  display: block;   单行文本溢出显示省略号，必须满足三个条件 1、强制一行内显示文本  white-space: nowrap;（默认normal自动换行） 2、超出的部分隐藏   overflow: hidden; 3、文字用省略号替代超出的部分   text-overflow: ellipsis；   多行文本溢出显示省略号 多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核） overflow：hidden； text-overflow: ellipsis; //文字超出用省略号代替。 下面代码有兼容性问题 display: -webkit-box;  /*弹性伸缩盒子模型显示*/ -webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/ -webkit-box-orient: vertical;   /*设置或检索伸缩盒对象的子元素的排列方式*/   巧妙利用技术更快更好的布局： 1、margin负值的运用  2、文字围绕浮动元素 3、行内块的巧妙运用  4、css三角强化 1、让每个盒子margin-left: -1px;正好压住相邻盒子边框   z-index： 1；让position: relative;的 li 显示前一级   2、布局技巧-文字围绕浮动元素巧妙运用 ：  图片加浮动 文字自动围绕图片   3、行内块巧妙运用 父盒子添加 text-align: center; 行内块元素会整体水平居中对齐  用a链接 displa：inline-block；去做     CSS三角巧妙运用 border-color|style|width   border-width: 23px 10px 0 0; 直角三角形