HTML、CSS、JavaScript拾遗

1、html元素中,如果有文本存在,当元素大小不足以容纳文本时,文本会进行强制换行。比如说设置页面不出现滚动条,body的overflow为hidden时,或者scroll为no时,span在超过页面时其内部文本会换行。设置span的white-space为nowrap即可强制令文本不换行。

white-space的作用是控制文本中间的换行符与空格符的

nowrap忽略换行符,即使超过父元素宽度也不换行,直到遇到br为止,会令滚动条出现(不自动换行,忽略换行符,合并空格)。

pre空白会被浏览器保留,换行符也会令文本换行,但同时,如果没有换行符的话,元素不会进行换行,结果就是出现滚动条(不自动换行,保留换行符,保留空格)。

normal默认,合并空白,忽略换行符,直到宽度不够显示文本时才进行换行,以不出现滚动条为优先条件(自动换行,忽略换行符,合并空格)。

pre-wrap保留空白符序列且正常换行,即保留换行符,同时若超过最大宽度,也会进行自动换行(自动换行,保留换行符,保留空格)。

pre-line合并空白符序列但保留换行,即保留换行符,会自动换行(自动换行,保留换行符,合并空格)。

2、css中使用伪类after::与before::可以创建元素,该元素并不属于document。

3、<script>标签中的async与defer

  一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在head中添加一个script,但这个script下载时网络不稳定,很长时间没有下载完成对应的js文件,那么浏览器此时一直等待这个js文件下载,此时页面不会被渲染,用户看到的就是白屏(网页文件已下载好,但浏览器不解析),而使用async属性,浏览器会下载js文件,同时继续对后面的内容进行渲染,通常如果js不需要改变DOM结构时可以使用async进行异步加载(比如一些统计代码可以异步加载,因为此代码与页面执行逻辑无关,不会改变DOM结构)。

  defer则是在页面加载完毕之后开始执行,而不是异步执行。

4、函数声明(Function Declaration) 和 函数表达式(Function Expression )的区别

  函数声明:function foo() {},函数表达式:var foo = function () {};

  那这个写法,是不是同时存在函数声明也有函数表达式呢?var foo = function f() {};

  这其实是一个「命名函数表达式」。

var foo = function f() {
    return typeof f;
};
foo(); // return 'function'

  另外,只有当语句以function开头才会被解释器当作函数声明来处理。在把函数对象作为参数或者作为引用使用时,两者通用,当直接调用函数时,两者也通用。但是当作为对象构造函数内部的函数时,两者是有区别的,必须使用第二种表达式形式。还有当使用闭包时,返回的函数是无法调用到这两种函数的,变量会被保留,函数却不会。

(function(){
var a = function(){}
function b(){}
this.c = function(){ a(); b(); }
})();
c();

  c();是执行不到a和b的。var 方式定义的函数,不能先调用函数,后声明,只能先声明函数,然后调用。function方式定义函数可以先调用,后声明。var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句。

  5、JavaScript返回值

  在JS引擎中,所有的语法,操作都有返回值,而且通常返回值是它本身或undefined。通常我们可以用"()"操作符,来获取当前句子的返回值(部分操作符不能用,如var)。例如:a=3;其实这行的返回值就是3,所以在a=b=3时,JS引擎就可以正确的执行下去,首先3赋值给b,然后当前的返回值3再赋值给a(而不是大家所认为的,先将3赋值给b,然后再将b赋值给a)。又例如函数var fun=function(){},当JS引擎执行到这行时,会先执行右边,返回值是一个函数的字面量,然后将这个函数字面量赋值给fun。

  Jquery也是利用了这个特性(函数return this),所以才有链式调用。我们看个例子:"fontFamily".replace( /([A-Z])/g, "-$1" ).toLowerCase(),没错这里也是利用了返回值,所以这行的结果是:font-family。

  6、CSS3中有一些滤镜

.gallery:hover li:not(:hover){       
        -webkit-filter: blur(2px) grayscale(1);
        -moz-filter: blur(2px) grayscale(1);
        -o-filter: blur(2px) grayscale(1);
        -ms-filter: blur(2px) grayscale(1);
        filter: blur(2px) grayscale(1);
        opacity: .7; /* fallback */        
    }

  filter定义滤镜,后面为滤镜效果

  • grayscale 灰度               值为0-1之间的小数 
  • sepia 褐色         值为0-1之间的小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转  值为angle
  • invert 反色        值为0-1之间的小数
  • opacity 透明度     值为0-1之间的小数
  • brightness 亮度     值为0-1之间的小数
  • contrast 对比度     值为num
  • blur 模糊           值为length
  • drop-shadow 阴影

  7、css中一些特殊值

.front {
    background: url(images/cardjfront.png) no-repeat center/100% 100%;
    z-index: 2;
}
.back {
    background: url(images/cardjback.png) no-repeat center/100% 100%;
    transform: rotateY(180deg);
}

  可以通过样式的background属性,调用url()函数,来设置背景图片。

posted @ 2015-01-12 10:09  光闪  阅读(189)  评论(0编辑  收藏  举报