日常整理小知识——前端面试
文章目录
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.(不用谢哈哈!)