一、CSS高级技巧
一、精灵图
1.为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
核心原理∶将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
2.精灵图的使用
1．精灵技术主要针对于小的背景图片使用。就是把多个小背景图片整合到一张大图
2．这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position .
4.移动的距离就是这个目标图片的×和y坐标。注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
二、字体图标
1.字体图标的产生iconfont
字体图标使用场景︰主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
1.图片文件还是比较大的。
2．图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
2.字体图标的优点
轻量级∶一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性︰本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性∶几乎支持所有的浏览器，请放心使用
注意︰字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。总结:
1．如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2．如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
3.字体图标加载的原理
三、CSS三角
网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。
四、CSS用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
1.鼠标样式cursor：
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
2.轮廓线outline
给表单添加outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框
3.防止拖拽文本域resize
可拖拽：
不可拖拽：
五、vertical-align属性应用
CSS的vertical-align属性使用场景∶经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释∶用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
5.1 图片、表单和文字对齐
图片、表单都属于行内块元素，默认的vertical-align是基线对齐。
此时可以给图片、表单这些行内块元素的vertical-align属性设置为 middle 就可以让文字和图片垂直居中对齐了。
5.2解决图片底部默认空白缝隙问题
bug :图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决方法有两种:
1.给图片添加vertical-align:middle | top| bottom等。（提倡使用的)
2．把图片转换为块级元素display: block;
六、溢出的文字省略号显示
1.单行文本溢出显示省略号--必须满足三个条件
2.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核)
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
七、常见布局技巧
巧妙利用一个技术更快更好的布局∶
1.margin负值的运用
1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index )
2.文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
3.行内块的巧妙运用
页码在页面中间显示:
1．把这些链接盒子转换为行内块，之后给父级指定 text-align :center;
2．利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
4.CSS三角强化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化
简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset )每个网页都必须首先进行CSS初始化。
这里我们以京东css初始化代码为例
Unicode编码字体∶
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如∶
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1
HTML5和CSS3提高 2022/4/5
一、HTML5的新特性
HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
声明︰
*新特性增加了很多，但是我们专注于开发常用的新特性。
*基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。
1.HTML5新增的语义化标签
以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。
<header> :头部标签
<nav> :导航标签
<article>∶内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer> :尾部标签
注意:
*这种语义化标准主要是针对搜索引擎的
*这些新标签页面中可以使用多次
*在IE9中，需要把这些元素转换为块级元素
*其实，我们移动端更喜欢使用这些标签
*HTML5还增加了很多其他标签，我们后面再慢慢学
2.HTML5新增的多媒体标签
HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。
新增的多媒体标签主要包含两个∶
1.音频:<audio>
当前<audio>元素支持三种音频格式:
<audio>常见属性
<body>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>
2．视频:<video>
当前<video>元素支持三种视频格式:尽量使用mp4格式
1.视频<video>--常见属性
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。
3.多媒体标签总结
*音频标签和视频标签使用方式基本—致
*浏览器支持情况不同
*谷歌浏览器把音频和视频自动播放禁止了
*我们可以给视频标签添加muted 属性来静音播放视频，音频不可以(可以通过JavaScript解决)
*视频标签是重点，我们经常设置自动播放，不使用controls 控件，循环和设置大小属性
3.HTML5新增的input类型
4.HTML5新增的表单属性
二、CSS3的新特性
1.CSS3的现状
*新增的CSS3特性有兼容性问题，ie9+才支持
*移动端支持优于PC端
*不断改进中
*应用相对广泛
*现阶段主要学习∶新增选择器和盒子模型以及其他特性
CSS3新增选择器
CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1.属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
注意:类选择器、属性选择器、伪类选择器，权重为10
2．结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
nth-child ( n )选择某个父元素的一个或多个特定的子元素（重点)
*n可以是数字，关键字和公式
*n 如果是数字，就是选择第n个子元素，里面数字从1开始...
*n可以是关键字:even偶数，odd奇数
*n可以是公式∶常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
nth-child与nth-of-type区别：
nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nth-of-type 选择指定类型的元素
3.伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意:
*before和after创建一个元素，但是属于行内元素
*新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法: 元素:：before { }
*before和after必须有content属性，没有内容则写 content: '';
*before在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
*伪元素选择器和标签选择器一样，权重为1
4.CSS3盒子模型
CSS3中可以通过box-sizing 来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况∶
1. box-sizing: content-box盒子大小为width + padding + border(以前默认的)
2. box-sizing: border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
5.CSS3其他特性
1.图片变模糊
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
2.计算盒子宽度width: calc函数
calc( ） 此CSS函数让你在声明CSS属性值时执行一些计算
6.CSS3过渡（重点）
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画∶是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。
我们现在经常和:hover一起搭配使用
transition:要过渡的属性花费时间运动曲线何时开始;
1.属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
2.花费时间:单位是秒(必须写单位）比如0.5s
3.运动曲线︰默认是ease(可以省略)
4.何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s(可以省略)
总之，谁过渡给谁用
三、广义的HTML5
1.广义的 HTML5是 HTML5本身＋CSS3 + JavaScript
2．这个集合有时称为HTML5和朋友，通常缩写为HTML5
3．虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
