专栏首页C/C++基础web前端开发初学者十问集锦(3)

web前端开发初学者十问集锦(3)

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 属性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux 命令(132)—— groupadd 命令

    groupadd 命令使用命令行上指定的值以及系统中的默认值创建一个新的组帐户。新组将根据需要被添加到系统文件中。

    Dabelv
  • 程序内存布局

    C/C++程序为编译后的二进制文件,运行时载入内存,运行时内存分布由代码段、初始化数据段、未初始化数据段、堆和栈构成,如果程序使用了内存映射文件(比如共享库、共...

    Dabelv
  • web前端开发初学者十问集锦(2)

    行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。

    Dabelv
  • 谈谈webpack2的一些事

    从v1迁移到v2 1. 配置类型 在webpack1的时候,主要是通过导出单个object来进行配置。例如下面的配置: // webpack1 导出方式 mod...

    糊糊糊糊糊了
  • 用webpack配置Riot Redux工程

    名词介绍 webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片Riot的tag文件等...

    IMWeb前端团队
  • 用webpack配置Riot Redux工程

    webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片Riot的tag文件等都作为模块...

    IMWeb前端团队
  • React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)

    本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包...

    前端人人
  • vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

    这几天,都遇到过有人问过相似的问题,就是用vue和webpack搭建目录的时候,怎么把单页面应用的配置改成多文件应用,或者是怎么把多文件应用的配置改成单文件应用...

    守候i
  • webpack入门

    前言:这两天在网上找了些视频和资料学习webpack,最后发现官网上的教程原来就写得很好,只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程,然后总结...

    Ewall
  • 金融资金盘网站服务器安全防护7个标准方法

    从总体来说,新标准规定针对服务器端安全防护的基本建设须要更为专业化与系统化,在解决不法攻击时,可对其“行为举动开展检测,对其终端设备特性(比如,终端设备标志、硬...

    网站安全专家

扫码关注云+社区

领取腾讯云代金券