笔试笔记（八）

1、链接： https://www.nowcoder.com/questionTerminal/d9a712c52333452abaebeee6f0a56fd5
来源：牛客网

以下关于盒子模型描述正确的是：A

• 标准盒子模型中：盒子的总宽度 ＝ 左右margin + 左右border + 左右padding + width

• IE盒子模型中：盒子总宽度 ＝ 左右margin + 左右border + width

• 标准盒子模型中：盒子的总宽度 ＝ 左右margin + 左右border + width

• IE盒子模型中：盒子总宽度 ＝ width

标准W3C模型：宽度 = margin*2 + border*2 + padding*2 + width

IE模型： 宽度 = margin*2 + width

2、

head 标签中必不少的是（ ） C

• <meta>

• <link>

• <title>

• <script>

3、链接： https://www.nowcoder.com/questionTerminal/3ad01cd09fb64fe596c3a8051001a6ba
来源：牛客网

什么是 Web Worker ？ B

• 运行在后台的JavaScript程序，会影响页面的性能。

• 运行在后台的JavaScript程序，不会影响页面的性能。

• 都不正确

• 运行在后台的CSS程序，不会影响页面的性能。

链接：https://www.nowcoder.com/questionTerminal/3ad01cd09fb64fe596c3a8051001a6ba
来源：牛客网

WebWorker：

通过使用Web Worker，可以让我们在浏览器后台运行javascript，而不占用浏览器自身进程。

Web Worker是运行在后台的JavaScript，不会影响页面的性能。

当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本完成为止。

web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能，可以继续做其他事情：点击、选取内容等，而此时 web worker 在后台运行。

4、 input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。B

• T

• F

链接：https://www.nowcoder.com/questionTerminal/6d4da50b5c90416b8d8ab2286d7a739c
来源：牛客网

在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。

表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；

非表单元素包括：连接（a），div,table,span等。

所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

有窗口元素包括：select元素，object元素，以及frames元素等等。

无窗口元素：大部分链接： https://www.nowcoder.com/questionTerminal/8e0bd42cdecd493f92ec2ca21f903b4d
来源：牛客网

向  .form-control 添加前缀或后缀元素的步骤如下：

• 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
• 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
• 把该 <span> 放置在 <input> 元素的前面或者后面。

html元素都是无窗口元素。

5、

Bootstrap 框架的网格系统工作原理如下：

1  、数据行  (.row)  必须包含在容器（  .container  ）中，以便为其赋予合适的对齐方式和内距  (padding)  。

    如：  <div class="  container  ">

       <div class="  row  "></div>

       </div>

2  、在行  (.row)  中可以添加列  (.column)  ，但列数之和不能超过平分的总列数，比如  12  。

    如：  <div class="container">

            <div class="row">

            <div class="col-md-  4  "></div>

            <div class="col-md-  8  "></div>

3  、具体内容应当放置在列容器（  column  ）之内，而且只有列（  column  ）才可以作为行容器  (.row)  的直接子元素

4  、通过设置内距（  padding  ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（  margin  ）来抵消内距 (padding)  的影响

详：  http://www.imooc.com/code/2325

关于列的嵌套

Bootstrap  框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（  row  ）容器，然后在这个行容器中插入列。但在列容器中的行容器（  row  ），宽度为  100%  时，就是当前外部列的宽度。

6、链接：https://www.nowcoder.com/questionTerminal/562c9ee3cfcd4c9b9eb9d1dbc63f38ad
来源：牛客网

如何获取下面表单 select

<form name="a">
<select name="a" size="1" id=”obj”>
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</form> 域的选择部分的文本？() A

• obj.options[obj.selectedIndex].text

• obj.options[obj.selectedIndex].value

• obj. value

• obj.text

链接： https://www.nowcoder.com/questionTerminal/562c9ee3cfcd4c9b9eb9d1dbc63f38ad
来源：牛客网

A，

<form name="a">
<select name="a" size="1" id=”obj”>
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</form>

当前默认选中的是第一个，

console.log( obj.options[obj.selectedIndex].text ) 输出的是1,

console.log( obj.options[obj.selectedIndex].value ) 输出的是a

7、下面有关CSS中link和@import的区别，描述错误的是？D

• link属于XHTML标签，而@import完全是CSS提供的一种方式

• 当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载

• link在支持CSS的浏览器上都支持而@import只在5.0以上的版本有效

• 当使用javascript控制dom去改变样式的时候，只能使用@import方式

链接： https://www.nowcoder.com/questionTerminal/a00808e5e6374d15a4137d17f73e01ba
来源：牛客网

1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。 
2，@import 是css2里面的，所以古老的ie5不支持。 
3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css 

8、

对于li这个节点，下列哪个CSS选择器的优先级最高？D

• li#app

• li.cnt

• li.cnt:hover

• #app.cnt

链接：https://www.nowcoder.com/questionTerminal/30b5db91357140fba4a68fefdd255d52
来源：牛客网

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如、>、+,权值为0000。

9、下列辅助类的说法错误的是？C

• <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><br>可以用来表示一个关闭按钮

• <span class="caret"></span>可以用来表示一个三角符号

• navbar可使用pull-left类来定义

• navbar可使用navbar-left类来定义

10、 在CSS3中，以下哪个IE浏览器（Trident内核）的私有属性前缀？ （ ）D

• –Webkit

• –trident

• –ie

• –ms

主流浏览器内核私有属性css前缀：mozilla内核 (firefox,flock等)     -moz
                                                      webkit内核(safari,chrome等)   -webkit
                                                      opera内核(opera浏览器)         -o
                                                      trident内核(ie浏览器)               -ms

11、<img>标签没有闭合，应该是<img src="" />

12、下列说法正确的是 AC

• html5标准的链接默认都是带下划线的

• bootstrap链接默认都是带下划线

• bootstrap链接只有在hover状态下才带下划线

• bootstrap链接从不会带下划线

13、

下列哪些是块级元素（）BCDEF

• input

• ul

• hr

• li

• div

• form

14、iframe的使用场景有？ABCD

• 与第三方域名下的页面共享cookie

• 上传图片，避免当前页刷新

• 左边固定右边自适应的布局

• 资源加载

链接： https://www.nowcoder.com/questionTerminal/a7393802e13045d0adff00cf2c728cf5
来源：牛客网

iframe可用在以下几个场景中：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。

4： 在上传图片时，不用flash实现无刷新。

5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

15、链接： https://www.nowcoder.com/questionTerminal/8e0bd42cdecd493f92ec2ca21f903b4d
来源：牛客网

在bootstrap中为了在input两侧添加额外元素，以下说法正确的是ABD

• 使用input-group来封装控件

• 使用input-group-addon来添加前置元素

• 使用input-group-tailon来添加后置元素

• 必须为input添加form-control类

链接：https://www.nowcoder.com/questionTerminal/8e0bd42cdecd493f92ec2ca21f903b4d
来源：牛客网

向  .form-control 添加前缀或后缀元素的步骤如下：

• 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
• 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
• 把该 <span> 放置在 <input> 元素的前面或者后面。