前端乱写笔记

对于angularjs中的双向数据绑定，在不使用angularjs的情况下同样可以使用js原生方法  oninput属性，在ie9以下版本得使用onpropertychange属性即可
在一下情况下就会触发这个事件：


修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。




修改了 input:text 或者 textarea 元素的值，value 属性发生变化。




修改了 select 元素的选中项，selectedIndex 属性发生变化。


注：在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。




css简单记录
若页面上的文字小于12px没有变化的情况可加样式html{-webkit-text-size-adjust:none;}
注：-webkit-text-size-adjust放在body上会导致页面缩放失效
在a便签下点击出现虚线框的情况，在css中可以使用以下来解决
a {
*outline: 0
}
a:active {
*star: expression(this.onFocus=this.blur())
}
a:focus {
*outline: 0
}
使背景图片固定，不随滚动条滚动可使用“background-attachment: fixed”；
以下代码能够使placeholder占位符改变颜色
input::-webkit-input-placeholder {
color: #888
}
input::-moz-placeholder {
color: #888
}
textarea::-webkit-input-placeholder {
color: #888
}
textarea::-moz-placeholder {
color: #888
}
//文字显示格式
.text-autocut {
overflow: hidden;
white-space: nowrap;
-webkit-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-icab-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis
}
.wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word
}
//背景颜色渐变
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d7db');//IE
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d4d7db));
background: -moz-linear-gradient(top, #fff, #d4d7db);
background: -ms-linear-gradient(-60deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 72%);
background: linear-gradient(-60deg, rgba(255, 255, 255, 0) 28%,rgba(255, 255, 255, 0) 72%);

要实现3D的效果视图，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果
将平面图形转换为具有透视的3D图形，该属性只能使其子元素产生3D，不对自身节点产生影响可使用-webkit-perspective: 800;（景深）设置样式
注：如果父元素设置overflow：hidden；那么子元素就无法跳出父元素的平面，也就不能出现3D效果。就如同，transform-style：flat；可参考http://www.787866.com/2083.html


perspective:规定 3D 元素的透视效果。注：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective-origin:规定 3D 元素的底部位置。注：perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。其子元素会获得透视效果，而不是元素本身。
backface-visibility:定义元素在不面对屏幕时是否可见。注：属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。


设置透视perspective：（int），perspective-origin：（int）3d景深，-webkit-backface-visibility: hidden，使旋转元素使其隐藏背面


定义为盒子模型-webkit-box-sizing: border-box;通过这个设置，可以将子盒子按比例来分得所占面积


文字锯齿效果
font-smoothing: subpixel-antialiased（none：用于小像素文本，antialiased：反锯齿）;


appearance: none主要用于去除按钮的默认在各个浏览器中渲染的不同样式


::-webkit-scrollbar主要用于设置滚动条样式，会替换浏览器默认对滚动条的渲染，可以自定义滚动条样式其中包括以下拓展
#滚动条拓展#
滚动条是一个伪元素，可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭，只按照用户自定义的css信息进行渲染。比如：


::-webkit-scrollbar {


width: 13px;


height: 13px;


}


width和height属性分别表示纵向滚动条的宽度和横向滚动条的高。也可以指定为%百分比，在在这种情况下就代表了，滚动条占整个视窗的百分比，如：


::-webkit-scrollbar {


width: 50%;


}


滚动条包括：滚动按钮和一个轨道。轨道本身有进一步氛围轨道碎片（track pieces）和一个滑块。轨道碎片值滑块上方和下面的区域。滚动条的角合适被设置为各种风格，比如可以调整文本区域的大小。


下面是关于滚动条的所有伪元素：


::-webkit-scrollbar{/*1*/}


::-webkit-scrollbar-button{/*2*/}


::-webkit-scrollbar-track{/*3*/}


::-webkit-scrollbar-track-piece{/*4*/}


::-webkit-scrollbar-thumb{/*5*/}


::-webkit-scrollbar-corner{/*6*/}


::-webkit-resizer{/*7*/}


任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。


:horizontal(horizontal伪类适用于任何水平方向上的滚动条)


:vertical(vertical伪类适用于任何垂直方向的滚动条)


:decrement(decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮)


:increment(increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮)


:start(start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面)


:end(end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面)


:double-button(double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。)


:single-button(single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。)


:no-button(no-button伪类表示轨道结束的位置没有按钮。)


:corner-present(corner-present伪类表示滚动条的角落是否存在。)


:window-inactive(适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。)


::-webkit-scrollbar-track-piece:start {
   /*滚动条上半边或左半边*/
}


::-webkit-scrollbar-thumb:window-inactive {
   /*当焦点不在当前区域滑块的状态*/


}


::-webkit-scrollbar-button:horizontal:decrement:hover {
   /*当鼠标在水平滚动条下面的按钮上的状态*/


}






/*****************示例****************/


::-webkit-scrollbar {
width: 10px;
height: 10px
}
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:start:decrement {
display: block
}
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:vertical:start:increment {
display: none
}
::-webkit-scrollbar-button:end:increment {
background-color: #F1F1EF
}
::-webkit-scrollbar-button:start:decrement {
background-color: #F1F1EF
}
::-webkit-scrollbar-track-piece:vertical:start {
background-color: #F1F1EF
}
::-webkit-scrollbar-track-piece:vertical:end {
background-color: #F1F1EF
}
::-webkit-scrollbar-thumb:vertical {
width: 6px;
margin: 0 auto;
border-radius: 4px;
background: #090A0B;
border-width: 8 0
}
#滚动条拓展#


::selection主要用于选择器匹配被用户选取的部分。注意：只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。


:nth-child(4n+1)（第4n+1个元素）可以选择指定的地方


-ms-interpolation-mode 解决图片在缩放失真问题，only IE7


width: calc(100% - 58px) 可以用jquery表示为$(selected).css('width', '100%').css('width', '-=58px');


css中的滤镜可以使用：-webkit-filter 用法是标准的 CSS 写法：-webkit-filter: blur(2px);<可以使用的属性有以下>
blur 模糊  eg:-webkit-filter:blur(2px);
brightness 亮度 eg:-webkit-filter:brightness(25%);
contrast 对比度 eg:-webkit-filter: contrast(50%);
drop-shadow 阴影 eg:-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
grayscale 灰度 eg:-webkit-filter: grayscale(80%);
opacity 透明度 eg:-webkit-filter: opacity(50%);
sepia 褐色 eg:-webkit-filter: sepia(100%);
invert 反色 eg:-webkit-filter: invert(100%);
saturate 饱和度 eg:-webkit-filter: saturate(1000%);
hue-rotate 色相旋转 eg:-webkit-filter:hue-rotate(180deg);


*html{_background-image:url(about:blank);_background-attachment:fixed;}/*去掉ie6下滚动条滚动时出现的元素固定位置抖动情况*/
text-transform 属性控制文本的大小写
[ text-stroke-width ]：设置或检索对象中的文字的描边厚度 [ text-stroke-color ]：设置或检索对象中的文字的描边颜色
文本框样式中设置ime-mode: disabled;//禁止输入中文，ie ff有效;
-webkit-clip-path：剪裁路径
在执行动画函数的时候可使用贝塞尔函数 eg：cubic-bezier(0.62, .02, .34, 1)
设置样式pointer-events:none去除鼠标事件（常实现按钮、选项卡等的禁用效果等）
禁用a标签的完美组合是pointer-events:none & without href
pointer-events:none还可用于对渐变内部文字的是否可选，可点击等事件禁用与否
其中幻影特性可用js代替
function noPointerEvents (element) {
    $(element).bind('click mouseover', function (evt) {
        this.style.display = 'none';
        var x = evt.pageX, y = evt.pageY,
   under = document.elementFromPoint(x, y);
        this.style.display = '';
        evt.stopPropagation();
        evt.preventDefault();
        $(under).trigger(evt.type);
    });
}


视觉效果
-webkit-box-reflect: right 1px; 镜向反转
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(0.5, transparent), to(white));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));;   //CSS 遮罩/蒙板效果
-webkit-mask-attachment: fixed; 常量：fixed/scroll
-webkit-perspective: value; 常量：none(默认)
-webkit-perspective-origin: left top;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 与3D)


