前端3-31-1：display、overflow、target、input、position、call与apply属性

1、下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度。

A、display:inline
B、display:none
C、display:block
D、display:inherit

【知识点：display属性】

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

2、css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。

A、True

B、False

【知识点：css-overflow属性】

值	描述
scroll	必须出现滚动条
auto	子元素内容>父元素时，出现滚动条
visible	默认值，溢出的内容出现在父元素之外
hidden	溢出的内容隐藏
inherit	继承父元素的 overflow 属性的值

 

 

 

 

 

 

3、<a>标签下target属性

在html中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。

如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架<frame>或者窗口，在target中还存在四个保留的属性值如下：

【知识点：<a>-target属性 】

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认值，在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

 

4、下列js可以让一个input的背景颜色变成红色的是？

A、inputElement.style.backgroundColor = 'red';

B、inputElement.backgroundColor = 'red';

C、inputElement.style.backgroundColor = '#0000';

D、inputElement.backgroundColor = '#0000';

【知识点：js-input 颜色设置】

一、先看题：

用js让一个input的背景颜色变成红色。

二、思路：

1. 获取该元素
2. 通过该元素拥有的属性或方法来改变元素的样式。

三、细节：

1. 获取元素可以借助document.getElementById()/document.getElementsByTagName()等若干方法，也可以利用层级关系（父子关系、兄弟关系等）。而这一点题目已经直接略过了，它直接给出了该元素的引用名称inputElement。
2. 通过js来改变元素样式的两个最常见的API为：style、className。使用style接口一次只能改变一个样式，而使用className则可以同时改变多个样式，当然前提是已经用css定义该类名的相关样式。
3. backgroundColor? background-color?
   简单说一下：在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。而使用方括号表示法，"-"被理解为字符串中的内容，该字符串能被正确解析。
   eg:

   inputElement.style.backgroundColor = 'red'; // 这是没问题的
   inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...
   inputElement.style["background-color"] = 'red'; // 这也是可以的

    

4. 表示红色有若干种方法:
   • 颜色名：red
   • 百分数：rgb(100%, 0%, 0%)
   • 数值：rgb(255, 0, 0)
   • 十六进制：#FF0000
   • 简写的十六进制：#F00

 

5、下述有关css属性position的属性值的描述，说法错误的是？

A、static：没有定位，元素出现在正常的流中

B、fixed：生成绝对定位的元素，相对于父元素进行定位

C、relative：生成相对定位的元素，相对于元素本身正常位置进行定位。

D、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

【知识点：css-position属性】

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

详见：【知识点：css-position属性】

6、下面有关JavaScript中 call和apply的描述，错误的是？

A、call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

B、两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

C、apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

D、call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象

【知识点：js-call&apply】

1.相同：两个产生的作用是完全一样

2.区别：两个接收参数的方式不同

对于call（），第一个参数是运行函数的作用域，其余参数都直接传递给函数即传递给函数的参数必须逐个列举出来。

对于apply（），第一个参数是 运行函数的作用域 ，另一个参数是参数数组,可以是Array实例或arguments对象。

function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34