1.图片文件还是比较大

2.图片本身放大和缩小会失真

3.一旦图片制作完毕要更换非常复杂

此时有一种技术出现，就是字体图标iconfont，他展示的是图标，本质是字体

注意：字体图标不能替代精灵技术，只是对工作图标部分的提升和优化

字体图标的追加：把压缩包里的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件即可

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框

防止拖拽文本域resize

实际开发中，我们的文本域右下角是不可以拖拽的

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

默认，元素放置在父元素的基线上
把元素的顶端和行中最高元素的顶端对齐
把此元素放置在父元素的中部
把元素的顶端与行中最低的元素的顶端对齐

图片底端空白缝隙解决方案

单行文字溢出省略号显示

1.先强制一行显示文本

3.文字用省略号代替超出的部分

多行文字溢出省略号显示

限制在一个块元素显示的文本行数

设置或检索伸缩盒对象的子元素排列方式

1.让每个盒子的margin往左侧移动-1px，正好压住相邻盒子边框

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

文字围绕浮动元素巧妙运用

浮动的元素不会压住文字的特性

行内块元素中间自动有一段距离

不同浏览器对有些标签的默认值是不同，为了消除不同浏览器对html文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

选择具有att属性的E元素
选择具有att属性且属性值等于val的E元素
匹配具有att属性且值以val开头的E元素
匹配具有att属性且值以val结尾的E元素
匹配具有att属性且值中含有val的E元素

类选择器，属性选择器，伪类选择器，权重为10

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

匹配父元素中的第一个子元素E
匹配父元素中的最后一个E元素
匹配父元素中的第n个子元素E

前三个是先看次序，在看选择名

后三个是先看选择名排序，后在用次序

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

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个子元素，里面数字从1开始
• n可以是关键字，even偶数，odd奇数
• n可以是公式，常见公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化html结构

在元素内部的前面插入内容
在元素内部的后面插入内容

• before和after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定content-box,border-box,这样我们计算盒子的大小的方式就发生了改变

filterCSS属性将模糊或颜色偏移等图片效果应用于元素。

calc（）此css函数让你在声明css属性值时执行一些计算

括号里面可以使用±*/来进行计算，运算符的左右都要留空格

语法：transition:要过渡的属性 花费的时间 运动的曲线 何时开始

1.属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果所有属性都要变化过渡，写一个all就可以

2.花费时间：单位是秒（必须写单位）比如 0.5s

3.运动曲线：默认是ease（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

转换(transform)：是CSS3中具有颠覆性的特征之一，可以实现元素位移，旋转，缩放等效果

transtale:可以改变元素在网页中的位置，类似定位

• 定义2D转换中的移动，沿着X和Y轴移动
• translate最大的优点：不会影响到其他元素的位置

2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转。

• 度数为正时，顺时针，负时，逆时针
• 默认旋转中心是元素的中心点

• 注意后面的参数x和y用空格隔开
• xy默认转换的中心点是元素的中心点（50%，50%）

scale:只要给元素加上这个属性就能控制他的大小

• 注意其中的x和y用逗号隔开
• transform:scale(2）：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）
• scale缩放最大的优势：可以设置转换中心点的缩放，默认以中心点缩放的，而且不影响其他盒子

2.其顺序会影响转换效果（先旋转会改变坐标轴方向）

3.当我们同时有位移和其他属性时，记得要将位移放到最前

动画相对过渡可以实现更多的变化，更多控制，连续播放等效果

1.用keyframes定义动画（类似定义选择器）

• 0%是动画的开始，100%是动画的完成。这样的规则是动画序列
• 在@keyframes中规定某项CSS样式，我就创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
• 请用百分比来规定改变发生的时间，或用关键此次‘from’和‘to’，等同于0%和100%

规定动画完成一个周期所花费的时间，默认是0
规定动画的速度曲线，默认是“ease”
规定动画何时开始，默认是0
规定动画被播放次数，默认是1.还有infinite
规定动画在下一周期逆向播放，默认是“normal”，alternale逆播放
规定动画是否在正在运行或暂停，默认是“running”，还有“pause”

默认，动画开始以低速，然后加快，最后结束前速度变慢
指定了时间函数中的间隔数量（步长）

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否逆方向 动画起始或者结束的状态

3D移动在2D移动的基础上多加一个可以移动的方向，就是z轴方向

在2D平面产生近大远小视觉立体，但是只是二维的

• 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
• 模拟人类视觉位置，可认为安排一只眼睛去看
• 透视我们也称为视距，视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小

透视写在被观察元素的父盒子上面

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

• 控制子元素是否开启三维立体环境
• 代码交给父级，但是影响的是子盒子

• -ms-：代表ie浏览器私有属性

格式：网页名字-网页简单介绍30字以内

content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />

1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要

2.h1里面再放一个连接，可以是返回首页的，把logo的背景图片给链接即可

3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来

• 方法2：直接给font-size：0；就看不到文字了，京东做法

4.最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了