您的位置：首页 > 职场人生

面试准备

2015-07-23 10:11 585 查看

作用域 js只有函数作用域没有块级作用域

<html>
<head>
<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
var b=document.getElementById("button"+i);
b.addEventListener("click",function(){ alert("Button"+i);},false);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

点击按钮都是button4 因为事件绑定之后 i=4

修改作用域：

1. with：

with(location){
var url=href+qs;
}

with讲location放到with语句的开始。

此时 href相当于location.href

2. catch 如同with try-catch时如果try出错会跳到catch 然后catch会获得错误信息 catch(exception)

3. eval

2.this call和apply

function getMax2(arr){
return Math.max.apply(null,arr);
}

获得数组最大值

Array.prototype.push.apply(arr1,arr2)

数组arr2的内容合到arr1后面

3.css position : absolute fixed relative(相对于元素的正常位置设置top等不影响相邻元素) static(默认的忽略left right等) float;

4. css display: none block(块级元素自带前后换行) inline(行级元素) inline-block(行内块该元素是inline 但是其内部元素是block) list-item(列表元素) table(块级table) inline-table(类似inline-block) 一些有关table的display inherit(继承父元素)

5. flex

6.bfc Block fomatting context BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

产生bfc的元素：

根元素

float属性不为none

position为absolute或fixed

display为inline-block,table-cell, table-caption, flex, inline-flex

overflow不为visible

一些例子：

自适应两栏布局（左边元素float 右边元素消除float）

.left {
width: 100px;
height: 150px;
float: left;
background: #f66;
}

.right{
height: 200px;
overflow:hidden;
background: #fcc;
}

清除内部浮动 (消除float来使父元素计算高度时包括float元素的高度)

.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}

.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}

防止垂直 margin 重叠（外加一个块包装并消除float）

.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
对应html:
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>

7.盒模型： width和height是最里面内容外面是padding 再外面 border 再外面 padding

box-sizing : box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box 还有inherit。

- content-box，border和padding不计算入width之内

- padding-box，padding计算入width内

- border-box，border和padding计算入width之内，其实就是怪异模式了~

8. 行

line-height:有5种：百分比(font-size*百分比，这个值会保留下来，被子元素继承) 长度（固定的px值） normal（保存1.2这个比例每个子元素的line-height都是子元素自身的font-size*1.2）纯数字（等同于normal） inherit

行间距： line-heght 减去 font-size 的一半当line-height小于font-size时会挤在一起

vertical-align: 设置垂直对齐

9. 换行： whitespace：处理空白字符值： pre(空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签) nowrap(不会换行遇到br才换) pre-wrap(保留空格正常换行) pre-line(合并空白符序列，但是保留换行符) word-break: normal 使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或连字符处换行。

10. transform: 应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。要加前缀不会影响相邻元素的布局

11. transition:

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

animation 与keyframe keyframe设置百分比动作 animation：

@keyframes 规定动画。

animation 所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name 规定 @keyframes 动画的名称。

animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function 规定动画的速度曲线。默认是 “ease”。

animation-delay 规定动画何时开始。默认是 0。

animation-iteration-count 规定动画被播放的次数。默认是 1。

animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。

animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

animation-fill-mode 规定对象动画时间之外的状态。

12. insertbefore 与 appendChild 添加元素前和后二者都可以移动元素位置

insertbefore可以设置第二个参数在目标元素前加如果为null 则在最后加

createelement创建节点

createAttribute() 来创建新的属性节点，并使用 setAttributeNode() 把该节点插入一个元素中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js css

相关文章推荐

新的分享

章节导航