1.div的height:100%没有效果,如何让元素的高度自动扩充为父元素的高度?
我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度,否则无效。
注意,对父元素显示设置宽度和高度也可以使用n%这种百分比的形式,前提还是如上描述的那样,父元素的父元素的高度和宽度要明确的设置。
2.relative定位bottom:0px;right:0px;没有效果?
relative定位中使用bottom:0px;right:0px;使元素定位于父元素的最下边或者最右面,没有效果是因为relative定位的参考对象是自己。bottom:0px;right:0px;也就没有变化。
如果你想让这个div #demo里的一个div #sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。
3.CSS样式<style>
标签在html文件中放置的位置?
现在编写网页都是内容与样式分开,推荐css单独的用一个文件保存,然后在html的<head>
标签中进行引用,如下所示:
<head>
<link type="text/css" href="/html/csstest.css" >
</head>
样式的声明可以在四个位置完成,其优先级依次为
1.内联样式(在 HTML 元素内部) 优先级最高;
2.内部样式表(一般位于 <head>
标签内部);
3.外部样式表;
4.浏览器缺省设置。
推荐统一使用外部样式表。但是在使用内部样式表的时候,style标签和script标签一样,可以放置在html文件中的anywhere,任何地方。
4.JavaScript如何获取html元素的宽度和高度?
第一种方法:如果宽和高是写在样式表中,则采用obj.offsetWidth;
第二种方法:如果宽和高是写在行内样式,比style="width:120px;"
,这种情况既可以采用obj.style.width能拿到宽度,也可以使用第一种方法。
因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。
注意:offsetWidth = width + padding + border ;
offsetHeight=height + padding + border。
下面可以参考下图,理解元素的各个属性:
假设 obj 为某个 HTML 控件。
obj.offsetTop 指obj距离父容器的上边距,整型,单位像素。
obj.offsetLeft 指 obj距离父容器的左边距,整型,单位像素。
obj.offsetWidth 指obj控件自身的宽度,整型,单位像素,由元素width + padding + border组成。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素,由元素height+ padding + border组成。
offsetWidth 与 style.width 的区别
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
5.如何获取html元素的样式,如内边距?
我们知道用document.getElementById(‘element’).style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,即内联样式。对于使用了内部样式表(位于 <head>
标签内部)和外部样式表,就拿不到我们要的信息了。
我们可以通过getComputedStyle与currentStyle获取元素样式。DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。
但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了,兼容性的写法如下:
return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;
6.JavaScript中有double类型吗?
javascript使用IEEE 754-2008 标准定义的64bit浮点格式存储number(包括整数和小数)。所以JavaScript中的所有数值类型都是double双精度浮点类型。
7.如何制作图片倒影?
使用css3 box-reflect设计图片倒影效果,参考代码如下:
<style type="text/css">
img {
height:250px;
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
效果如下图:
其中below表示倒影的位置位于下方,5px表示倒影距离图片的距离,-webkit-gradient表示渐变填充。
实测,在Chrome中有效果,在IE9以及Fire Fox中没有效果。
8.js(JavaScript)中单引号和双引号有什么区别?
一个Web大神告诉我说没什么区别,我实验了,还没发现有什么区别?
<!doctype html>
<script type="text/javascript">
var lv=4;
alert('"+lv+"\n');//单引号包含双引号
alert("'+lv+'\n");//双引号包含单引号
alert(''+lv+'\n');//单引号包含双引号
alert(""+lv+"\n");//双引号包含双引号
</script>
</html>
上面的代码输出至控制台如下图所示:
从上面的结果我们可以得出两个结论:
(1)js单引号和双引号基本上没有区别,只是在同时使用的时候,有些细节要注意上面的细节;
(2)js中支持字符串中包含变量,即”+var+”这种运算。
9.js无限循环定时器会执行吗?
这里涉及到window.setTimeOut和window.setInterval的异步性,以及js单线程的单线程问题。经常会出现在面试的过程中。
看一下如下代码:
var t = true;
window.setTimeout(function (){
t = false;
},1000);
while (t){}
alert('end');
请问alert会执行吗?
答案是死循环导致setTimeout不执行,也导致alert不执行。
js是单线程是对的,所以会先执行while(t){}再alert,但这个循环体是死循环,所以永远不会执行alert。
至于说为什么不执行setTimeout,是因为js的工作机制是:当线程中没有执行任何同步代码的前提下才会执行异步代码,setTimeout是异步代码,所以setTimeout只能等js空闲才会执行,但死循环是永远不会空闲的,所以setTimeout也永远不会执行。
简单的来说就是定时器时异步加载的,而js是单线程的,在声明一个定时器之后,这个定时器会暂时保存在任务队列中,当js的同步代码加载完毕之后再执行任务队列中异步的定时器。
声明多个定时器的情况下, 定时器会按照interval的大小放入任务队列,然后依次执行.如果interval相同,那就按照声明的先后顺序执行.
浏览器有一个内置的间隔,所以即使你设置interval为0,定时器也会间隔一段时间之后再执行。
10.CSS中默认定位,相对定位,绝对定位,固定定位的区别?
默认定位: position:static。就是没有定位,元素出现在正常的文档流中(忽略 top, bottom, left, right 或者 z-index 声明),会撑开父容器。
相对定位: position:relative。定位的参考对象是元素自己;且不脱离文档流,即默认定位所占用的位置还保留,会撑开父容器;
绝对定位: position:absolute。定位的参考对象是离自己最近的非static定位的父元素。脱离文档流,不会撑开父容器。
固定定位: position:fixed。生成绝对定位的元素,相对于浏览器窗口进行定位。脱离文档流,不会撑开父容器。
参考文献
[1]关于Div的宽度与高度的100%设定
[2]JS获取各种宽度、高度的简单介绍
[3]setTimeout的异步以及js是单线程的面试题.知乎.杨光
[4]CSS position 属性