前端面试题

1. 列举10个以上的h5事件 不是 HTML5

• onblur 当失去焦点时运行脚本
• onchange 当元素改变时,并失去焦点运行脚本
• onclick 当点击鼠标时运行脚本
• ondrop 当被拖动元素正在被拖放时运行脚本
• onended 当媒体已抵达结尾时运行脚本
• onerror 当在元素加载期间发生错误时运行脚本
• onfocus 当获得焦点时运行脚本
• oninput 当元素获得用户输入时运行脚本
• onkeydown 当按下按键时运行脚本(还没松开时就触发)
• onkeypress 当按下并松开时运行脚本(必须经历按下、松开这一过程才触发)
• onkeyup 当松开按键时运行脚本(松开时即触发)
• onload 当加载时运行脚本(文档 css 图片 js)
• onmousedown 当按下鼠标按钮时运行脚本
• onmousemove 当鼠标指针移动时运行脚本
• onmouseout 当鼠标指针移出元素时运行脚本
• onmouseover 当鼠标指针移至元素之上时运行脚本
• onmouseup当松开鼠标按钮时运行脚本

2. CSS中link和@import的区别?

css解析从右往左解析
css 层级结构不要写太深
原则上是不要超过三层, 层越多解析越慢, 页面性能就越不好

文档在浏览器中解析过程
文件下载结束 => CSSTree + domTree => CSSTree 和 domTree合并成一个tree => layout(布局) => paint(绘制)

尽量避免下面层级过多及用大量标签来选择元素
.container > .box > p > span > i {
}

• 适用范围不同
  • @import可以在网页页面中使用，也可以在CSS文件中使用，用来将多个 CSS文件引入到一个CSS文件中；而link只能将CSS文件引入到网页页面中
• 功能范围不同
  • link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义RSS（定义到达项目的超链接），定义rel连接属性等，@import就只能加载CSS
• 加载顺序不同
  • 当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显
• 兼容性
  • 由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题
• 控制样式时的差别
  • 使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari 都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格),当然你还可以使用Javascript使得IE也支持用户更换样式
• 权重区别
  • link引入的样式权重大于@import引入的样式

3. 什么会导致元素浮动? 浮动元素会引起什么问题? 如何清除浮动?

• 浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到含它的边框或者浮动元素的边框停留

• 浮动带来的主要问题： 父元素的高度无法被撑开，影响与父元素同级的元素

• 如何清除浮动：

  1、使用CSS中的clear:both;（放一个空的div，并设置上述css）
  2、给父元素添加clearfix样式：
  .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */

4. 如何解决 margin ‘塌陷’?

外边距塌陷共有两种情况：

• 两个同级元素，垂直排列，上面的盒子给margin-bottom下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算
• 两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个css属性，overflow hidden，禁止超出
• 解决方案：
  • 1、为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
  • 2、为父盒子添加overflow：hidden；
  • 3、为父盒子设定padding值；
  • 4、为父盒子添加position：fixed；
  • 5、为父盒子添加 display：table；
  • 6、利用伪元素给子元素的前面添加一个空元素
  • .son:before{ content:""; overflow:hidden; }

5. img的 alt 和 title 有啥区别, 图片懒加载的原理

• alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字,title
  是对图片的描述与进一步说明;

• 严格上讲，alt是img必要的属性，而title不是

• 对于网站seo优化来说，搜索引擎对图片意思的判断，主要是靠alt属性

• 懒加载原理： (应用场景: 大量的图片列表,初始化显示一屏多)

  • 先设置图片的data-set属性值为其图片路径，由于不是src，然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了，这时候我们再将data-set 属性替换为src属性即可，这个时候再去请求图片资源。
    <img src="" data-set="" />

  var arr = ['https://500px.com.cn/community/photo-details/500px1026448044', 'https://500px.com.cn/community/photo-details/500px1026448044'];

• 瀑布流布局

• 预加载
  提前把图片加载好, 放在缓存数据列表内
  提高用户体验
  new Image()

6. BFC是什么?

• block formatting context (块级格式化上下文)，是一个独立的渲染区域

• 布局规则：

  • 内部的box会在垂直方向，一个接一个地放置
  • box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
  • 每一个元素的margin的盒子，与包含边框的盒子的左边相接触
  • BFC的区域不会与浮动的盒子重叠
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
  • 计算BFC的高度时，浮动元素也参与计算

• 哪些元素会生成BFC

  • float属性值不为 none
  • position属性值为 absolute 或 fixed
  • display为 inline-block table-cell table-caption(此元素会作为一个表格标题显示) flex等

7. 如何用css在chrome(PC端)中输出小于12px的字体大小(chrome PC端 默认最小字体是12px)

针对谷歌浏览器内核，加webkit前缀，用 transform:scale() 这个属性进行缩放

8. 雪碧图(精灵图)是如何使用的,它的优缺点?

• 使用：

  • 是把网站上用到的一些小图片(如小图标之类的)整合到一张单独的较大图片中，通过背景定位的方式，显示当前所需要的小图片

• 优点：

  • 1、减少网页的http请求，从而加快了网页加载速度，提高用户体验
  • 2、减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会 共用同一个头信息，从而减少了字节数
  • 3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
  • 4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变

• 缺点：

  • 1、在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
  • 2、CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
  • 3、在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
  • 4、精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，CSS3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题

  现在一般用 字体图标 代替 精灵图

9. CSS中选择器的优先级以及CSS权重如何计算?

!important > 行内样式(1000) > ID选择器(100) > 类、属性和伪类选择器(10) > 标签和伪元素选择器(1) > 通配符

实例： div#app.child[name="appName"]
权重: 1+100+10+10 = 121

• 伪类选择器 只有一个冒号，作用是：用于向某些选择器添加一些特殊的效果
  常见的有：a:hover a:link a:visited a:active; :first-child :last-child :nth-child()

• 伪元素选择器 表示元素中的一些特殊的位置，常见的有：
  fist-line first-letter before after placeholder selection(选中文本的样式)