web前端面试常问问题一(肝货)

目录

1.什么是盒子模型?盒子模型分为哪几种?如何计算?

2.描述cookies,sessionStorage和localStorage的区别?

3.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

4.'data-属性'的作用是什么?

5.iframe有什么作用?优缺点?

6.你如何对网站的文件和资源进行优化?

7.常见的浏览器的的兼容问题?你使用过哪些浏览器调试你的项目?它们的内核分别是?

8.avaScript数据类型有哪些?

9.js中var 和 let 和  const的区别?

10.清除浮动有哪些方式?


1.什么是盒子模型?盒子模型分为哪几种?如何计算?

  • css中所有的html元素都可以看成为一个盒子,一个盒子模型包括 margin  border  padding  content 
  • 盒子模型分为两大类:
  • W3C盒子模型和IE盒子模型。(编写代码时应该尽量使用标准的W3C盒子模型 可在页面中声明DOCTYPE 标准模式)
  • W3C盒子计算 :margin+border+padding+width
  • IE盒子计算:margin+width

2.描述cookies,sessionStorage和localStorage的区别

    1.数据的存储大小限制不同。

  • cookies:数据始终在同源的https请求中携带,即cookies能在服务器和浏览器间回传。故存储的数据大小最小,一般为4096B.
  • sessionStorage:数据保存在本地,不会自动发给 服务器。一般为5M或者更大
  • localStorage:数据保存在本地,不会自动发给服务器。一般为5M或者更大

    2.数据的有效期不同。

  • cookies:数据在cookies设置的有效期之前都有效,即使窗口和浏览器关闭。
  • sessionStorage:数据在关闭浏览器窗口后自动清除。存储的数据仅在同源窗口内有效,即使在不同浏览器相同的页面也是无效的,一般用于会话数据的存储
  • localStorage:始终有效,因此用作持久数据

   3.数据的作用域不同。

  • cookies,localStorage:在所有同源 窗口敏感共享
  • sessionStorage:不再不同浏览器窗口共享

同源窗口共享是2113连接PC与移动设备的软件,使用同源窗口共享,可以在PC与移动设备间轻松共1653享屏幕内容与数据。

3.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

  • 行内元素有:a、b、span、img、input、strong、select、label、em、button、textarea等;
  • 块级元素有:div、ul、li、dl、dt、dd、p、h1-h6、blockquote等;
  • 空元素(没有内容的html元素)有:br、meta、hr、link、input、img。
     

4.'data-属性'的作用是什么?

  • data-属性为html5推出的一个新功能,前端开发者可以利用其设置需要的自定义属性,来进行一些数据的存放。当然,在高级浏览器下可通过JS脚本进行定义和数据的存取。

5.iframe有什么作用?优缺点?

 iframe被称作嵌入式框架,用于设置文本或图形的浮动图文框或容器;

优点有:
①.iframe能够原封不动的把嵌入的网页展现出来。
②.如果有多个网页引用iframe,那么只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
③.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用性。
④.可以解决第三方内容如图标和广告加载缓慢的问题。
⑤.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页,减少了数据的传输,增加了网页下载速度
缺点有:
①.页面样式调试麻烦,会出现多个滚动条,并产生多个页面,不容易打印;
②.浏览器的后退按钮不可用;
③.若有过多iframe标签会增加服务器的HTTP的请求;
④.小型的移动设备无法完全显示框架,即设备兼容性差;
⑤.代码复杂,某些搜索引擎无法解读。

6.你如何对网站的文件和资源进行优化?

  • 文件合并、文件压缩、使用cdn(内容分发网络)托管您的资源、使用缓存、优化meta标签、启用Gzip压缩css/js文件
  • 将css/js文件放在外部文件中,避免写在同一页面中,引用时将css放在最上面,js放在最下面等

7.常见的浏览器的的兼容问题?你使用过哪些浏览器调试你的项目?它们的内核分别是?

①不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同;
②图片之间默认有间距;
③边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
④两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;
⑤IE9以下版本浏览器不能使用opacity;
⑥当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度;
⑦IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题。
用过Google Chrome、QQ浏览器以及Firefox浏览器,它们的内核分别是Webkit、webkit和IE的核以及Gecko内核

8.avaScript数据类型:

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。

9.js中var 和 let 和  const的区别

  • var 声明的变量属于函数作用域,let和const声明的变量属于块级作用域;
  • var存在变量提升现象,而let和const没有;
  • var变量可以重复声明,而在同一块级作用域,let变量不能重新声明,const变量不能修改。

10.清除浮动有哪些方式?

   1.父级div定义overflow:hidden
   2.结尾处加空div标签clear:both
   3.父级div定义height
   4.父级div定义overf:auto
   5.用伪元素,父级div定义伪类:after(必须设置content)

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值