小白今天收到通知去面试，有点害怕。嗯~后来做了面试题后发现自己是个大白~下面这些题目是自己面试完后努力记住的一些题目，里边包含了两家公司的题目，然后自己在网上搜索了答案。
1、标准css盒子模型
标准的盒子模型：
Margin（外边距、边距）：透明不可见；
Border（边框）：可见，可以添加样式；
Padding（填充、内边距）：透明不可见;
Content（内容）：显示文本和图像
元素的宽度：width+2*border+2*padding+2*margin;
元素的高度：height+2*border+2*padding+2*margin;
大多数浏览器都是标准的盒子模型，但是IE8以及更早以前版本是使用非标准盒子模型，它的width已经包括了border、padding和内容宽度，解决这个问题的方法是在html页面声明<DOCTYPR html>即可。
2、Title和h1的区别
title是在<head>标签中出现的，给页面定一个名字，即是整个页面的名字。h1是在<body>中出现的，给文本之类的定义一个标题。
<b>和<strong>的区别
b是（Bold）加粗的简写，例如我把一段文字用<b>加粗了，我的意思是告诉浏览器给我加粗显示这段文字，只是加粗，没有其他作用了。
<strong>是强调的意思，我们用这个标记向浏览器发送强调某段文字的消息。
3、<i>和<em>的区别
同样，I是Italic(斜体)，而em是emphasize(强调)。
所以说：I是告诉浏览器我应该以何种格式显示文字，em告诉浏览器这些文字有怎么样的重要性。
b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用，甚至是反对使用的，因为认为他们只是“表现”粗体和斜体，而没有任何“语义”。更多的用 strong 和 em 标签代替。
4、bgcolor是什么属性
bgcolor是HTML中标签的背景颜色属性，而background是CSS中的属性，
HTML5 不支持 <table> bgcolor 属性。请使用 CSS 代替。
在 HTML 4.01 中，<table> 的 bgcolor 属性 已废弃。
5、左右两个单元格是有内容的，现在要合并这两个单元格，合并后单元格内容发生怎样变化？
内容仍然保留（这个是自己做的答案，没错吧？！）
有colspan
没有clospan
结果一样：
6、说说IE和标准浏览器的兼容办法
（一）html部分
1.H5新标签在IE9以下的浏览器识别
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
2.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0
（二）CSS样式的兼容性
1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同
IE的条件注释hack：
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍
解决办法：display:block;
3.IE6下图片的下方有空隙
解决方法：给img设置display:block;
4.IE6下两个float之间会有个3px的bug
解决办法：给右边的元素也设置float:left;
5.IE6下没有min-width的概念，其默认的width就是min-width
6.IE6下在使用margin:0 auto;无法使其居中
解决办法：为其父容器设置text-align:center
7.被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样式，
":link": a标签还未被访问的状态；
":visited": a标签已被访问过的状态；
":hover": 鼠标悬停在a标签上的状态；
":active": a标签被鼠标按着时的状态；
8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序
9.IE6下无法设置1px的行高，原因是由其默认行高引起的
解决办法：为期设置overflow:hidden;或者line-height:1px;
（三）JavaScript的兼容性
1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。
比如：var year= new Date().getYear();
5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
其他浏览器：parentNode parentNode.childNodes
IE：parentElement parentElement.children
7、写出几种解决IE6bug的方法。
a、双边距BUG：float引起的，使用display:inline（在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说，在与浮动同方向的空白边会加倍，解决方法是为这个div的css中添加：display:inline; 这样就可避免双倍边距bug。）
b、3像素问题：float引起的，使用display：inline -3px;（当使用float浮动容器后，在IE6下会产生3px的空隙，因为是确切的3px，所以，用“暴力破解”吧，比如.left _margin-right:-3px;，还有一种方法是也设置float HTML：
<div class="left">在ie6下的显示状态</div>
<div class="right">在ie6下的显示状态</div>
<p> </p><p>在ie6浏览状态下，我们看到。绿色div与蓝色
div中间出现了一条空隙。这就是ie6下3像素bug问题。</p> 结果： ）
超链接hover：点击后失效，使用正确的书写顺序 link visited hover active
IE z-index问题：给父级添加position:relative
Png透明：使用js代码改
Min-height：最小高度！important解决
select在IE6下遮盖：使用iframe嵌套
为什么没有办法定义1px左右的高度容器：IE默认的行高造成的，使用overflow:hidden; zoom:0.08; line-height:1px;
当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
在父窗口加上overflow：auto； _zoom：1 ；这两个样式属性，
overflow：auto是让父容器来自适应内部容器的高度，
_zoom：1；是为了兼容IE6而使用的CSS HACK
IE6中奇数宽高的bug
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改为偶数
IE6下为什么图片下方有空隙产生
解决这个bug的方法也有很多，可以是改变HTML的排版，或者定义img为display：block；或者定义vertical-align属性值为vertical-align：top | bottom | middle | text-bottom还可以设置父容器的字体大小为零，font-size:0
IE6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19px。例如：
.c{background-color:#f00; height:2px; }
<div class="c"></div>
如果不让它默认为19px。而是0px的话
解决方法有3种
1）、css里面加上overflow：hidden
2）、div里面加上注释<div class="c"><!--></div>
3）、css里面加上line-height：0；然后div里面加上#nbsp；<div class="c"> </div>(#换成&)
如何用css分别单独定义IE6、7、8的width属性
所有浏览器通用：height：100px
IE6专用：_height:100px;
IE6专用：*height：100px;
IE7专用：*+height：100px
IE7、FF共用：height：100px ！important；
css中哪些属性可以同父元素继承
继承：文本类的均可继承，列表元素可继承
8、你认识的行内元素有哪些？块元素呢？
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
10、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 属性的值。 |
11、前端框架有哪些？
Vue.js、node.js、bootstrap、Angular.js、jquery等等
12、Node.js通常用于什么？
它既是开发平台, 也是运行环境, 也是个新的语言...它本身是基于google的javascript v8引擎开发的, 因此在编写基于它的代码的时候使用javascript语言. 但是又不同于传统概念的javascript...它的服务端功能以及部分客户端功能必须在服务端运行, 所以它实际上是一种在服务端的开发+运行的javascript语言. 有一点类似于Perl + PHP或者Python的概念. 它本身可以作为HTTP Server, 也可以当作TCP Server用.
13、圆角边框怎么表示？
14、Angluar.js是做什么的？（不知道）
AngularJS的官方文档是这样介绍它的。
1、完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。
2、AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。
3、AngularJS的开发团队将其描述为一种构建动态Web应用的结构化框架。
4、AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如：
解耦应用逻辑、数据模型和视图；
Ajax服务；
依赖注入；
浏览历史（使书签和前进、后退按钮能够像在普通Web应用中一样工作）；
测试；
15、你对前端开发的理解是？
16、逻辑思考题：有一条不均匀的绳子，从头烧到尾需要一个小时，现在有若干条同样的绳子，请问用什么方法可以使计时达到一小时十五分？
5217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
