前端笔记CSS（五）

精灵图
精灵技术的目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
使用精灵图核心：
1、精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中；
2、这个大图片也称为sprites 精灵图 或者 雪碧图；
3、移动背景图位置，此时可以使用 background-position；
4、移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同；
5、因为一般情况下都是往上往左移动，所以数值是负值。

字体图标 （iconfont）展示的是图标，本质属于字体
优点：

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少服务器请求；

• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；

• 兼容性：几乎支持所有的浏览器，请放心使用。
  注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化
  
  
  
  CSS用户界面样式：
  所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

• 更改用户的鼠标样式 （cursor）；
  

• 表单轮廓；
  给表单添加 outline ：0 ；或者 outline ： none；样式之后，就可以去掉默认的蓝色边框
  语法：input {outline ： none；}

• 防止表单域拖拽
  语法：textarea {resize ：none}

vertical-align属性应用
CSS的vertical-align属性使用场景 ： 经常用于设置图片或者表单（行内块元素）和文字垂直对齐。（垂直对齐方式，只针对于行内元素或者行内块元素有效）

图片、表单都属于行内块元素，默认的vertical-align 是基线对齐
此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

溢出文字省略号显示：
1、单行文本溢出显示省略号–必须满足三个条件

2、多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于文本web
Kit浏览器或移动端 （移动端大部分是webkit内核）

常见布局技巧
1、margin负值的运用

当鼠标经过某个盒子的时候，提高当前盒子的层级即可 （如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index提高层级）

2、文字围绕浮动元素
3、行内块的巧妙运用

4、css三角强化


HTML5的新特性：主要针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等，但是都有兼容性的问题

• <header>:头部标签
• <nav> :导航标签
• <article> :内容标签
• <section> :定义文档某个区域
• <aside> :侧边栏标签
• <footer> :尾部标签

HTML5新增多媒体标签主要包含两个：
1、音频 ： <audio>
语法： <audio src = "文件地址" controls"></audio>

2、视频 ： <video>
语法：

<video src ="文件地址" controls = "controls"></video>

3、多媒体标签总结

• 音频标签和视频标签使用方式基本一致；
• 浏览器支持情况不同；
• 谷歌浏览器把音频和视频自动播放禁止了；
• 可以给视频标签添加muted属性来静音播放视频，音频不可以（可以用js）；
• 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

HTML5新增的input类型


CSS的新特性
新增选择器：
1、属性选择器

注意：类选择器、属性选择器、为类选择器，权重为10

2、结构伪类选择器：主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。

nth-child （n）选择某个父元素的一个或多个特定的子元素

• n可以是数字，关键字和公式；
• n如果是数字，就是选择第n个子元素，里面数字从1开始…
• n可以是关键字：even偶数，odd奇数；
• n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
  
  nth-child会把所有的盒子都排列序号，执行事务时候首先看 ：nth-child（1）之后回去看 前面div；
  nth-of-type 会把指定元素的盒子排列序号，执行事务时候首先看 ：div指定的元素 之后回去看 ：nth-of-type（1）第几个孩子
  总结：
• 结构伪类选择器一般用于选择父级里面的第几个孩子；、
• nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配；
• nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后在根据E找第n个孩子；
• 关于nth-child （n）我们要知道n是从0开始计算的，要记住常用的公式

3、伪元素选择器：


伪元素清除浮动：
1、额外标签法也称为隔墙法；
2、父级添加overflow属性；
3、父级添加after伪元素；
4、父级添加双伪元素


CSS3盒子模型：
CSS3中可以通过box-sizing来指定盒模型，有两个值：即可指定为content-text、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宽度）

其他新特性（了解）：
CSS3滤镜fiter：
fiter CSS属性将模糊或颜色偏移等图形效果应用于元素。
fiter：函数();
例如 ：fiter ：blur(5px); blur模糊处理，数值越大越模糊。

CSS3 calc函数：
calc（）此CSS函数在生命CSS属性值时执行一些计算
语法：width ：calc(100%-80px); (+ - * /)

CSS3过渡（重点）
过渡：我们尅在不使用Flsah动画或JS的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态渐渐过渡到另一个状态
可以让我们的页面更好看，更动感十足，低版本浏览器不支持，但是不会影响页面布局
经常和 ：hover一起搭配使用
语法：transition ：要过渡的属性 花费的时间 运动的曲线 何时开始
1、属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以；
2、花费时间：单位是秒（必须写单位）比如0.5s；
3、运动曲线：默认是ease（可以省略）；
4、何时开始：单位是 秒 （必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）

谁做过渡给谁加。
如果想要写多个属性，利用逗号进行分割


网站TDK三大标签SEO优化
SEO搜索引擎优化，是一种利用搜索引擎的规则提高的网站在有关搜索引擎内自然排名的方式；
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度






2D转换
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换你可以简单理解为变形

-移动 translate
-旋转 rotate
-缩放 scale

二维坐标系

1、可以做多个状态的变化 keyframe 关键帧
2、里面的百分比要是整数
3、里面的百分比就是总的时间

动画简写属性：
animation ：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态；
animation: myfirst 5s linear 2s infinite alternate ;