前端工程师面试题汇总-3（0711）
Posted beimo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端工程师面试题汇总-3（0711）相关的知识，希望对你有一定的参考价值。
1、请详细说明position定位的值有什么区别
static:
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）的主要内容，如果未能解决你的问题，请参考以下文章