备忘录

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”)

 

 

 

 

posted @ 2016-08-27 23:17  cindy—hmy  阅读(164)  评论(0编辑  收藏  举报