CSS琐碎知识点(持续补充)

一、字体单位，pt？px？em？rem？

pt：磅，一种固定长度的绝对的度量单位，是能够使用测量设备测得的长度，印刷业上经常使用，一般用于页面打印排版。

px：屏幕设备上能显示出的最小的一个物理点，这个点不是固定大小的，会因为设备的不同而不同，假如：一个显示器上1px宽=1毫米，另一个显示器1px宽=两毫米，那么定义一个div宽度为100px，显示器1上看这个div是10厘米，显示器2上看是20厘米。另外一个px点的长宽不一定是1:1的正方形，有的设备上长宽比是不一样的。

em：现代浏览器默认字体大小为16px，所以1em=16px，em的大小不是固定的，会根据父元素的字体大小重新调整，比如，body元素没有设置字体大小，为16px，父元素设置了1.2em，子元素设置了1.2em，那么子元素的字体大小为1.44em，即1.44*16px，所以em最大的缺点就是，会产生字体大小的层层嵌套计算的问题，而rem解决了这个问题。

rem：css3属性，r是root的意思，即代表html的根元素，rem也是相对单位，但是是相对body或html的，所以只要在根元素设置了字体大小，那么后面的元素的字体大小设置就像设置绝对大小一样轻松，不会有嵌套计算的问题，除了IE8及更早版本外，所有浏览器均已支持rem。

二、div中的子元素input与div顶部之间有间隙？

可以看我的代码，div中只有一个子元素input，给div设置宽高和背景颜色后，发现input与div顶部之间有一点间隙？我试了好久也搞不懂是什么原因，因为我在W3School在线测试工具中试验，并没有发现这个问题，后来我给div设置font-size:0，居然解决了问题，神奇。

 三、CSS渐变

从上到下线性渐变：

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

从左到右线性渐变：

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

，