前端知识点面试题 - CSS基础篇（2）

1、png、jpg、gif 这些图片格式的区别

• png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
• jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
• gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
• webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

2、style 标签写在 body 后与 body前有什么区别？

页面加载自上而下 当然是先加载样式。

写在 body 标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）

3、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

• 参数是 scroll 时候，必会出现滚动条。
• 参数是 auto 时候，子元素内容大于父元素时出现滚动条。
• 参数是 visible 时候，溢出的内容出现在父元素之外。
• 参数是 hidden 时候，溢出隐藏。

4、CSS Sprites是什么？它的优势和劣势？

CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。

然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

优势：

• 很好的减少网页的请求，大大提高页面的性能；
• 减少图片的字节；
• 解决了网页设计师在图片命名上的困扰；
• 更换风格方便，维护方便。

劣势：

• 图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；
• 开发较麻烦，测量繁琐；（可使用样式生成器）
• 维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。

5、CSS 伪类和伪元素的区别？

• 伪类： :focus、:hover、:active、:first-child :link :visitive :lang
  伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
• 伪元素：:before、:after
  伪元素本质上是创建了一个有内容的虚拟容器；

6、rgba() 和 opacity 的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

7、letter-spacing的妙用？

可以用于消除inline-block元素间的换行符空格间隙问题。

8、CSS引入的方式有哪些？使用Link和@import有什么区别？

内联，内嵌，外链，导入

• link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；
• 页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；
• import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

9、行内元素和块级元素的区别是是什么。

行内元素：

• 行内元素不换行
• 行内元素不可以设置大小
• 行内元素大小由内容决定

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select（下拉列表）、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

块元素：

• 块元素独立成行
• 块元素可以设置大小
• 块元素如果不设置宽度，宽度会自适应其父级的宽度

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等