css总结

语法

CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明（declaration）。

.box{
  background-color:pink;
}

一个或者多个声明用 {} 包裹起来后，那就组成了一个声明块（declaration block）。

.box{
  background-color:pink;
  width:600px;
}

css注释

/* 单行注释 */

/*
    多行
    注释
*/

@规则

CSS 规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候也需要在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。

规则	说明
@namespace	告诉 CSS 引擎必须考虑XML命名空间
@media	如果满足媒体查询的条件则条件规则组里的规则生效
@page	描述打印文档时布局的变化.
@font-face	描述将下载的外部的字体
@keyframes	描述 CSS 动画的关键帧
@document	如果文档样式表满足给定条件则条件规则组里的规则生效

@charset

@charset 用于定义样式表使用的字符集。它必须是样式表中的第一个元素。如果有多个 @charset 被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的

@charset "UTF-8";

注意：值必须是双引号包裹

字符编码

一个样式表文件用的字符编码浏览器都有一套识别顺序，优先级是由高到低。

文件开头的 Byte order mark 字符值，不过一般编辑器并不能看到文件头里的 BOM 值；

HTTP 响应头里的 content-type 字段包含的 charset 所指定的值，比如：
Content-Type: text/css; charset=utf-8

CSS 文件头里定义的 @charset 规则里指定的字符编码；

<link> 标签里的 charset 属性，该条已在 HTML5 中废除；

默认是 UTF-8。

@import(外部样式表)

link 和 @import 都能导入一个样式文件，它们的区别：

link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS；
link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载；
link 没有兼容性问题，@import 不兼容 ie5 以下；
link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import不可以。

@supports

@supports 用于查询特定的 CSS 是否生效，可以结合 not、and 和 or 操作符进行后续的操作。

/* 如果支持自定义属性，则把 body 颜色设置为变量 varName 指定的颜色 */
@supports (--foo: green) {
    body {
        color: var(--varName);
    }
}

层叠性

层叠样式表是CSS 中的核心特性之一，用于合并来自多个源的属性值的算法。

针对不同源的样式，将按照如下的顺序进行层叠，越往下优先级越高。

选择器

基础选择器

选择器	举例
标签选择器	span
类选择器	.box
ID 选择器	#box
通配选择器	*

属性选择器

选择器	说明
[attr]	指定属性的元素
[attr=val]	属性等于指定值的元素
[attr*=val]	属性包含指定值的元素
[attr^=val]	属性以指定值开头的元素
[attr$=val]	属性以指定值结尾的元素
[attr~=val]	属性包含指定值(完整单词)的元素(不推荐使用)
[attr=val]	属性以指定值(完整单词)开头的元素(不推荐使用)

举例

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}

组合选择器

选择器	举例
相邻兄弟选择器	div + p
普通兄弟选择器	A ~ B
子选择器	ul > li
后代选择器	A B
分组选择器	div,p

伪类

条件伪类

选择器	说明
:lang()	基于元素语言来匹配页面元素
:dir()	匹配特定文字书写方向的元素
:has()	匹配包含指定元素的元素
:is()	匹配指定选择器列表里的元素
:not()	用来匹配不符合一组选择器的元素

行为伪类

选择器	说明
:active	鼠标激活的元素
:hover	鼠标悬浮的元素
::selection	鼠标选中的元素

举例

a:hover{
        color: green;
    }

状态伪类

选择器	作用
:target	当前锚点的元素
:link	未访问的链接元素
:visited	已访问的链接元素
:focus	输入聚焦的表单元素
:required	输入必填的表单元素
:valid	输入合法的表单元素
:invalid	输入非法的表单元素
:in-range	输入范围以内的表单元素
:out-of-range	输入范围以外的表单元素
:checked	选项选中的表单元素
:optional	选项可选的表单元素
:enabled	事件启用的表单元素
:disabled	事件禁用的表单元素
:read-only	只读的表单元素
:read-write	可读可写的表单元素
:blank	输入为空的表单元素
:current()：浏览中的元素；
:past()	已浏览的元素
:future()	未浏览的元素

