css高级写法
精灵图
有效地减少服务器接收和发送请求的次数，提高页面的加载速度
使用步骤
移动背景图片位置， 此时可以使用 background-position 。
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同，因为一般情况下都是往上往左移动，所以数值是负值。
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
字体图标
如果遇到一些结构和样式比较简单的小图标，就用字体图标。
使用步骤
1. 把下载包里面的 fonts 文件夹放入页面根目录下
2.在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。(放在<style></style>中)
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
3.html 标签内添加小图标。
4.给标签定义字体。
span {
font-family: "icomoon";
}
CSS 三角
div {
width: 0;
height: 0;
/*为了系统兼容性*/
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
CSS界面样式
鼠标样式 cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
选择器 {cursor: pointer; }
轮廓线 outline
input {outline: none; }
给表单添加 outline: 0; 或者 outline:none;就能去掉系统外面的默认边框。
防止拖拽文本域 resize
textarea{resize:none;}
vertical-align 属性
解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : top |middle | baseline | bottom
Vertical-align:顶线|中线|基线|底线
应用：1.经常用于设置图片或者表单(行内块元素）和文字垂直对齐。2.图片底部默认空白缝隙问题。（这个问题也可以是将图片转化成行内快元素）
溢出的文字省略号显示
单行文本溢出显示省略号
--必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内
核）
常见布局技巧
margin负值的运用
让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如
果有定位，则加z-index）
文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
行内块的巧妙运用
页码在页面中间显示:
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
CSS三角强化
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
HTML5 的新特性
HTML5 新增的语义化标签
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
HTML5 新增的多媒体标签
1. 音频：<audio>(mp3)
2。视频：<video>(mp4)
HTML5 新增的 input 类型（属性值）
type="number"——只能输入数字
type="tel"——只能输入电话号码
type="search"——搜索框
HTML5 新增的表单属性
CSS3 的新特性
1.属性选择器
属性选择器可以根据元素特定属性来选择元素。 这样就可以不用借助于类或者id选择器。
注意：类选择器、属性选择器、伪类选择器，权重为 10。例子：input[class=”type”] {......}
结构伪类选择器
1.nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
:nth-child(n) {}
n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始...
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
伪元素选择器
before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1
应用：伪元素选择器使用场景1：伪元素字体图标
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}
应用：伪元素选择器使用场景2：仿土豆效果
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 /
.tudou:hover::before {
/ 而是显示元素 */
display: block;
}
应用：伪元素选择器使用场景3：伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
双伪
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
盒子模型
1. 指定盒子模型
box-sizing:content-box||border-box;
content-box默认样式，只算内容大小，padding，border会撑大盒子；
Border-box 大小=内容+padding+border;
经常放在*{box-sizing:......}
2. 图片变得模糊
选择器 {
filter:blur(...px);
}
其中blur是一个函数，括号中的值越大，图片越模糊
3. cals()计算函数
Width:cals(数px +|-|*|/|数px );
Width:cals(100%-30px)（解释：子盒子的宽度永远比父盒子少30px）
4. 过渡
transition :要过渡的属性 过渡的时间 运动的曲线 何时开始
其中过渡的时间必须带单位，后两个可以不写
多个属性过渡可以用逗号隔开;也可以把属性换成all;
谁做过渡给谁写
经常和：hover一起搭配
自己 {
Transition:all 1s;
}
自己:hover {
Width:100px;
Height:......;
Color:.......;
}
2d转换
Transform:位移translate，旋转rotate，缩放scale
translate类似定位,不会影响其他盒子的位置。但是对行内元素没有效果。
位移translate
语法：transform:translate(xpx,ypx);不能省略
Transform:translateX(npx);
Transform:translatrY(npx);
translate里面的参数可以用%，移动的距离是盒子自身的宽度或者高度作对比
Margin-top=height/2px;margin-left=width/2 px;
=transform:translate(-50%,-50%).
旋转rotate
语法：transfrom:rotate(度数deg)
度数为正——顺时针；度数为负——逆时针；旋转中心为元素中心点。
经常和过渡一起使用
本身 {
Transition:all .3s;
}
本身：hover{
Transform:rotate(360deg);
}
上下旋转225deg;
改变旋转中心
Transform-origin:（x y）;x,y可以为px，方位名词，也可以为%
默认值为50%50%=center
缩放scale（不影响其他盒子，而且可以改变缩放的中心）
Transform：scale(x,y);逗号隔开；x,y只有数字没有单位，意思为几倍
Transfrom:scale(n);宽高等比例缩放；
当xy小于1时是缩小
盒子内容放大时可以这样做
Hover图片Transform:scale(1.1);
大盒子Overflow:hidden;
图片Transition:all .6s;
2d的综合写法：
Transform:translate(x y) rotate(deg) scale();
注意顺序，rotate会改变坐标轴的方向
有位移把位移放在最前头
3d动画
先定义，后调用
定义语法
@keyframes 动画名称 {
0%||from {//开始标签
Width:0px;||transform:translate(o o);
}
100%||to {//结束的标签
Width:200px;||transform:translate(100px 0);
}
}
调用
Div {
......
Animation-name:动画名称；
Animation-duration:2s;//动画的时间
}
动画可以改变任意多的样式和状态
@keyframes 动画名称{
0% 25%50%100%}
其中%前要整数；动画的时间被这些节点平分
属性
动画简写：
Animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始和结束的状态
Animation:move 2s linear 1s infinite alternate ,backwards