前端工作总结7+前端面试基础2-css 盒模型

蓝百合
230 阅读3分钟

这周工作中遇到点问题，花了两天时间间接解决了，就感觉自己能力还是不够，有种无力感。继续学习吧！

想要留下的代码

1.前端这块经常遇到上传文件限制文件类型，收藏了一个链接，不是很全 文件类型 以及 常见文件的MIME type

    // jpg,doc,docx,xls,xlsx,csv,pdf,png
    let isLt10M = file.size / 1024 / 1024 < 10
    let fileAccept = ['image/jpeg', 'application/pdf','application/msword','image/png', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/csv']
    let isJPG = fileAccept.includes(file.type)
    if(!isJPG){
      isJPG = file.name.endsWith('.msg')
    }

2.vue 项目中有时候项目做完了，产品要与别的业务线对接，经常需要在url中增加参数什么的，页面内的路由跳转非常多，这时候一个一个页面加不太明智，可以在before router中统一处理

router.beforeEach((to, from, next) => {
  if (from.query && from.query.returnUrl) {
    let returnUrl = to.query && to.query.returnUrl
    if (!returnUrl) {
      return next({
        path: to.path,
        query: { ...to.query, returnUrl: from.query.returnUrl }
      })
    }
  }
  next()
})

遇到的坑

  1. 这周在做一个菜单的项目，左侧菜单有四层级，当最外面一层ul设置了overflow：auto 时，里面li下的子元素ul绝对定位的元素就被隐藏了，设置z-index也不管用。后来的解决办法时根据绝对定位的原理，绝对定位参考的是他的第一个position不为static的父元素定位的，如此便把设置了绝对定位以上的父级元素position全部改为static,overflow的ul元素的position也改为static,ul的父级div position设为fixed便解决了绝对定位元素被隐藏的问题。当然这样设置后还需要解决向右侧展开是绝对定位top的值，使用jquery还是比较容易计算的。
  2. 第二个坑也是在这个菜单项目，我发现之前设置了overflow：auto 的ul滚动事件监听不生效。后来发现是因为他的父级元素position是fixed的原因。后来把overflow：auto放到ul的父级元素上，onScroll事件监听就生效了。

前端面试基础2-css 盒模型

1.基本概念：标准模型和 IE 模型
  标准模型：元素宽度和高度不包含，padding 和 boder； box-sizing：content-box
  IE 模型：元素宽度和高度包含，padding 和 boder；box-sizing：border-box

2.js 如何获取盒模型的宽和高
1）dom.style.width/height 能拿到内联样式，拿不到外联样式表的宽高
2）dom.currentStyle.width/height 拿到浏览器渲染的宽高 （只有 ie 支持）
3）window.getComputedStyle(dom).width/height (兼容 firfox,chrome)
4） dom.getBoundingClientRect().width/height (查一下)

3.根据盒模型解释边距重叠
   父子元素边距重叠
   兄弟元素重叠
4.BFC(边距重叠解决方案) 不太理解，好好查下
   BFC 原理
   1）在 BFC 垂直方向的边距会发生重叠
   2）BFC 的区域不会与浮动元素的 box 重叠
   3）BFC 在页面是独立的，外面影响不了里面的，反过来也一样
   4）计算 BFC 高度时，浮动元素也会参与计算
   如何创建 BFC
   float 值不为 none
   position 的值不是 static 或 relative
   diaplay 为 table 相关的属性
   overflow
   BFC 使用场景
   清除浮动
   解决边距重叠
   BFC 子元素即使是 float 也会参与高度计算
   5.IFC(自己查一下)

BFC

avatar
文章
阅读
粉丝