css精灵图
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵图技术（也称css sprites、css雪碧）
核心原理：将网页中的一些背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
字体图标
下载网址：1.icomoon字库 icomoon.io
2.阿里iconfont字库 iconfont.cn/
css三角形
.box{width: 0; height: 0; line-height: 0: font-size: 0; border: 10px solid
transparent; border-top:10px solid skyblue;}
css用户界面样式
1.鼠标样式 cursor li{cursor:pointer;}
defult:小白，默认鼠标样式 、pointer：小手 、move：移动 、text：文本 、not-allowed：禁止符
2.轮廓线outline：none；
3。防止拖拽文本域resize：none；
input：text和textarea都可以设置
css的vertical-align：baseline \ top \ middle \ bottom
用在img上，只对行内元素、行内块元素有用
css溢出文字省略号显示
单行溢出文本省略号显示三个条件：
- 先强制一行内显示文本：white-space：no wrap；(默认normal自动换行）
- 超出部分隐藏overflow：hidden；
- 文字用省略号替代超出的部分：text-overflow：ellipsis；
多行文本溢出显示省略号
有较大兼容性问题，适合于webkit浏览器或移动端
overflow：hidden；text-overflow：ellipsis；
弹性盒模型显示：display：-webkit-box；
限制在一个块元素显示的文本的行数：-webkit-line-clamp：2；
设置或检索伸缩盒对象的子元素的排列方式webkit-box-orient：vertical；
css常见布局技巧
一、margin负值运用：
1.让每个盒子margin往左侧移动加px正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置)，如果都有定位，则加z-index）)
二、文字围绕浮动小妙招，加浮动可以让文字环绕图片。
html5的新特性
1.html5中新增的语义化标签
<header>；头部标签 <nav>：导航标签 <article>：内容标签 <section>:定义文档某个区域
<aside>:侧边栏标签 <footer>:尾部标签
2.html5新增的多媒体标签
视屏<video> 音频:<audio>
<video src="文件地址“ controls=”controls“(向用户显示播放控件)></video>
autoplay 视频就绪自动播放 、muted 谷歌需要 、loop 循环播放 、poster 加载等待的画面图片
<audio src=:文件地址”></audio>
input tupe=required表单内容不能为空，必填
placeholder=“文本”提示文本； autofocus 自动获得焦点
autocomplete=off/on 提交是否记录 multiple可以多选文件提交
css3新增选择器
类选择器 input[value] 选择input里面有value属性的盒子
input[class="val"]选择input里面有class=”val“的盒子
input[calss^="val"]选择input里包含calss属性，属性值为val开头的所有盒子
input[calss$="val"]选择input里面包含calss属性，属性值以val结尾的盒子
input[calss=*"val"]选择input里面包含calss属性，属性值里面有val值的盒子
伪类选择器
div:frist-child 匹配父元素中第一个子元素div
div：last-child 匹配父元素中最后一个div元素
div：nth-child(n) 匹配父元素第n个子元素div
（n可以是数字(1,2,3..)，关键字(even偶数=2n、odd奇数=2n+1)或公式(n+5从第五个开始、-n+5前五个、5n选择第5个，第10个，，，）nth-child会先把父盒子所有盒子排序，再去对应序号找盒子，看是否满足盒子要求，不满足则不执行
div：first-of-typ： 指定类型div的第一个
div：last-of-typ：指定类型div的最后一个
div：nth-of-typ（n）：类型div的第n个（和上面nth—child(n)一样，可以用数字，关键字和公式)
nth-of-typ(n)会把指定元素的盒子排列序号，然后根据排序对应盒子
伪元素选择器
：：befor 在元素内部的前面插入内容
：：after 在元素内部的后面插入内容
content：‘内容’；必须有
css盒子模型
1.box-sizing：content-box；盒子大小为width+padding+border(以前)
2.box-sizing：border-box；盒子大小为width
图片变模糊
filter：函数()；例如filter：blur(5px);blur模糊处理数值，数值越大越模糊
盒子大小执行加减
calc()此css函数让你声明css属性值时执行一些计算
width：calc（100%-80px）；始终比父盒子大小80px 由+、-、*、\来计算
css过渡
transition：要过渡的属性(宽度、背景、内外边距)、花费时间(秒数；单位：s)、运动曲线(ease)、何时开始(秒数；单位：s)——给谁变化给谁加
设置网站图标
favicon.ico
免费服务器
github 免费服务器（免费空间）http：//free.3v.do/ 上传软件：cutftp
2D转换
移动：translate 、旋转：rotate 、缩放：scale
transform：translate(x，y)；对于行内元素无效
transform：rotate（度数 deg）正值顺时针旋转，负值逆时针旋转
transform-origin：x y；变换中心点，可以是百分比、像素或者方位名词（对缩放和旋转用）
transform:scale（x，y）-x，y为数字无单位
利用scale缩放不会影响其他盒子，还可以设置缩放的中心点
transform连写顺序：1.translate 2.rotate 3.scale
动画
keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{width：100px；}
100%{width:200px;}（from和to等价于0%和100%）
}(这个动画是从100px到200px）
动画的常用属性：
- animation-name:动画名称（给谁调用给谁加）
- animation-duration：持续时间（这个动画一个循环的时间）
- animation-timing-function：速递曲线，默认是”ease“，匀速linear
- animation-delay：动画开始的时间，默认是0
- animation-itertion-count：播放次数，默认是1，infinite无限次
- animation-direction：播放完下一个周期逆播放，默认”normal“，逆播放alternate
- animation-fill-mode：动画结束状态，保持forwards，回到起始backwards
- animation-paly-state：是否运行或暂停，默认是”running“，还有”paused“（与伪元素hover连用）
- animation的name属性和duration属性必须有，否则动画不执行
animation-timing-function的一些属性：
linear：匀速 、ease-out低速结束 、ease-inout低速开始和结束
steps（）指定了时间函数中的时间隔数量（步长）括号里填数值1，2，3...
3D
transform：translate3d（x，y，z）z轴表示立体，相当于屏幕到眼睛的距离
透视perspective（透视写在被观察元素的父盒子css样式上面）
z轴越大，物体越大，透视越大物体越小。
3D旋转：
transform：rotatex（数值deg）
transform：rotatey（数值deg）
transform：rotatez（数值deg）
transform：rotate3d（x，y，z，deg）
3D呈现：transform-style
transform-style：flat：子元素不开启3d立体
transform-style：preserve-3d；子元素开启3d立体空间
代码写在父盒子上，但只会影响子盒子，父盒子不影响（perspective和transform-style都要有，不然不会有立体效果）
