前端校招面试题目合集练习-5

题目来自于牛客网题库-前端校招面试题目合集。
该题库共501题
学习目标：题库501道题目学习一遍。

学习目标：

• 学习进度：50/501

---

学习内容：

1. HTML5中如何嵌入音频？
   使用audio标签和source标签。
2. 新的HTML5文档类型和字符集是？
   doctype html .
   meta charset=utf-8
3. 解释一下CSS的盒子模型。
   标准的css盒子模型：宽度=内容的宽度+边框的宽度+内边框的宽度
   常用属性content,padding,border,margin等css盒子模型都具有。这些属性可以联系道日常生活中的盒子来理解，所以叫盒子模型。CS盒子模型是CSS的一种思维模式。
   标准盒模型：width=content
   IE盒模型：width=content+padding-left+padding-right+border-left+border-right
4. 谈谈CSS选择器的类型，并举例。
   CSS选择器类型有：基础选择器，组合选择器，属性选择器，伪类，伪元素。举例：
   基础选择器：*——匹配一切元素。
   组合选择器：A,B——匹配A和B元素
   属性选择器：A[ATT]——匹配具有ATT属性的A元素
   伪类：A:first-child——匹配父元素A的第一个子元素
5. 说说CSS的特殊性？
   优先级：同类别，同级别的样式后者先于前者。
   ID>类样式>标签>*
   内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器>继承样式。
   具体>泛化 ，进的>远的，！import权重最高。
   计算特殊值：
   Import>内嵌>ID选择器>类选择器>伪类|属性选择器|>标签选择器>w伪对象>继承>通配符
6. 要动态改变层中内容可以使用什么办法？
   innerHTML,innerText
7. 常见浏览器兼容性问题和解决方案？
   (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布局/font-sise=0**
   备注 ： 因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）
   (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个都写上就行，就能实现兼容
8. 列出display的值并说明他们的作用？
   display： none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
   默认值：inline
   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标签（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）
9. 如何居中div, 如何居中一个浮动元素?
   (1)、非浮动元素居中：可以设置 margin:0 auto 令其居中定位 ,父级元素text-align:center等等
   (2)、浮动元素居中:
   方法一:设置当前div的宽度，然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。
   方法二:父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。
   方法三:position定位等等。
10. CSS中 link 和@import 的区别是？
    (1)、link属于HTML标签，而@import是CSS提供的;
    (2)、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
    (3)、import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
    (4)、link方式的样式的权重 高于@import的权重.

---

学习时间：

2021/1/12 19:00-19:30
花费时间：30min

---

寄语

冷呀。
又是努力学习的一天，加油！