一、css中position有几种,分别是什么?
absolute、relative、fixed、static
1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
二、Div居中的几种方式?
1、
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
2、
body{
text-align:center;
}
3、
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
4、
div{display: inline-block;}
div {display:inline;}
三、div并排同行显示
1、适合div和ul等其他element
div {float:left;}
2、适合div和ul等其他element
div {display: inline;}
四、js定义一个class
1、 function Cat() { this.name = "大毛"; } var cat1 = new Cat(); alert(cat1.name); // 大毛 2、 Cat.prototype.makeSound = function(){ alert("喵喵喵"); } 3、 var Cat = { name: "大毛", makeSound: function(){ alert("喵喵喵"); } }; var cat1 = Object.create(Cat); alert(cat1.name); // 大毛 cat1.makeSound(); // 喵喵喵 4、 var Cat = { createNew: function(){ var cat = {}; cat.name = "大毛"; cat.makeSound = function(){ alert("喵喵喵"); }; return cat; } }; var cat1 = Cat.createNew(); cat1.makeSound(); // 喵喵喵
五、js闭包作用
function f1(){ n=999; // 定义一个闭包 function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999闭包就是能够读取其他函数内部变量的函数。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
六、jQuery链表原理及实现
如果我们这样写$('#id').find('.className'),那程序只这样执行 的,第一次init的时候执行一步getElementById,就return了,接着执行 find('.className',divDocument),divDocument就是我们第一次选择的是div标签,如果document下有很 多dom对象的时候,这次只遍历divDocument是不是少了很多次,而且在第一次选择id的速度也要比遍历快的多。
七、bootstrap三角形的绘制
.dropdown-menu::before {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #CCC;
position: absolute;
top: -7px;
left: 9px;
}
.dropdown-menu::after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
position: absolute;
top: -6px;
left: 9px;
}
八、Css的hack
标记 | IE6 | IE7 | IE8 | FF | Opera | Sarari |
---|---|---|---|---|---|---|
[*+><] | √ | √ | X | X | X | X |
_ | √ | X | X | X | X | X |
\9 | √ | √ | √ | X | X | X |
\0 | X | X | √ | X | √ | X |
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} | X | X | X | X | X | √ |
.bb , x:-moz-any-link, x:default | X | √ | X | √(ff3.5及以下) | X | X |
@-moz-document url-prefix(){.bb{}} | X | X | X | √ | X | X |
@media all and (min-width: 0px){.bb {}} | X | X | X | √ | √ | √ |
* +html .bb {} | X | √ | X | X | X | X |
游览器内核 | Trident | Trident | Trident | Gecko | Presto | WebKit |
div{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@-moz-document url-prefix(){div{background-color:#00ff00;}}/* 仅firefox 识别 */
* +html div{background-color:#a200ff;}/* 仅IE7 识别 */
@media screen and (-webkit-min-device-pixel-ratio:0){div{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
@media all and (min-width: 0px){ div{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 仅 Opera 有效 */ }{}
九、css伪类选择器
http://www.w3school.com.cn/cssref/css_selectors.asp
十、css多元素的组合选择器
选择器 | 描述 | CSS版本 |
E,F | 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号隔开 | |
E F | 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 | |
E>F | 子元素选择器,匹配所有E元素的儿子元素F | |
E+F | 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F | |
E~F | 匹配任何E标签之后的同级F标签 | 3 |
十一、js==或===的区别
1. ==会把比较的二者进行类型转换:
如:0 == false; // true, 会把0转成bool值进行比较
1 == true; // true, 同样把1转成bool值再和true进行比较
2. ===是不会把比较的二者进行类型转换,是string就是string,是number就是number
如: 0 === false; // false, 因为0是number,false是boolean,两者就肯定不相等
1 === true; // false
十二、js对象非空判断
var exp = null; if (!exp && typeof(exp)!="undefined" && exp!=0) { alert("is null"); }