举例

a:link{
        color: green;
    }

css 面试题

将数字 12345678 转化成 RMB形式 如： 12,345,678

//思路：先将数字转为字符， str= str + '' ;
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！
for(var i = 1; i <= re(str).length; i++){
    tmp += re(str)[i - 1];
    if(i % 3 == 0 && i != re(str).length){
        tmp += ',';
    }
}

生成5个不同的随机数

//思路：5个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字！
var num1 = [];
for(var i = 0; i < 5; i++){
    num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
    for(var j = 0; j < i; j++){
        if(num1[i] == num1[j]){
            i--;
        }
    }
}

去掉数组中重复的数字

方法一

//思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中！
//这里用的原型 个人做法；
Array.prototype.unique = function(){
    var len = this.length,
        newArr = [],
        flag = 1;
    for(var i = 0; i < len; i++, flag = 1){
        for(var j = 0; j < i; j++){
            if(this[i] == this[j]){
                flag = 0;        //找到相同的数字后，不执行添加数据
            }
        }
        flag ? newArr.push(this[i]) : '';
    }
    return newArr;
}

方法二：

(function(arr){
    var len = arr.length,
        newArr = [], 
        flag;
    for(var i = 0; i < len; i+=1, flag = 1){
        for(var j = 0; j < i; j++){
            if(arr[i] == arr[j]){
                flag = 0;
            }  
        }
        flag?newArr.push(arr[i]):'';
    }
    alert(newArr);
})([1, 1, 22, 3, 4, 55, 66]);

window.location.search() 返回的是什么？

查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
        返回值：?ver=1.0&id=timlq 也就是问号后面的！

window.location.reload() 作用？

刷新当前页面

阻止冒泡函数

function stopPropagation(e) {  
    e = e || window.event;  
    if(e.stopPropagation) { //W3C阻止冒泡方法  
        e.stopPropagation();  
    } else {  
        e.cancelBubble = true; //IE阻止冒泡方法  
    }  
}  
document.getElementById('need_hide').onclick = function(e) {  
    stopPropagation(e);  
}

什么是闭包？ 写一个简单的闭包？

闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

function outer(){
    var num = 1;
    function inner(){
        var n = 2;
        alert(n + num);
    }
    return inner;
}
outer()();

看题做答

function f1(){
    var tmp = 1;
    this.x = 3;
    console.log(tmp);    //A
    console.log(this.x)；     //B
}
var obj = new f1(); //1
console.log(obj.x)     //2
console.log(f1());        //3

分析：
这道题让我重新认识了对象和函数，首先看代码（1），这里实例话化了 f1这个类。相当于执行了 f1函数。所以这个时候 A 会输出 1， 而 B 这个时候的 this 代表的是 实例化的当前对象 obj B 输出 3.。 代码（2）毋庸置疑会输出 3， 重点 代码（3）首先这里将不再是一个类，它只是一个函数。那么 A输出 1， B呢？这里的this 代表的其实就是window对象，那么this.x 就是一个全局变量 相当于在外部 的一个全局变量。所以 B 输出 3。最后代码由于没有返回值那么一个函数如果没返回值的话，将会返回 underfined ，所以答案就是 ： 1， 3， 3， 1， 3， underfined 。

关于settime的练习

var a = 6;
setTimeout(function () {    
    var a = 666;
    alert(a);      // 输出666，
}, 1000);
a = 66;

因为var a = 666;定义了局部变量a，并且赋值为666，根据变量作用域链，全局变量处在作用域末端，优先访问了局部变量，从而覆盖了全局变量 。

var a = 6;
setTimeout(function () {    
    alert(a);      // 输出undefined 
    var a = 666;
}, 1000);
a = 66;

