CSS3和精灵图与字体图标

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

目录

一、CSS3

二、精灵图与字体图标

三、面试题

---

一、CSS3

一、css3新增选择器

1. 属性选择器
   
2. 结构伪类选择器：
   主要根据文档结构来选择器元素，常用于根据父级选择器里的子元素；
   一般用于选择父级里的第几个孩子
   
   nth-child(n)：n可以是数字，关键字和公式；
   even:选择偶数
   odd:选择奇数
   一些计算：
   
   
   会把所有的盒子都排列序号
   执行的时候首先看：nth-child（1），之后回去看前面的选择

nth-of-type 会把指定元素的盒子排序，
执行的时候首先看 ：前面的选择器 之后回去看nth-child（1）

3. 伪元素选择器：可以利用CSS创建新标签元素，而不需要HTML标签，简化HTML结构
   ::before ：在元素前面插入内容
   ::after ：在元素后面插入内容
   
   用伪元素清除浮动：
   父级添加after伪元素：

父级添加双伪元素：

清除浮动还有额外标签法和给父级添加overflow等

• CSS3盒子模型：box-sizing
  box-sizing：content-box ：以前默认方式，大小为width+padding+border
  box-sizing:border-box ：盒子大小为width，这个可以加到*{}里，padding和border不会撑大盒子了，前提是他俩不会超过width宽度

• 其他特性（了解）
  图片模糊：filter:函数() ；如filter:blur(100px);数值越大越模糊，可以添加鼠标经过模糊/不模糊效果等；
  计算盒子宽度width：calc函数
  在声明css属性值时执行一些计算
  例：width:calc(100% - 20px); ；可用加减乘除计算
  场景：让子盒子永远是父盒子的多少，，随父盒子变

• CSS3过度：transition：要过度的属性 花费的时间 运动曲线 何时开始
  谁做过度给谁加,如果想写多个属性，利用逗号分隔
  
  二、CSS进阶

• 用户界面样式：li { cursor:pointer }
  设置或检索在 对象上移动的鼠标指针采用何种系统预定义的光标形状，只对块级元素有效
  
  表单轮廓：给表单添加outline:0或者none,会去掉边框
  防止表单拖拽：textarea{ resize:none }

• vertical-align：图片、表单、和文字对齐，默认是基线对齐
  vertical-align：baseline 、top、middle、bottom分别为 基线对齐、 顶线、中线、底线
  属性应用：解决图片底部默认空白缝隙，或者把图片转换为块级元素

• 溢出文字省略号显示
  单行文本溢出
  
  多行文本溢出

• 常见布局技巧
  1.margin负值的运用
  细线边框
  
  2.文字围绕浮动元素：浮动不会压住文字
  3.行内块的巧妙运用
  4.CSS三角强化，直角三角
  
• CSS初始化：不同浏览器对有些标签的默认值不同，为了消除不同浏览器对HTML文本呈现的差异，照顾兼容性

三、2D、3D转换和3D动画
转换和动画在前面也有写，应用型较强，详情戳——>什么？CSC也能做动画，这里再系统的介绍下相关属性

• 2D转换（transform）：实现元素的位移、旋转、缩放等效果
  一、旋转：语法：transform：rotate（度数deg）,角度为正时，顺时针，负时为逆时针，默认旋转的中心点是元素的中心点；
  转换中心点：transform-origin： x y ;
  注意参数x和y空格分开
  x和y转换的中心点是元素的中心点（50% 50%）
  还可以给x和y设置像素或方位名词
  二、移动：transform：translate；，可以用%，但以自身数值为参考，改变元素在页面中的位置，类似定位

三、缩放：语法：transform:scale(x,y)
综合写法

• 3D转换
  一、3D 移动 transform： translate3d（x, y，z）
  xyz表示距离px，不能省略，没有就写0；可单独写一个方向，
  透视 perspective，产生3D效果，透视是写在父盒子里的
  d：视距，人的眼睛到屏幕的距离
  z：z轴，物体距离屏幕的距离，值越大，看到的越大
  二、3D旋转 transform：rotate3d(x，y，z，deg)
  可单独写 transform：rotatex(45deg)，搭配透视用
  三、3D呈现 transform-style
  控制子元素是否开启三维立体环境，写给父级
  preserve-3d 开启立体空间
• 3D 动画，先定义，再使用

@keyframes 动画名称 {
          0% {
                        width:100px;
                  }
                 100% {
                              width:200px;
                             }
          }

使用动画：可添加 多个动画，用逗号间隔
animation-name:动画名称；
animation-duration:持续时间；

曲线速度之steps步长，分几步完成:steps（5）

简写属性:
浮动子元素水平居中:

父元素添加   
width：fit-content；
margin：0 auto；
两个都必须有

---

二、精灵图与字体图标

精灵图：

• 为了减少服务器接收和发送请求的次数，提高页面加载速度
• 精灵技术主要针对于背景图片使用，把多个小背景整合到；一张大图中
• 主要借助背景位置实现，background-position：数值

字体图标：
优点：轻量级、灵活性、兼容性、适用于简单小图标

使用：
先下载：http://icomoon.io、http://www.iconfont.cn/

引入:把fonts文件夹放入页面根目录下

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?wufx1a');
  src:  url('fonts/icomoon.eot?wufx1a#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?wufx1a') format('truetype'),
    url('fonts/icomoon.woff?wufx1a') format('woff'),
    url('fonts/icomoon.svg?wufx1a#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

---

三、面试题

一、闭包的缺点
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则
会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用
的局部变量全部删除。
2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象
（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属
性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
二、JS 有哪些数据类型？
根据 JavaScript 中的变量类型传递方式，分为基本数据类型和引用数据类型两大类七种。
基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增)六种。
引用数据类型只有Object一种，主要包括对象、数组和函数。
判断数据类型采用typeof操作符，有两种语法：
typeof 123;//语法一

const FG = 123;
typeof FG;//语法二

typeof(null) //返回 object;
null == undefined //返回true，因为undefined派生自null;
null === undefined //返回false。

---

本期到这里就结束了，感谢阅读！有问题留言，及时回复

---

• 下期：移动布局之rem适配布局
• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可