2022年前端面试指南:前端面试会问哪些问题?(二)
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万人。不论你是零基础还是想提升,都可以找到适合的班型,千锋教育随时欢迎你来试听。