1.css选择符及优先级算法
选择符有:行内样式、ID选择符、类、属性选择符、伪类、类型、伪类型选择符
而他们的优先级如何来测量?他们每一类都有一个数值来表示
行内样式为:1000
ID选择符为:100
类选择符为:10
类型选择符为:1
例子:
* { } 0
a:hover{ } 2
ul ol+li { } 3
ul ol li.red { } 13
<div style=”width:100px;”> 1000
div p { } 2
div p.content { } 12
div #div1 .left p { } 112
2.display属性值有哪些?属性值之间的差别?
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
- inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
- 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
3.position的属性值有哪些?各个属性值的定位原点有何不同?
- absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
- fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
- relative:生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
- static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- inherit:规定应该从父元素继承 position 属性的值。
4.纯css做一个10px底边的三角形
#san {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
}
5.js typeof返回的类型有哪些
alert(typeof true); //返回布尔值
alert(typeof 99); //返回nunber
alert(typeof "abc"); //返回string
alert(typeof function () {}); //返回function
alert(typeof null); //返回object
alert(typeof undefind); //返回undefined
alert(typeof Nan); //返回number
</script>
7、用JS编写一个函数,实现千位分隔符
// 方法一
function toThousands(num) {
var result = [ ], counter = 0;
num = (num || 0).toString().split('');
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result.unshift(num[i]);
if (!(counter % 3) && i != 0) { result.unshift(','); }
}
return result.join('');
}
方法一的执行过程就是把数字转换成字符串后,打散为数组,再从末尾开始,逐个把数组中的元素插入到新数组(result)的开头。每插入一个元素,counter就计一次数(加1),当counter为3的倍数时,就插入一个逗号,但是要注意开头(i为0时)不需要逗号。最后通过调用新数组的join方法得出结果。
// 方法二
function toThousands(num) {
var result = '', counter = 0;
num = (num || 0).toString();
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result = num.charAt(i) + result;
if (!(counter % 3) && i != 0) { result = ',' + result; }
}
return result;
}
方法二是方法一的改良版,不把字符串打散为数组,始终对字符串操作。
转载于http://www.jb51.net/article/61585.htm
8.css两栏布局,左边100px,右边自适应。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>左栏固定宽度,右栏自适应之负margin法</title>
<style type="text/css">
body{
margin: 0;
}
#container{
margin-left: 230px;
_zoom: 1;
/*兼容IE6下左栏消失问题*/
}
#nav{
float: left;
width: 230px;
height: 600px;
background: #ccc;
margin-left: -230px;
position: relative;
/*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
}
#main{
height: 600px;
background: #0099ff;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
左栏
</div>
<div id="main">
右栏
</div>
</div>
</body>
</html>
转载于http://www.clanfei.com/2013/08/1721.html
9.说说你对localStorage和sessionStorage的理解,相对于cookie有什么区别?
- localStorage- 没有时间限制的数据存储,第二天、第二周或下一年之后,数据依然可用。
- sessionStorage - 针对一个 session 的数据存储。当用户关闭浏览器窗口后,数据会被删除。
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
10.什么是优雅降级和渐进增强?