一:先来看道js笔试题
貌似我写错了,把参数误漏了。囧
var x=1;
var y=1;
method(8);
alert(x+y);-后输出5
function method(y)
{
x+=3; x为全局变量
y+=3; 参数y,这里仅仅是局部变量
alert(x+y);--先输出15
}
考察知识点:函数声明的方式,对于这种,先调用后声明的形式,在js世不报错的,但是如果是匿名函数将会报错,原因是匿名函数没有给出具体
的函数名js无法识别。在js里,声明有三种。
方式一:
var text;
var text=4;
这种方式,声明的是全局变量,如果包裹在function里面,则为局部变量。
方式二:
text=4;
这种隐式的声明一个变量,没有给var,表示为全局变量,即使在function里面,也为全局变量。
方式三:
window.text;
window.text=4;
这种方式,经常用到一个匿名函数执行后将一些函数公开到全局。
全局变量的好处:可以减少变量的个数,减少由于实际参数和形式参数的数据传递带来的时间消耗。
坏处:占用内存单元,破坏了函数封装性,代码可读性降低。
二:写了一道编程题,比较简单,直接贴码。忘记了,大概是这样的
var oUl=document.getElementById("list");
var oLi=oUl.getElementsByTagName("li");
for(var i=0;i<oLi.length;i++)
{
oLi[i].index=i;
oLi[i].οnclick=function()
{
alert(this.index);
}
}
三:css中布局宽度,margin,padding的真实高度。
这个说实话,之前真没注意,好细节的说啊!
先来看看代码,:
<div class="test1" id="test1">test1</div>
<div class="test2" id="test2">
<div class="test2_son">test2_son</div>
</div>
css部分:
body{
margin:0px;
}
.test1{
width:150px;
height:150px;
border:6px solid red;
}
.test2{
margin-top:40px;
padding-top:40px;
width:150px;
height:150px;
border:6px solid gray;
}
.test2_son{
width:80px;
height:50px;
border:12px solid blue;
}
那么如何检测该div的真实高度和宽度呢?先来看下盒模型的分布图
js代码获取它的实际宽度和高度如下所示:
var test1=document.getElementById("test1");
alert(test1.offsetHeight); --弹出162px=div实际高度+border-top的高度+border-bottom的高度
var test2=document.getElementById("test2");
alert(test2.offsetHeight); --弹出202px=div实际高度+border-top的高度+border-bottom的高度+padding的高度
所以,div的实际高度和宽度,主要包括padding+border+本身的div高/宽。
注:margin可为负数,padding不能为负数
之后老师抛起box-sizing的尺寸大小问题,这个我不是很清楚,回来查资料,这里总结一下。
四:box-sizing的问题
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。包括border-box|content-box(默认)|padding-box
先来看下代码,比较一下它们之间的区别:
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
css部分:
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: yellow;
}
实现效果如下:
现在我们来看下区别:
上面的三张图,第一张width=150px;第二张为110px;第三张为100px,都包括border的宽度10px在内。
content-box:border和padding都计算入width之内,即width=100+20*2+10=150px;
会发现一个很奇怪的问题,此时的width明明只有100px.为什么在浏览器屏幕上显示的变为了140px?
其实是因为padding的作用,它的width包括padding,所以我们看到的比100px大,而在正常的非box-sizing里面,即使设置了padding值
它依然只能显示出100px.
padding-box:border计算入width内,即屏幕上显示的width为:100px+5*2=110px;
border-box:border和padding的值都不计算在width之内.即显示width=100px;
ie8+浏览器支持content-box和border-box;ff则支持全部三个值。
这里,我们在js代码里面,看一下它的实际宽度,也是相对应的。
var contentBox=document.getElementById("content-box");
var paddingBox=document.getElementById("padding-box");
var borderBox=document.getElementById("border-box");
alert(contentBox.offsetWidth); --弹出150px
alert(paddingBox.offsetWidth); --弹出110px
alert(borderBox.offsetWidth); --弹出100px
简单来说,box-sizing与我们平时的盒模型最大的区别就是,在浏览器屏幕上显示的宽度不一样。
五:git中涉及到的一些命令
列举了一些经常用的命令,但有几个不常用的搞忘记了,关于git常见命令可参考廖雪峰老师的文档。
http://www.liaoxuefeng.com/的git教程。
六:关于块级元素和行级元素
块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table (p是块级元素)
<div class="div1">
<div class="div2">4444</div>
<span class="span">222</span>
</div>
css部分:
.div1{border:1px solid red;}
.div2{border:1px solid blue;}
.span{border:1px solid green;}
实现效果如下:
可以看出,此时块级元素div独占一行,而行级元素span,在下面一行,只占据本身的宽度。
如果加上display:inline-block,则可使块级元素和行级元素在同一行。
.div1{border:1px solid red;}
.div2{border:1px solid blue;display:inline-block}
.span{border:1px solid green;}
效果如下:
:如何使同一个div中的图片和input框在同一行上?
<div class="vote" style="border:1px solid red;"> <input type="text" style="height:0.5rem;width: 1.5rem;line-height: 0.7rem;border: 0.02rem solid #a5de37;margin-left: 0.7rem;padding-left: 0.1rem;
vertical-align: middle;" name="verity" placeholder="请输入验证码"> //这里设置input和img和button都为vertical-align:middle即可 <img style="width: 1rem;height: 0.5rem;border:1px solid red;
vertical-align: middle;margin-left:10px;margin-right:10px;" src="/index.php/Sheying/random"> <button id="vote" style="cursor:no-drop;height:0.54rem;width:1.5rem;
vertical-align: middle;" data-id="1">已投票</button> </div>
2:了解vertical-align的属性?
包括Baseline | middle |bottom|Text-bottom|Text-top|sub|bottom
Baseline:图片(内含文字)和文字以文字基准对准对齐
middle:以文字最下方为基线对齐
sub和bottom:指上标和小标