生成内容列表


content: “Item” counter(section) ” “;
This resets the counter.
First section
>two section
three section
counter-increment: section 1;
counter-reset: section;
⑤“分页媒体”描述性能与外观的属性，控制印刷版本的网页，如分页符的行为。


page-break-after: auto; 常量：always/auto/avoid/left/right
page-break-before: auto; 常量：always/auto/avoid/left/right
page-break-inside: auto; 常量：auto/avoid
⑥“颜色和背景”描述属性控制背景下的块级元素和颜色的文本内容的组成部分。


-webkit-background-clip: content; 常量：border/content/padding/text
-webkit-background-origin: padding; 常量：border/content/padding/text
-webkit-background-size: 55px; 常量：length/length_x/length_y
⑦ “字型”的具体描述性质的文字字体的选择范围内的一个因素。报告还描述属性用于下载字体定义。


unicode-range: U+00-FF, U+980-9FF;
⑧“文本”描述属性的特定文字样式，间距和自动滚屏。


text-shadow: #00FFFC 10px 10px 5px;
text-transform: capitalize; 常量：capitalize/lowercase/none/uppercase
word-wrap: break-word; 常量：break-word/normal
-webkit-marquee: right large infinite normal 10s; 常量：direction(方向) increment(迭代次数) repetition(重复) style(样式) speed(速度);
-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up
-webkit-marquee-incrementt: 1-n/infinite(无穷次)
-webkit-marquee-speed: fast/normal/slow
-webkit-marquee-style: alternate/none/scroll/slide
-webkit-text-fill-color: #ff6600; 常量：capitalize, lowercase, none, uppercase
-webkit-text-security: circle; 常量：circle/disc/none/square
-webkit-text-size-adjust: none; 常量:auto/none;
-webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; 常量：normal/after-white-space
-webkit-appearance: caps-lock-indicator;
-webkit-nbsp-mode: space; 常量： normal/space
-webkit-rtl-ordering: logical; 常量：visual/logical
-webkit-user-drag: element; 常量：element/auto/none
-webkit-user-modify: read- only; 常量：read-write-plaintext-only/read-write/read-only
-webkit-user-select: text; 常量：text/auto/none
⑨“表格”描述的布局和设计性能表的具体内容。


