前端工程师面试题汇总-3(0711)

Posted beimo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端工程师面试题汇总-3(0711)相关的知识,希望对你有一定的参考价值。

1请详细说明position定位的值有什么区别

 

static:position属性 默认值

relative:相对定位,定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

absolute:绝对定位 定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置

fixed(固定定位) 生成绝对定位的元素,相对于浏览器窗口进行定位, 

 

2写出你知道的可以继承的css属性,你怎么理解css属性的继承和层叠?

可以继承的常见属性有:
font-family,font-size,font-style,font-weight,font, line-height,text-align,text-indent,color

css属性值的计算过程:

1.确定声明值:参考样式表中没有冲突的声明,作为CSS属性值

2.层叠冲突:对样式表有冲突声明使用层叠规则,确定CSS属性值

      > 比较重要性

      > 比较特殊性

      > 比较代码顺序 后来者居上

3.使用继承:对仍然没有值得属性,若可以继承,则继承父元素的值

4.使用默认值:对仍然没有值得属性,使用默认值

 

3你知道哪些CSS的引入方式,分别是什么

  外部样式表: <link rel="stylesheet" type="text/css" href="mystyle.css">

  内部样式表:<style>  hr {color:sienna;}</style>

  内联样式 <p style="color:sienna;margin-left:20px">这是一个内联样式表。</p>

 

4谈谈你对BFC的理解

 

BFC: 块级格式上下文
CSS把每个HTML元素当做一个矩形盒子渲染,每个盒子都有自己的渲染规则
BFC : 一块独立的渲染区域,它规定了该区域中,常规流块盒的布局
不同的BFC区域,他们进行渲染时,互不干扰
创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不影响到外部

 

5如何居中一个固定定位元素

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <style>
 6         .center {
 7             position: fixed;
 8             width: 500px;
 9             height: 500px;
10             border: 1px solid red;
11             left: 50%;
12             margin-left: -251px;
13         }
14     </style>
15 
16 </head>
17 
18 <body>
19     <div class="center">
20         <div class="box1">box1</div>
21         <div class="box2">box2</div>
22     </div>
23 </body>
24 
25 </html>

 

6、用css、html编写一个两列布局的网页,要求右侧宽度为200px,左侧自动扩展? 

 

 1 <!DOCTYPE html>
 2 <html>
 3         <head>
 4                 <style type="text/css">
 5                         #left
 6                         {
 7                                 height:100px;
 8                                 margin-right:200px;
 9                                 background-color:green;
10                         }
11                         #right
12                         {
13                                 height:100px;
14                                 width:200px;
15                                 float:right;
16                                 background-color:red;
17                         }
18                 </style>
19         </head>
20         <body>
21                 <div id="right"></div>
22                 <div id="left"></div>
23         </body>
24 </html>

 

 

 

 

7、元素的title属性和alt属性有什么区别?

  title:标题,对链接起注释作用,

  alt: 对图片起注释作用 

8、如何在页面上实现一个圆形的可点击区域?

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <style>
 6         .disc {
 7             width: 100px;
 8             height: 100px;
 9             background-color: dimgray;
10             border-radius: 50%;
11             cursor: pointer;
12             position: absolute;
13             left: 50px;
14             top: 50px;
15             line-height: 100px;
16             text-align: center;
17             color: white;
18         }
19     </style>
20 
21 </head>
22 
23 <body>
24     <div class="disc">圆形可点击区域</div>
25 </body>
26 
27 </html>

 

 

 

9、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko

1、IE浏览器内核:Trident内核,也是俗称的IE内核;
2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
4、Safari浏览器内核:Webkit内核;
5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;

 

 

10、 你怎么来实现页面设计图,你认为前端应该如何高质量完成工作?

   首先划分成头部、body、脚部;。。。。。   *   
  实现效果图是最基本的工作,精确到2px;  
  与设计师,产品经理的沟通和项目的参与  
  做好的页面结构,页面重构和用户体验  
  处理hack,兼容、写出优美的代码格式  
  针对服务器的优化、拥抱 HTML5。
    命名规范,注释规范

 

以上是关于前端工程师面试题汇总-3(0711)的主要内容,如果未能解决你的问题,请参考以下文章

前端工程师面试题汇总-5

前端工程师面试题汇总-1

前端工程师面试题汇总-2

小猿圈web前端面试题汇总

一周热文和最新 JS 进阶面试题 #3

Web前端面试题目及答案汇总