• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

前端面试常考系列四

技术杂谈 勤劳的小蚂蚁 4个月前 (01-06) 97次浏览 已收录 0个评论 扫描二维码

 

一、CSS盒子模型有哪些用处

 

css中的盒子模型是为了理解div+css模型的定位功能,它利用盒子模型这样的布局方式代替了传统的表格布局方式。盒子模型是在学习div+css布局方式中必须要学习的一个模型,通过这个模型可以明白网页中div和div之间的相对位置是如何布局的。
 

 

二、HTML5应用程序缓存和浏览器缓存有区别

 

应用程序缓存是HTML5的重要特性之一,提供了离线使用的功能,让应用程序可以获取本地的网站内容,例如HTML、CSS图片以及JavaScript。这个特性可以提高网站性能,它的实现借助于manifest文件,与传统浏览器缓存相比,它不强制用户访问的网站内容被缓存。
 
 

 

三、HTML5 Canvas 元素有何作用

 

HTML5的canvas元素使用JavaScript 在网页上绘制图像优势在于在于可以直接在HTML上进行图形操作
 
 

 

四、如何把视频嵌入HTML5

 

方法如下
<video width=”450″height=”340″controls>
  <source src=”jamshed.mp4″type=”video/mp4″>
   Your browser does’nt support video embedding feature.
</video>

 

五、如何把音频嵌入HTML5

 

方法如下
<audio controls>
    <source src=”jamshed.mp3″type=”audio/mpeg”>
    Your browser does’nt support audio embedding feature.
</audio>

 

六、新的HTML5文档类型和字符集是什么

 

文档类型
<!doctype html>
字符集
<meta charset=”UTF-8″>
 

 

七、CSS选择器的类型有哪些,并说明其用法

 

CSS选择器的类型有:
基础的选择器、组合选择器、属性选择器、伪类、伪元素
1、基础的选择器
*
通用元素下选择器,匹配任何元素。Ex:*{margin:0; padding:0;}
E
标签选择器,匹配所有使用E标签的元素。Ex:P{font-size:2em;}
.info和E.info
class选择器,匹配所有class属性中包含info的元素。Ex.info{background:#ff0;} p.info{background:#ff0;}p .info{background:#ff0;}
#info和E#info
Id选择器,匹配所有id属性等于footer的元素
Ex:#info{background:#ff0}
P#info{background:#ff0}
2、组合选择器
E,F
多元素选择器,同匹配所有E元素或F元素,E和F之间用逗号隔开。
Ex:Div,p{color:#f00}
E F
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔。
Ex:#nav li { display:inline;}
li a { font-weight:bold;}
E>F
子元素选择器,匹配所有E元素的子元素F。
Ex:din>strong { color:#f00;}
E+F
毗邻元素选择器,匹配所有紧随E元素之后的同级元素F。
P+P{ color:#f00;}
3、属性选择器
E[att]
匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如[cheacked]。下面的属性选择器也是同样。)
EX:p[title]{ color:#f00;}
E[att=val]
匹配所有att属性等于“val”的E元素。
Ex:div[class=error]{color:#f00;}
E[arr~=val]
匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素。
Ex:td[class~=name]{color;#f00}
E[arr|=val]
匹配所有att属性具有多个连字号分隔(hyphen-separated)的值,且其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-qb”等等。
Ex:p[lang|=en]{color:#foo;}
4、伪类
E:first-child
匹配父元素的第一个子元素。
Ex: p:first-child { font-style:italic;}
E:link
匹配所有未被点击的链接。
E:visited
匹配所有已被点击的链接。
E:active
匹配所有鼠标已经按下且未释放的E元素。
E:hover
匹配鼠标悬停其上的E元素。
E:lang(c)
匹配lang属性等于c的E元素。
5、伪元素
E:first-line
匹配E元素的第一行。
Ex:p:first-line { font-weight:bold;color;#600;}
E:first-litter
匹配E元素的第一个字母。
E:before
在E元素之前插入生成的内容。
E:affter
在E元素之后插入生成的内容。

 

八、CSS优先级计算特殊值特殊性

 

优先级
(1)、同类型,同级别的样式后者先于前者
(2))、ID > 类样式 > 标签 > *
(3)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
(4)、具体 > 泛化的,特殊性即css优先级
(5)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式:内嵌在元素中,<span style=”color:red”>span</span>
内部样式表:在页面中的样式,写在<style></style>中的样式
外联样式表:单独存在一个css文件中,通过link引入或import导入的样式
(6)、!important 权重最高,比 inline style 还要高。
计算特殊性值
important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法: 
 CSS样式选择器分为4个等级,a、b、c、d
(1)、如果样式是行内样式(通过Style=“”定义),那么a=1,1,0,0,0 
(2)、b为ID选择器的总数 0,1,0,0 
(3)、c为属性选择器,伪类选择器和class类选择器的数量。0,0,1,0
(4)、d为标签、伪元素选择器的数量 0,0,0,1
(5)、!important 权重最高,比 inline style 还要高。
 

 

九、如何动态改变层中的内容

 

innerHTMLinnerText

 

十、常见浏览器兼容性问题有哪些,如何解决

 

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

 

十一、除了audio和video,HTML5还有哪些媒体标签

 

<video>  标记定义一个视频
  <audio>  标记定义音频内容
  <source>  标记定义媒体资源
  <canvas>  标记定义图片
  <embed>  标记定义外部的可交互的内容或插件比如flash
 
 

 

十二、display的值各有什么作用

 

none
隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 
  inline
指定对象为内联元素。 
  block
指定对象为块元素。 
  list-item
指定对象为列表项目。 
  inline-block
指定对象为内联块元素。(CSS2) 
  table
指定对象作为块元素级的表格。类同于html标签<table>(CSS2) 
  inline-table
指定对象作为内联元素级的表格。类同于html标签<table>(CSS2) 
  table-caption
指定对象作为表格标题。类同于html标签<caption>(CSS2) 
  table-cell
指定对象作为表格单元格。类同于html标签<td>(CSS2) 
  table-row
指定对象作为表格行。类同于html标签<tr>(CSS2) 
  table-row-group
指定对象作为表格行组。类同于html标签<tbody>(CSS2) 
  table-column
指定对象作为表格列。类同于html标签<col>(CSS2) 
  table-column-group
指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2) 
  table-header-group
指定对象作为表格标题组。类同于html标签<thead>(CSS2) 
  table-footer-group
指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2) 
  run-in
根据上下文决定对象是内联对象还是块级对象。(CSS3) 
  box
将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3) 
  inline-box
将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3) 
  flexbox
将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3) 
  inline-flexbox
将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3) 
  flex
将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3) 
  inline-flex
将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:前端面试常考系列四
喜欢 (0)
[247507792@qq.com]
分享 (0)
勤劳的小蚂蚁
关于作者:
温馨提示:本文来源于网络,转载文章皆标明了出处,如果您发现侵权文章,请及时向站长反馈删除。

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00