-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
-webkit-column-break-after: right; 常量：always/auto/avoid/left/right
-webkit-column-break-before: right; 常量：always/auto/avoid/left/right
–webkit-column-break-inside: logical; 常量：avoid/auto
-webkit-column-count: 3; //分栏
-webkit-column-rule: 1px solid #fff;
style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid
⑩“用户界面”描述属性，涉及到用户界面元素在浏览器中，如滚动文字区，滚动条，等等。报告还描述属性，范围以外的网页内容，如光标的标注样式和显示当您按住触摸触摸
目标，如在iPhone上的链接。


-webkit-box-align: baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch
-webkit-box-direction: normal;常量：normal/reverse
-webkit-box-flex: flex_valuet
-webkit-box-flex-group: group_number
-webkit-box-lines: multiple; 常量：multiple/single
-webkit-box-ordinal-group: group_number
-webkit-box-orient: block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation
–webkit-box-pack: alignment; 常量：center/end/justify/start


-webkit-transform: scale(0.01)//放大
2. 被点击元素的外观变化，可以使用样式来设定：


-webkit-tap-highlight-color: 颜色
4. 阻止旋转屏幕时自动调整字体大小


html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}




css相关（webkit）
-webkit-mask:让一个元素添加蒙版，可以创建任意形状的花样，
蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，严重依赖来自于background中的语法。
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
//渐变蒙版


-webkit-text-stroke//只有矩形的元素才能使用
实例：可用于创建空心字


-webkit-nbsp-mode//改变&nbsp;空白符的行为，强制文字在它被用到的地方断行


-webkit-tap-highlight-color//只用于苹果
当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色


zoom:reset//在webkit中，如果某个元素被声明了zoom:reset，页面上的其它元素在用户放大页面的时候都会跟着放大。


-webkit-margin-collapse//默认值是collapse,值separate则停止共享margin值


-webkit-box-reflect//取值有above、below、left和right，表明倒影方向


-webkit-marquee//跑马灯效果
要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。
剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。


最好不要使用marquee标签，会占用比较大的cpu，用-webkit-marquee属性代替






/**火狐Gecko特有*/
font-size-adjust
//我们可以用它来设定指定元素的文字大小(font-size)应该相对于小写字母的高度(x-height)而不是大写字母的高度(cap height)


image-rendering//-moz-crisp-edges/optimizeSpeed/auto/optimizeQuality (用可行的最佳质量来缩放元素)


-moz-border-top-colors//可以在border宽度大于1px的时候为其设置不同的边框颜色
注意：没有一个简写的-moz-border-colors 缩写，所以每个边框都要分开设置。同时，border-width要和给到的颜色的数量保持一致，否则，最后的那个颜色值会填充到剩下的宽度。


-webkit-user-select 和 -moz-user-select//none/不希望用户在你的网站上选择文本


-webkit-appearance 和 -moz-appearance//将一张图片伪装成单选按钮


text-align: -moz-center/-webkit-center//让一个块级元素居中


quotes//可以用:before和:after伪元素为任何期望的元素指定引号


实例
q {
quotes: '?' '?' "?" "?";
}
前面的两个符号决定第一级引用内容的引号，后面的两个用于二级引用，以此类推：
下面两行用于为选定元素指定引号:
q:before {content: open-quote}
q:after {content: close-quote}


background-attachment：/local/背景图片随着内容而滚动




显示在线字体的微妙细节/可以利用text-rendering来启用kerning 和 ligatures




transform: matrix(sx, 0, 0, sy, 0, 0);//放大缩小
transform:matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0);//旋转






//隐藏点击虚线框（ie）
hidefocus="hidefocus"