全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

2022年前端面试指南:前端面试会问哪些问题?(二)

发布时间:2022-07-18 16:23:46
发布人:syq

  1、当margin-top、padding-top 的值是百分比时,分别是如何计算的?

前端面试会问哪些问题

  - 可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)

  - 如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式,使其元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小。

  - 为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢?

  - 我们认为,正常流中的大多数元素都会足够高于包含其后代元素(包括外边距),如果一个元素的上下外边距是父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,如此循环。

 ```html

  <style>

      .fu {

          width: 400px;

          height: 300px;

          background: blue;

          overflow: hidden;

      }

      .zi {

          width: 20px;

          height: 20px;

          background: red;

          margin-top: 50%;

      }

  </style>

  <div class="fu">

      <div class="zi"></div>

  </div>

  ```

  2、iframe缺点

  - iframe类似于框架,可以在一个页面中嵌入别的页面。

  - 缺点:

  - 1.在一个页面中如果利用iframe嵌入了多个别的页面,不利于我们的管理

  - 2.在一些小型设备比如手机上可能无法完全显示框架,兼容性不好

  - 3.iframe是会阻塞页面的加载的,会影响到网页的加载速度。比如window的onload事件会在页面或者图像加载完成后立即执行,但是如果当前页面当中用了iframe了,那还需要把所有的iframe当中的元素加载完毕才会执行,这样就会让用户感觉网页加载速度特别慢,影响体验感。

  - 4.代码复杂,不利于seo,现在的搜索引擎还不能很好的处理iframe当中的内容。

  - 5.iframe框架会增加http的请求次数

  3、行内元素有那些?块级元素有那些?空元素有哪些?

  · 行内元素:不能实现宽度高度,横向显示

  o a,span,i,em,var,b,strong,sup,sub,s,del,label,font,mark

  · 块级元素:能设置宽度高度,纵向显示,并且默认站宽一整行

  o h1~h6,p,div,ul,ol,li,dl,dt,dd,table,form,hr,fieldset,legend,marquee,iframe,header,nav,footer,section,main,figure,figcaption,hgroup,aside,article

  · 行内块元素:能设置宽度高度,并且横向显示

  o input,img,select,textarea

  · 空元素:就是单标签

  o input,img,br,meta,link,hr

  · 置换元素:因为默认自带宽度告诉浏览器能进行根据类型路径加载对应的内容

  o input,img,select,textarea

  更多关于“前端培训”的问题,欢迎咨询千锋教育在线名师。千锋教育多年办学,课程大纲紧跟企业需求,更科学更严谨,每年培养泛IT人才近2万人。不论你是零基础还是想提升,都可以找到适合的班型,千锋教育随时欢迎你来试听。

相关文章

抖音小店怎么进入精选联盟入口呢

2023-09-30

抖音小店怎么更改主体信息

2023-09-30

开抖音小店无货源需要多久

2023-09-30

开抖音小店需要多少费用汽车配件

2023-09-30

抖音小店在哪回复评价

2023-09-30

抖音小店怎么做标题呢图片大全

2023-09-30
在线咨询 免费试学 教程领取