日常整理小知识——前端面试

日常整理小知识——前端面试

innerHTML和value的区别

• innerHTML 只取一些文本标签里的内容，比如 div span p 等这里不能输入的标签里有内容。value是取一取输入框的值 比如 input textarea select 等等。

innerHTML和innerText的区别

• innerText 与 innerHtml 都是打印标签之间的文本信息
• innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent（只打印文本信息）
• innerHTML打印标签之间的内容，包括标签和文本信息，各浏览器都支持，但是高版本的浏览器会原样打印（连同标签文本一起打印出来）

简述一下src与href的区别？

• src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。

• src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。

<script src ='js.js'></script>

• 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

• href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href='common.css' rel='stylesheet'/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。

常见浏览器兼容性问题与解决方案？

(1) 浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

• 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
• 碰到频率:100%
• 解决方案：CSS里 *{margin:0;padding:0;}
• 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
  (2) 浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
• 问题症状:常见症状是IE6中后面的一块被顶到下一行
• 碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
• 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
• 备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
  (3) 浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
• 问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
• 碰到频率：60%
• 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
• 备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高
  (4) 浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
• 问题症状：IE6里的间距比超过设置的间距
  -碰到几率：20%
• 解决方案 ： 在display:block;后面加入display:inline;display:table;
• 备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
  (5) 浏览器兼容问题五：图片默认有间距
• 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
• 碰到几率：20%
• 解决方案：使用float属性为img布局
• 备注 ： 因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
  (6) 浏览器兼容问题六：标签最低高度设置min-height不兼容
• 问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
• 碰到几率：5%
• 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
• 备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
  (7) 浏览器兼容问题七：透明度的兼容CSS设置
• 一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度，而在firefox中，一般就是直接使用opacity:0,对于兼容的，一般的做法就是在书写css样式的将2个都写上就行，就能实现兼容

CSS中 link 和@import 的区别是？

(1)、link属于HTML标签，而@import是CSS提供的;
(2)、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3)、import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4)、link方式的样式的权重 高于@import的权重.

block，inline和inlinke-block细节对比？

• display:block
  a、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  b、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  c、block元素可以设置margin和padding属性。
• display:inline
  a、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  b、inline元素设置width,height属性无效。
  c、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
• display:inline-block
  a、简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
• 补充说明
  a、一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
  b、IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

注

以上内容都是来自牛客网的前端面试题，如有需要，请前往牛客网：https://www.nowcoder.com/517258984.（不用谢哈哈！）