共计 6720 个字符，预计需要花费 17 分钟才能阅读完成。
精灵图
为什么要使用精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度, 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术 (也称 CSS Sprites、CSs 雪碧)。
核心原理: 将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
精灵技术目的: 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
精灵图 (sprites) 的使用
使用精灵图核心:
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为 sprites 精灵图 或者 雪碧图
- 移动背景图片位置，此时可以使用 background-position
- 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
字体图标
字体图标的产生
字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
1. 图片文件还是比较大的。
2. 图片本身放大和缩小会失真。
3. 一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
轻量级: 一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性: 本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性: 几乎支持所有的浏览器，请放心使用.
注意: 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
精灵图与字体图标的使用总结
如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
字体图标的使用
字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为
1. 字体图标的下载
2. 字体图标的引入(引入到我们 htm 页面中)
3. 字体图标的追加(以后添加新的小图标
2.3 字体图标的下载
推荐下载网站:
- icomoon 字库 http://icomoon.io
- 阿里 iconfont 字库 http://www.iconfont.cn/
字体图标的引用
下载完毕之后，注意原先的文件不要删，后面会用。
- 把下载包里面的 fonts 文件夹放入页面根目录下
- 在 CSS 样式中全局声明字体: 简单理解把这些字体文件通过 css 引入到我们页面中定注意字体文件路径的问题。
这段文字在文件里有。
@font-face{
font-family:"icomoon';
url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix')format('embedded-opentype')
src: url("fonts/icomoon.ttf?7kkyc2')format('truetype'),
url("fonts/icomoon.woff?7kkyc2')format('woff')
url("fonts/icomoon.svg?7kkyc2#icomoon')format('svg');
font-weight:normal;
font-style:normal;
}
- html 标签内添加小图标。
span {
font-family:"icomoon';
font-size: 100px;
}
字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selectionjson 重新上传，然后选中自己想要新的图标, 重新下载压缩包，并替换原来的文件即可。
HTML5 新增属性
HTML5 新增的 input 类型
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为 Email 类型 |
| type=“url” | 限制用户输入必须是 URL 类型 |
| type=“data” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
重点记住：number tel search 这三个
HTML5 新增的表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=“on”, 关闭 autocomplete=”off” 需要放在表单内，同时加上 name 属性，同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
HTML5 新增的语义化标签
: 头部标签
注意:
这种语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次。在 IE9 中，需要把这些元素转换为块级元素。其实，我们移动端更喜欢使用这些标签 HTML5 还增加了很多其他标签
video 视频标签
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加 muted 来解决自动播放问题) |
| controls | controls | 向用户显示播放控件 |
| width | px | 设置播放器宽度 |
| height | px | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto(预先加载视频) none(不应加载视频) |
规定是否加载视频(如果有了 autoplay，就忽略该属性) |
| src | url | 视频 url 地址 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
属性选择器
属性选择器可以根据元素特定属性来显示元素。这样就可以不用借助于类或者 id 选择器。
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有 att 属性的 E 元素 |
| E[att=“’val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
| E[att^=“’val”] | 匹配具有 att 属性且值以 val 开头的 E 元素 |
| E[att$=“val”] | 匹配具有 att 属性且值以 val 结尾的 E 元索 |
| E[att*=“val”] | 匹配具有 att 属性且值中含有 val 的 E 元素 |
注意: 类选择器、属性选择器、伪类选择器，权重为 10。
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素 E |
| E:last-child | 匹配父元素中最后一个 E 元素 |
| E:nth-child(n) | 匹配父元素中的第 n 个子元素 E |
| E:first-of-type | 指定类型 E 的第一个 |
| E:last-of-type | 指定类型 E 的最后一个 |
| E:nth-of-type(n) | 指定类型 E 的第 n 个 |
nth-child(n)选择某个父元素的一个或多个特定的子元素
- n 可以是数字，关键字和公式
- n 如果是数字，就是选择第 n 个子元素，里面数字从 1 开始…
- n 可以是关键字:even 偶数，odd 奇数
- n 可以是公式: 常见的公式如下(如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略)
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15… |
| n+5 | 从第 5 个开始 (包含第五个) 到最后 |
| -n+5 | 前 5 个(包含第 5 个) |
区别:
- nth-child 对父元素里面所有孩子排序选择(席号是固定的) 先找到第 n 个孩子，然后看看是否和 E 匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E，然后再根据 E 找第 n 个孩子
伪元素选择器
伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而化 HTML 结构，
| 选择符 | 简介 |
|---|---|
| :: before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before 和 after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法: element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为 1
p::before {
position:absolute;
right:20px;
top: 10px;e91e";content:font-size:20px;
}
伪元素清除浮动
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
.clearfix:after {
content:";
display: blolk;
height:0;
clear: both;
visibility: hidden;
}
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
CSS 创建三角
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标张图，CSS 三角做法如下：
div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink;
}
界面样式
所谓界面样式，就是更改一些用户操作样式，以提高更好的用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
鼠标样式 cursor
li {cursor : pointer}
设置过检索在对象上移动的鼠标指针采用何种系统定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
轮廓线 outline
给表单添加 outline 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none;}
防止拖拽文本域 resize
实际应用过程中，文本域右下角是不可以拖拽的。
textarea {resize:none;}
vertical-align 属性
CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单 (行内块元素) 和文字垂直对齐官方解释: 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
vertical-align :baseline l top | middle l bottom
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的对齐 |
vertical-align 属性应用
图片、表单和文字对齐
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
默认文字与图片是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直
居中对齐了。
解决图片底部默认空白缝隙问题
bug: 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方法有两种
- 给图片添加 vertical-align:middle|top|bottom 等。(提倡使用的)
- 把图片转换为块级元素 display: block；
文本溢出显示省略号
- 单行文本溢出显示省略号
/*1. 先强制一行内显示文本 */
默认 normal 自动换行)white-space: nowrap;/*2. 超出的部分隐藏 */ 公
overflow: hidden;
/*3. 文字用省略号替代超出的部分 */
text-overflow:ellipsis;
- 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于 webKit 浏览器或移动端(移动端大部分是 webkit 内核)
overflow:hidden;
text-dverflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display:-webkit-box;
/* 限制在一个块元素显示的文本的行数 */
webkit-line-clamp:2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
webkit-box-orient:vertical;
常见布局技巧
margin 负值的运用
- 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
果有定位，则加 z -index) - 鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位(保留位置)，如果有定位，则加 z -index)
文字围绕浮动元素
巧妙运用浮动元素不会压住文字的
特性
行内块的巧妙运用
CSS 三角强化
width:0;
height:0;
border-color:transvarent red transparent transparent;solid;border-style:
border-width:22px8px00;
CSS 初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化
简单理解: CSS 初始化是指重设浏览器的样式。(也称为 CSSreset)
每个网页都必须首先进行 CSS 初始化。
这里我们以以 京东 css 初始化代码为例。
Unicode 编码字体:
把中文字体的名称用相应的 Unicode 编码来代替，这样就可以有效的避免浏览器解释 CSS 代码时候出现乱码的问题。
比如:
黑体 9ED14F53 宋体 5B8B4F53
微软雅黑 5FAE8F6F96C59ED1
CSS 盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型, 有 2 个值: 即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
- box-sizing:content-box 盒子大小为 width + padding+ border (以前默认的)
- box-sizing:border-box 盒子大小为 width
如果盒子模型我们改为了 box-sizing:border-box，那 padding 和 border 就不会撑大盒子了(前提 padding 和 border 不会超过 width 宽度)
CSS 其他特性
CSS3 滤镜 filter:
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如：filter:blur(5px);blur 模糊处理 数值越大越模糊 filter:
CSS3 calc 函数:
calc()此 CSS 函数让你在声明 CSS 属性值时执行一些计算。
width: calc(100% -80px);
括号里面可以使用 +、-、*、/ 来进行计算。
CSS3 过渡
过渡 (transition) 是 CSS3 中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画 : 是从一个状态 渐渐的过渡到另外一个状态，可以让我们页面更好看，动感十足，虽然 低版本浏览器不支持 (ie9 以下版本) 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1. 属性 : 想要变化的 css 属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个 a 就可以。
2. 花费时间 : 单位是 秒 (必须写单位) 比如 0.5s
3. 运动曲线: 默认是 ease (可以省略)
4. 何时开始 : 单位是 秒 (必须写单位) 可以设置延迟触发时间 默认是 0s(可以省略)
网站 favicon 图标
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
制作 favicon 图标
- 把品优购图标切成 png 图片。
- 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫:http://www.bitbug.net/
favicon 图标放到网站根目录下
HTML 页面引入 favicon 图标
1. 在 html 页面里面的 元素之间引入代码。
原文地址: CSS 精灵图、字体图标、HTML5 新增属性、界面样式和网站 favicon 图标
