webpack-spritesmith雪碧图

项目开发设计师没有提供svg或者icon-font,只能使用图片,过多的小图片造成资源浪费,解决方案:webpack打包将多个图标合成雪碧图

需要同时配置开发环境和线上环境的webpack配置

  • webpack-spritesmith 合成雪碧图插件
  • file-loader

externals外部扩展理解

如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。

圣杯布局(双飞翼布局)

圣杯布局

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局

  • 三列布局,两边固定宽度,中间自适应
  • 中间栏要在浏览器优先渲染
    main元素必须是container的第一个元素
  • 允许任意列的高度最高

BFC块级格式化上下文

BFC(Block Formating Context)

块级格式化上下文:一个独立的渲染区域,只有 Block-level box 参与,它内部规定了 Block-level box 如何布局,并且与这个区域外部毫不相干。

BFC是Web页面的可视化CSS渲染的一部分,并且有自身的一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用。

跨域

什么是跨域?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

前端面试集(HTML+CSS)

1. 浏览器页面有哪三层构成,分别是什么,作用是什么?

  • 构成:结构层、表示层、行为层
  • 分别是:HTML、CSS、JavaScript
  • 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。

面试之JS

  • JS
  • 框架
  • 浏览器

面试之CSS

前端面试

webpack插件关于autoprefixer的冲突

1. 实际遇到的问题

项目中经常会遇到css的一些奇怪问题,有些css属性的设置在在本地编译运行的时候是好的,但是打包上线之后这个属性就平白无故的没有了?

具体场景
在处理多行文本溢出时,需要使用-webkit-box-orient: vertial,在本地开发测试一切正常,但是在webpack编译之后,检查样式并没有这个属性,其他的属性都有。

URL操作处理

URL

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×