常见问题4

1，在项目中你是如何做图片优化的？

（1）、降低图片的大小

我们的目的是降低图片的大小kb，有很多方法可以做，压缩图片，选择更小kb的图片格式，以达到最优的显示效果,找在线压缩图的网站如TinyPNG:一个压缩PNG的神站

​ （2）、选择适当的图片宽度尺寸（即响应式图片）

（3）减少HTTP的网络资源请求 考虑CSSSprites(背景精灵图/雪碧图)

怎么使用精灵图？

利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置

（4）css和css3`制作简单的图标和动画（代替gif图片）

随着技术的发展，css3可以实现的效果越来越多，比如箭头图标，三角形，梯形等图标，或者一些阴影效果，渐变的效果，所以可以用css制作一些简单的图标，而且具有多变性

（5）SVG技术替换图片

SVG 是使用 XML 来描述二维图形和绘图程序的语言,支持透明，缩放，动画

什么是SVG？(摘自w3cschool)

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

（6）字体图库代替图标

随着技术的更新和浏览器的更新，字体图库去代替一些图标我认为还是极好的，使用字体图库你不仅可以改变大小，而且还可以改变颜色

（7）图片延迟加载（懒惰加载）（js/lazyload.js）

有个页面会很大很长很多的图片素材，这样全部加载就会变的很慢，因此需要修改一下加载方案，只加载窗口内的图片，我们大家浏览网站的时候会经常看到会有默认图，图片加载成功之后会替换默认图

2，HTML5有哪些新特性、移除了哪些元素？ 如何处理HTML5新标签的浏览器兼容问题？

新增页眉，页脚，内容块等文档结构相关的标签，使文档结构更加清晰明确。

结构标签

header 头部（页眉） footer页脚 （版权信息） nav导航链接 article独立完整的内容框

section由内容及标题组成 aside侧边栏 hgroup可以为标题分组与h1-h6组合使用

其他标签

figure规定独立的流内容 mark 有记号的文本 time 日期时间

支持最新版本的Safari，Chrome，Firefox以及Opera支持部分HTML5 IE9支持部分

使用

1.javascript新增元素的解决：由于创建出的是内联元素，要转换为块级，宽高才生效。

2.用封装好的插件解决兼容问题

3，css3有哪些新特性？

新特性：圆角边框、盒子阴影、弹性盒、2D、3D变形、新盒模型等

4，css3新增选择器有哪些？

新的选择器有

1.属性选择器

【atter^=“value”】 以value开头 【atter$=“value”】 以value结束 【atter*=“value”】 包含value的每个元素

2.结构伪类

：first-child 其父元素的首个子元素

：last-child 其父元素的最后一个子元素

：nth-child() 其父元素的第n个子元素

：nth-child(odd) 奇数个

：nth-child(even) 偶数个

3.状态伪类选择器

：checked 匹配用户界面上处于选中状态的元素
：enabled 匹配用户界面上处于可用状态的元素
：disabled 匹配用户界面上处于禁用状态的元素

5，解释css3的flexbox（弹性盒布局模型），以及适用场景?

1）背景介绍：
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便
2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
（2）知识剖析：

1. 什么是flex

   flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。
   2.基本概念
   采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 项目默认沿主轴排列。
   3.容器属性
   flex-direction属性决定主轴的方向（即项目的排列方向）。
   flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，项目都排在一条线（又称”轴线”）上。
   flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
   justify-content属性定义了项目在主轴上的对齐方式。
   align-items属性定义项目在交叉轴上如何对齐。
   align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
   4.项目属性
   order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
   flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
   flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
   flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
   flex属性是以上三个的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
   align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

2. 适用场景：多列盒子浮动时可以采用弹性盒

6，什么是less？less有什么好处？

LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单。在实际项目开发中，可以大大提升前端工程师的效率！

​ CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。