1对盒模型的理解2为什么有时候用translate来改变位置而不是定位3li与li之间有看不见的空白间隔是什么原因引起的如何解决css3有哪些新特性5替换元素的概念及计算规则常见的图片格式及使用场景7对CSSprites的理解8margin和padding的使用场景9对line-height的理解及其赋值方式10css的优化和提高性能的方法有哪些

1. 盒模型是CSS中用来描述HTML元素的布局和渲染的模型。它将每个元素看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距四个部分。

2. 使用translate来改变位置的好处是可以利用硬件加速，提高页面性能。相比于使用定位来改变位置，translate更加轻量级，可以避免引起重绘和重排。

3. li与li之间看不见的空白间隔是因为行框盒子的基线对齐方式引起的。行框盒子的基线对齐方式会导致li元素之间存在一定的空白间距。

解决方法可以通过以下几种方式：

• 设置父元素的font-size为0，然后再为li元素设置合适的font-size
• 使用浮动或者inline-block布局，避免使用默认的基线对齐方式
• 使用负margin，将li元素之间的空白间距抵消掉

4. CSS3的新特性包括但不限于：

• 过渡和动画：可以通过transition和animation属性实现元素的平滑过渡和动画效果
• 边框和背景：可以使用border-radius和box-shadow属性实现圆角和阴影效果，使用background-size属性实现背景图片的缩放
• 文本效果：可以使用text-shadow和text-overflow属性实现文字阴影和溢出省略
• 2D和3D转换：可以使用transform属性实现元素的平移、旋转、缩放和倾斜等变换效果
• Flexbox布局：可以使用flex属性实现灵活的盒子布局
• 响应式布局：可以使用媒体查询来适配不同的设备尺寸和屏幕方向

5. 替换元素是指在渲染页面时，浏览器根据元素的标签和属性值来选择性地展示对应的内容。常见的替换元素包括img、video、audio和iframe等。替换元素的计算规则是根据元素的固有尺寸和样式来确定元素的宽度和高度。

6. 常见的图片格式包括JPEG、PNG和GIF。JPEG适用于存储照片和其他真实场景的图片，可以通过调整压缩质量来平衡图片的大小和清晰度；PNG适用于存储图标和透明背景的图片，支持无损压缩和透明度；GIF适用于存储动画和简单的图形，支持透明度和多帧动画。

7. CSS Sprites是一种将多个小图片合并成一张大图的技术，通过设置合适的背景定位来显示需要的图片部分。CSS Sprites可以减少HTTP请求的次数，提高页面加载速度，同时也可以减少图片的文件大小。

8. margin和padding的使用场景如下：

• margin用于设置元素与周围元素之间的间距，可以用于调整元素的外边距，影响元素的布局。
• padding用于设置元素内容与边框之间的间距，可以用于调整元素的内边距，影响元素的大小。

9. line-height是用于设置行高的属性，它可以影响行框盒子的高度和垂直对齐方式。line-height可以通过以下几种方式进行赋值：

• 像素值：例如line-height: 20px，表示行高为20像素。
• 百分比值：例如line-height: 150%，表示行高为字体尺寸的150%。
• 数字值：例如line-height: 1.5，表示行高为字体尺寸的1.5倍。
• normal值：表示使用浏览器默认的行高。

10. CSS的优化和提高性能的方法包括但不限于：

• 压缩和合并CSS文件：通过压缩和合并CSS文件可以减少HTTP请求的次数，提高页面加载速度。
• 使用合适的选择器：选择器的复杂度越低，匹配的效率越高。避免使用过于复杂的选择器，可以提高CSS的解析速度。
• 避免使用不必要的重绘和重排：尽量避免频繁修改元素的样式，合理使用CSS动画和过渡来实现动态效果。
• 使用合适的单位和值：尽量使用相对单位和合适的数值，避免使用绝对单位和过大的数值，可以提高页面的响应速度。
• 使用字体图标和CSS Sprites：通过使用字体图标和CSS Sprites可以减少图片的文件大小和HTTP请求的次数，提高页面加载速度。
• 使用浏览器缓存：合理设置CSS文件的缓存策略，可以减少重复的文件下载，提高页面的加载速度。