前端面试题

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属性即可,这个时候再去请求图片资源。

    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(选中文本的样式)

你可能感兴趣的:(html,css,html5,javascript)