因为var a = 666;定义了局部变量a，同样覆盖了全局变量，但是在alert(a);之前a并未赋值，所以输出undefined。

var a = 6; 
setTimeout(function(){
    alert(a);
    var a = 66; 
}, 1000);
a = 666; 
alert(a); 
// 666, undefined;

记住： 异步处理，一切OK 声明提前

计算

function setN(obj){
    obj.name='屌丝';
    obj = new Object(); 
    obj.name = '腐女';
};
var per = new Object();
setN(per);
alert(per.name);  //屌丝 内部

JS的继承性

window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
    alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red this-window对象
sayColor.call(window); //red
sayColor.call(o); //blue

加减运算

alert('5'+3); //53 string
alert('5'+'3'); //53 string
alert('5'-3); //2 number
alert('5'-'3'); //2 number

什么是同源策略

同协议、端口、域名的安全策略，由王景公司提出来的安全协议！

call和applay的区别是什么

参数形式不同，call(obj, pra, pra)后面是单个参数。applay(obj, [args])后面是数组。
详情

计算字符串字节数

new function(s){ 
     if(!arguments.length||!s) return null;  
     if(""==s) return 0;     
     var l=0;
     for(var i=0;i<s.length;i++){        
         if(s.charCodeAt(i)>255) l+=2; else l+=1;  //charCodeAt()得到的是unCode码   
     }     //汉字的unCode码大于 255bit 就是两个字节
     alert(l); 
}("hello world!");

检测变量类型

	function checkStr(str){
        typeof str == 'string'? alert('true'):alert('false');
    }
    checkStr('leipeng');

如何在HTML中添加事件，几种方法？

1、标签之中直接添加 onclick="fun()";

2、JS添加 Eobj.onclick = method;

3、现代事件  IE： obj.attachEvent('onclick', method)；
               FF: obj.addEventListener('click', method, false);

BOM对象有哪些，列举window对象？

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2、document对象，文档对象；

3、location对象，浏览器当前URL信息；

4、navigator对象，浏览器本身信息；

5、screen对象，客户端屏幕信息；

6、history对象，浏览器访问历史信息；

请问代码实现 outerHTML

//说明：outerHTML其实就是innerHTML再加上本身；

Object.prototype.outerHTML = function(){
        var innerCon = this.innerHTML, //获得里面的内容
            outerCon = this.appendChild(innerCon); //添加到里面
        alert(outerCon); 
    }

演示代码：

 <!doctype html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div id="outer">
       hello
    </div>
  <script>
    Object.prototype.outerHTML = function(){
    var innerCon = this.innerHTML, //获得里面的内容
    outerCon = this.appendChild(innerCon); //添加到里面
    alert(outerCon); 
      }
    function $(id){
   return document.getElementById(id);
   }
   alert($('outer').innerHTML);
   alert($('outer').outerHTML);
  </script>
 </body>
 </html>

typeof 的返回类型有哪些

alert(typeof [1, 2]); //object

alert(typeof 'leipeng'); //string

var i = true; 
alert(typeof i); //boolean

alert(typeof 1); //number

var a; 
alert(typeof a); //undefined

function a(){;};
alert(typeof a) //function

简述link和import的区别

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

window.onload 和 document.ready的区别

load要等到图片和包含的文件都加在进来之后执行；
ready是不包含图片和非文字文件的文档结构准备好就执行；

已知数组var stringArray = ["This”, "is”, "Baidu”, "Campus”]，Alert出”This is Baidu Campus”。

答案：alert(stringArray.join(""))

已知有字符串foo=“get-element-by-id”,写一个function将其转化成驼峰表示法"getElementById"。

function combo(msg){
  var arr = msg.split("-");
  var len = arr.length;  //将arr.length存储在一个局部变量可以提高for循环效率
  for(var i=1;i<len;i++){
    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
  }
  msg=arr.join("");
  return msg;
}  

怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。