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 条评论
登录 后参与评论

相关文章

来自专栏前端儿

JS设置CSS样式的几种方式

如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] =...

2882
来自专栏Golang语言社区

go语言实现文件分割的方法

import ( // "bufio" "flag" "fmt" "io" "os" ) import "strconv" var infile *s...

3.2K7
来自专栏Modeng的专栏

Vue2.5笔记:Class与Style几种绑定用法

在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了...

1581
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1510
来自专栏九彩拼盘的叨叨叨

学习前端 第5周 第4天

913
来自专栏前端知识分享

第79天:jQuery事件总结(二)

       上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

1142
来自专栏一枝花算不算浪漫

[Java面试九]脚本语言知识总结.

40013
来自专栏偏前端工程师的驿站

CSS魔法堂:选择器及其优先级

一、前言                               首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. im...

2316
来自专栏deepcc

css实现强制不换行/自动换行/强制换行

4438
来自专栏用户2442861的专栏

CSS基础(三):选择器

复合选择器, 由两个选择器直接构成,第一个必须是元素选择器,第二个必须是类选择器和ID选择器,这两个选择器之间不能有空格。

631

扫码关注云+社区

领取腾讯云代金券