CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align

15. 常见技巧

15.1 精灵图

出现原因

一个网页往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）
核心原理：将网页中的一些小背景图像整合成一个

精灵图的使用

精灵技术主要是针对于背景图片（产品类的一般经常更换所以一般不用）的使用
先设置好盒子和背景图片，然后把精灵图移动位置到盒子的位置露出来，此时可以使用background-position（动的是背景图片）
移动的距离就是这个目标图片的x和y坐标，注意与网页中的坐标有所不同（background-position是第四象限）
往上、往左走是负值

15.2 字体图标

主要用于显示网页中通用的、常用的一些小图标

精灵图的缺点

图片文件较大
图片本身放大缩小会失真
一旦脱制作完成想要更换非常复杂
字体图标iconfont 展示是图标，但本质是字体

字体图标的优点
轻量级、灵活性、兼容性
字体图标的使用(本地)
下载字体包 在http://icomoon.io 、 http://www.iconfont.cn/ 阿里巴巴字体库
引入把fonts文件夹放入页面的根目录中，引入<link rel="stylesheet" href="./fonts/iconfont.css">
使用：
给标签加类名

<!-- iconfont是必须带的类名 -->
<!-- 使用一个标签加上字体图标类名 -->
<span class="iconfont icon-xxx"></span>

unicode编码

<span class="iconfont"><span>

伪元素

.one::after {            content: "\e882";
}

参考链接

15.3 CSS画三角/扇形/圆形

三角

相当于用边框先画了一个正方形
把需要的颜色留下，其他的改成transparent透明色即可
三角的大小完全取决于border 的粗细10px -->100px

.box {width:0;height:0;border:10px solid transparent;border-bottom-color:10px solid skyblue;
}

扇形
三角的基础上加圆角

.box {width:0;height:0;border:100px solid transparent;border-radius:100px;border-bottom-color:skyblue;
}

圆形
给正方形盒子设置圆角

.box {width:100px;height:100px;background-color:red;border-radius:50%;
}

15.4 用户界面样式

界面样式，就是改变一些用户操作样式，提高用户体验

鼠标样式cursor

选择器 {/* 小白箭头 */cursor：default;/* 小手 */cursor：pointer;/* 十字架移动 */cursor：move;/* 红色禁止 */cursor：not-allowed;
}

轮廓线outline

选择器 {outline：0;/* 或 */outline：none;
}

防止拖拽文本域resize

textarea {resize: none;
}

注意：文本域尽量放一行

15.5 vertical-align文字和图片或表单（行内块元素）垂直对齐

用于设置一个元素的垂直对齐方式，但是其值针对于行内元素或者行内块元素有效
vertical-align：baseline；（默认文字和图片是基线对齐）
vertical-align：top；
vertical-align：middle；
vertical-align：bottom；
文本域和文本域外旁边的请您留言也可通过此方法middle

图片底侧空白缝隙的解决

原因
图片默认和文字基线对齐，所有留了空隙
解决方案
方法一：给图片添加vertical-align：middle、top、bottom等（提倡使用）
方法二：把图片转换为块级元素（因为块级元素没有vertical-align属性所有不存在基线对齐）

15.6 margin负值的使用

盒子浮动后，本来两个都有1px的边框，通过margin-left：-1；可以使右边的左边框压住左边的右边框使得1+1=1
注意：此时再写鼠标经过hover改变边框颜色时，盒子的右边框会被盖住
所有需要在鼠标经过某个盒子时，改成相对定位（需要占有位置，要不然后面的盒子就会把它挤啦），相对定位的盒子会压住其他标准流的盒子
如果这个盒子里还有子盒子，而子盒子也是相对定位时（子绝父相）所有只能使用z-index提高层级

15.7 文字环绕浮动元素

巧妙利用浮动元素不会压住文字
在大盒子中，不需要右边的标准流盒子添加浮动，左边的图片盒子左浮动即可

15.8 版心

添加一个类

.w {width:1200px;margin:0 auto;
}

CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align相关推荐

CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
CSS / 精灵图+字体图标
目录精灵图字体图标字体图标的使用字体图标的追加字体图标加载的原理精灵图当网页中的图像过多,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,大大降低页面的加载速度为了有效地减 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
CSS：精灵图字体图标
一.精灵图使用精灵图的原因减少故武器的访问次数,防止服务器负荷过重精灵图原理把网页制作需要用到的小图片组合成网页效果做成一张大图传至服务器,网页制作时通过background-position ...
CSS 精灵图 + 字体图标
高级技巧 1·精灵图 1.基于设计稿明确盒子大小(宽和高) 2.使用像素大厨等工具测量图片偏移坐标: 3.布局时给盒子指定:width.height 和 background 属性: width: ...
三十二、精灵图字体图标
一.精灵图 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此 ...
17-CSS3 高级技巧精灵图字体图标滑动门
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
11.【CSS精灵图background-position、字体图标@font-face{}、画小三角形、cursor、outline、resize、vertical-align、溢出省略号】
文章目录 [CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 一.精灵图 1.1 为什么需要精灵图? 1.2 精灵图(sprites)的使用 1.3 案例:拼单词二.字体图标 2. ...