小知识记录

 清除浮动：

添加子元素{clear:both},左右都不允许出现浮动元素。

清除a的下划线：

 text-decoration:none;

清除li前的小圆点：

li {list-style-type:none;}

圣杯布局：https://segmentfault.com/a/1190000004579886

negative-margin:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html

关于文档流，浮动流和position:http://www.cnblogs.com/LiveWithIt/p/6024864.html

input标签的类型：color,date,email(可使用伪类 :valid 和:invalid检测是否通过验证),file,image,tel

letter-spacing：设置字符间距

text-align,text-transform

position: 

absolute,相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素

document.documentElement.clientHeight

document.documentElement.clientWidth

getComputedStyle:获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）。

设置透明度：alpha,opacity

alpha通道设定透明度的时候需要单独对每一个设定，而opacity直接就运用在了整个标签上,opacity只能设定整个元素的透明值，而alpha通道可以特定对元素的某个属性设定透明值，比如上面的背景、边框、文字等

z-index不起作用：

要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。

不起作用的情况：

1.第一种情况（z-index无论设置多高都不起作用情况）：

这种情况发生的条件有三个：

1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

元素样式有overflow=hidden

PageX和clientX
pageX指鼠标在页面上的位置，以页面左侧为参考点
clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。
即当有滚动条时clientX  小于  pageX

screenX
鼠标在屏幕中的位置，指的是鼠标到电脑屏幕左侧的距离。 各个浏览器相同。
与clientX的区别是clientX是到浏览器的距离。
 例如：当网页缩小，拖动到屏幕中间时，screnX 大于 clientX

offsetwidth/clientwidth的区别

scrollWidth 
是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度） 

clientWidth 
是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 

offsetWidth 
是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 

在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。 
当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。 
scrollWidth是对象实际内容的宽度。 
clientWidth是对象看到的宽度（不含边线），这个例子里不会改变。 

offsetWidth的值总是比clientWidth的值打 
clientWidth是对象看到的宽度（不含边线） 
offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽） 

clientWidth是对象看到的宽度（不含边线,即border）
scrollWidth是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。
offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）。

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

易混淆点：

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

getComputedStyle：

var style = window.getComputedStyle("元素", "伪类");

例如：

var dom = document.getElementById("test"),    style = window.getComputedStyle(dom , ":after");

http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/