面试题

1：在项目中你是怎么做图片优化的呢？
1.降低图片的大小
2.选择适当的图片尺寸
3.使用精灵图
4.使用字体图标
5.使用svg技术
2：在为什么要初始CSS样式？
1.因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异
2.初始化css主要是提高编码质量，如果不初始化整个页面，重复的css样式很多
2：单行文本溢出和多行文本溢出怎么实现？
一，单行文本溢出显示省略号
text-overflow:ellipsis属性来实现单行文本溢出显示省略号
p{
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
二、多行文本溢出显示省略号(…)
设置相对定位的容器高度（高度必须是行高的整数倍），用包含省略号(…)的伪元素元素通过绝对定位模拟实现
p {
width:200px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp：2；
-webkit-box-orient:vertical;

}
2：如何显示小于12px的字体？
利用css3的缩放属性实现。
transform-scale()进行缩放
4：请解释CSS3的弹性盒布局，以及适用场景？
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项目，简称项目，容器默认存在两根轴：水平的主轴和垂直的交叉轴，项目默认沿主轴排列。
3容器属性
flex-direction属性决定主轴的方向（即项目的排列方向）
flex-wrap属性决定换行属性
flex-flow属性是flex-direction和flex-wrap属性的 简写，默认值为row和nowrap
justify-content属性定义了项目在主轴上的对其方式
align-items属性定义了项目在侧轴上的对其方式
4.项目属性
order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink属性定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间，他的默认值是auto,即项目的本来大小。
flex是felx-basis和flex-grow和flex-shrink的简写，默认值为auto和0和1
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto
使用场景多列盒子浮动时可以采用弹性盒