time:2015年7月9日22:53:23
1.属性选择器：transition:1s (ie8)
Chrome(谷歌浏览器) ：-webkit-
Safari(苹果浏览器) ：-webkit-
Firefox(火狐浏览器) ：-moz-
IE(IE浏览器) ：-ms-
Opera(欧朋浏览器) ：-o-
因此，应该先用有厂商前缀的指定样式，紧接着使用无前缀的。这样可以保证当浏览器移除了前缀，使用标准CSS3 规范时，你写的样式仍然有效：
#prefix-example {
-webkit-box-shadow: 0 3px 5px #FFF;
-moz-box-shadow: 0 3px 5px #FFF;
-o-box-shadow: 0 3px 5px #FFF;
box-shadow: 0 3px 5px #FFF;
}
js里面：WebkitTransition MozTransition OTransition
a: 自定义属性：p[miaov]{} 属性名 ie7以上支持
p[miaov=leo]{}
新增三个通配符选择器：
E[attr^="val" ]选择元素E的属性是以val开头的
E[attr $='val' ] 和上面的刚好相反，选择是元素E的属性是以val结尾的。
E[attr *='val' ] 选择元素E的属性attr中包含val的所有元素
b:结构选择器 p：nth-child(1) 所有p标签父级下面的第一个子节点，而且必须还是p标签
p：nth-child(odd/even) 各行变色
p：nth-child(n) n从0开始，可以运算
body *:nth-child(2) body下面的所有元素2个
p:nth-last-child(1) 从后往前面数
p:nth-of-type(1)找到第一个p类型的标签
p:first-child{}==:nth-child(1)
p:last-of-type==:nth-last-of-type(1)
P:on
2015年7月13日17:24:59
表单新增
E:target 表示当前的URL 片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
*:focus {outline: none;} 去掉谷歌默认的边框
最常用的是清除浮动：
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
曲线阴影
border-radius:100px/10px 水平方向的半径是100px 垂直方向的半径是10px
在直角阴影中插入曲线阴影，前后重合，z-index=-1; 然后就看到了曲线阴影
翘边阴影
Content 属性
颜色模式RGBA a-alpha(0-1)之间的小数
rgb(red,green,blue)需求：背景是透明的，内容是不透明的。rgba()注意边框颜色透明问题
文字阴影：
text-shadow(x,y,程度，颜色)
阴影的叠加： text-shadow(x,y,程度，颜色，x,y,程度，颜色)逗号隔开
文字描边： -webkit-text-stroke:(宽度，颜色) 暂时只有ff支持
文字的排版（全兼容的两个属性）
direction : 规定文本的显示方向 rtl 从右到左 ltr从左到右
text-overflow：ellipsis：超出之后显示省略号
word-wrap: break-word; 如果一个单词显示不下，就会换行显示，不会拆分这个单词；
overflow:hidden;
white-space:nowrap; 不会换行显示
text-overflow: ellipsis;
--自定义字体
@font-face{
font-family:'anikin';
src :url('');
}
h1{ font-family: 'anikin'; }
2015年7月13日23:09:17
弹性盒子模型：移动端有时候宽不一定
1: 注意在使用弹性盒模型的时候，父元素必须要加display:box或者display:inline-box(要加浏览器和模型前缀)：-webkit-box;
2: box-orient定义和模型的布局方向（horizontal水平 horizontal垂直）;
-webkit-box-orient: horizontal horizontal
box-direction:normal/reverse; 正向排序 反向排序
3: -webkit-box-ordinal-group: n 自定义排列顺序
4: box-flex自定义盒子弹性空间管理
-webkit-box-flex: n; 就是每个子集所占总的比例
5: 富裕空间的管理
水平方向：-webkit-box-pack：
End 所有子元素在盒子右侧显示，富裕空间在左侧
Center 所有子元素居中
Justify 富余空间在子元素之间平均分布
html{
height:100%;}
body{
height:100%;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
margin:0;
background:rgba(0,0,0,0.6);
}
div{
width:400px;
height:200px;
border:1px solid #3FF;
background:rgba(255,255,255,1);
}
和模型的阴影：比text-shadow多两个参数
box-shadow:[可选参数insert] x y blur [spread] color 也可以叠加
参数：-insert:投影的方式 内投影 不给：外投影
inset 可以写在参数的第一个或最后一个，其它位置是无效的
-blur 模糊半径
-spread扩展阴影半径先扩展原有的形状，再开始画阴影
7：倒影 box-reflect （只在-webkit-内核中实现了）
-direction 方向 above/below/left/right;
-距离（可选-倒影和自身之间的距离）
-渐变（可选）
9：resize 水平方向可以缩放
Both 水平垂直都可以缩放
Horizontal 只有只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
10：怪异和模型 box-sizing:
box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content 等于实际内容宽高 没有边框跟padding
响应式布局：目前只有webkit内核实现了效果
1;分栏布局：-webkit-column-width:n；限制宽度，自动分栏
2; -webkit-column-count:栏目列数
3： -webkit-column-gap 栏目距离
4： -webkit-column-rule栏目间隔线：1px solid #000;
媒体查询 midea
2015年7月14日23:23:02
圆角：
border-radius:左上角 右下角| 四个值顺时针旋转
eg:100px/150xp;椭圆（x轴半径，Y轴半径） 50% 百分比有时候比较方便
1个：都一样
border-radius: 一样
2个：对角
border-radius: 左上&右下 右上&左下
3个：斜对角
border-radius: 左上 右上&左下 右下
4个：全部，顺时针
border-radius: 左上 右上 右下 左下
.div1{ width:100px; // 上半圆
height:50px;
border-radius:50px 50px 0 0;
-moz-border-radius:50px 50px 0 0;
background:red;
margin:20px;}
.div2{ width:50px; // 有半圆
height:100px;
border-radius:50px 0 0 50px;
background:yellow;
}
边框背景：
border-image：引入的图片
border-image-slice切割图片; 九宫格
border-image-width边框宽度
border-image-repeat图片的排列方式 -round 平铺 repeat重复 stretch拉伸
eg:border-image:url（） 27(上下切27px) 27 repeat repeat;
border-colors:变框颜色【不太实用，只在火狐下实现了】
border-left-colors:red blue yellow;
background-size: length|percentage|cover|contain;
(1):background-size:200px 200px; 规定背景大小就是200x200的
(2):background-size:cover 是完全覆盖背景区域
(3) background-size:contain 是把图像扩大至最大宽度，然后让高度自适应
多背景展示效果：
background-image: url(p1.jpg),url(p2.jpg),url(p3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-position:left top,120px 0, 250px 0;
线性渐变：linear-gradient(to bottom, #fff, #999); 第一个参数不写默认是从上到下的渐变
background-image:linear-gradient(to top left,#f60,#fff) ; // 右下角到左上角
background-image：-webkit-linear-gradient(30deg,blue,red)
background-image：-webkit-linear-gradient(30deg,blue 20px ,blue 100px;)或者百分数，从20px 开始全部是blue
只能用在背景上
-兼容iE
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
0从上到下 1从左到右
参数
起点：从什么方向开始渐变 默认：top
left、top、left top
角度：从什么角度开始渐变
xxx deg的形式
点：渐变点的颜色和位置
black 50%，位置可选
多背景：
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;逗号分开
2015年7月16日18:21:40
1.过渡:发生在样式改变的时候
transition-property要运动的样式(all||[attr]||none)
transition 50ms width; //只过度width 默认值是all
transition-duration运动时间
transition-delay延迟时间
transition:5s 1s width,2s height;
transition-timing-function运动形式【easy liner ease-in ease-out ease-in-out先加速后减速
transition:5s width ease-in-out;
transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);
cubic-bezier（x1，x2，y1，y2)拜赛尔曲线】
eg:tranisition-property:1s 【延迟时间】 width ease;多次运动可以使用逗号隔开
transition:5s width,2s height; // 多样式同时需要过度，中间使用逗号隔开
2.过渡完成事件
Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox: obj.addEventListener('transitionend',function(){},false);
注意：1: 每改变一次样式都会触发tansationend事件
2:
function addEnd(obj,fn)
{
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn)
{
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}
实例：苹果产品展示
实例2：360浏览器 ipad 版导航
function end(obj,fn){
obj.addEventListener('webkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);//normal
}
function removeadd(obj,fn)
{
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}
3 .transform
要加前拽-webkit-
rotate() 旋转函数 取值度数
deg 度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
skewX()
skewY()
scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
translate() 位移函数单位是px
translateX() 从左往右移动
translateY() 从上往下移动
实例1：钟表效果
实例2：怪异的导航
Transform 执行顺序问题 — 后写先执行
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
–a=Math.cos(deg/180*Math.PI);
–b=Math.sin(deg/180*Math.PI);
–c=-Math.sin(deg/180*Math.PI);
–d=Math.cos(deg/180*Math.PI);
l变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
3D变换
-webikit-transform-style:preserve-3d 建立3d空间 一定要加上景深
-webikit-Perspective 景深 (要加前缀)
-webikit-Perspective-origin 景深基点 视线是从哪个方向看过去的
perspective-visibility 隐藏背面
Transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
