备忘录

1. 压缩源码和图片(js采用混淆压缩，css进行普通压缩，jpg图片根据具体质量压缩为50%到70%，png用来源软件压缩24色变成8色，去掉一些png格式信息等)
    选择合适的图片格式(颜色数多用jpg，颜色少用png，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式)

    照片用 JPG。
    动画用 GIF。
    Logo、Icon 等小图用 PNG-8。
    非特殊情况，尽量不要用 PNG-24 和 PNG-32。
2. 使用CDN(对公开库，能和其他网站共享缓存)
3. 延长静态资源缓存时间  
4. 把css放页面头部，js放底部(这样不会阻塞页面渲染，让页面出现长时间的空白)
5. 对于较大的文本资源，必须开启gzip压缩

6.margin-top和margin-bottom对于一个内联元素是根不起作用的。简单的理解，margin-top和margin-bottom就是让元素离远离自身顶部和底部的元素。

7.CSS属性不区分大小写。

8.css自适应

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta name="applicable-device"content="pc,mobile"/>

从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 }

9.white-space:pre;

	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

 

10.我们在网站设计时，难免会用到表格。表格中我们需要用到边框，border属性，这篇文章就是讲解DIV css （border属性）边框重叠 像素变粗 解决办法之一

margin-right:-1px;

 11.value与val（）区别

jQuery中没有value方法，可以通过attr方法获取或设置标签中的value属性的值。

jQuery中的val()方法用来获取或设定输入框或选择框的值。

<input id="text" type="text"></input>

获取值：$("#text").val()

设置值：$("#text").val(“value”)