（以下是自己在网络上总结的css基础面试题,欢迎补充和改正）
1.class和id有什么不同？
id类名唯一，在页面中只能出现一次，更多地被用来实现宏伟布局和设计包含块，或包含框的样式。
id是先确定页面的结构和内容，然后再为它定义样式
class类名不唯一，被多次调用，先确定样式在确定结构和内容
2.CSS resetting和CSS normalizing 有什么不同？你倾向于使用哪种方案？
normalize相对平和，注重通用方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，他是模块化的，有详细的文档
Reset 相对暴力，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。
几乎所有的元素施加默认样式
3.描述一下float，并解释一下它的作用方式？
float属性定义了元素是否浮动及在哪个方向浮动,在CSS中任何元素都可以浮动，且浮动元素会生成一个块级框，而不论它本身是何种元素。并且盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。 浮动属性会使得浮动的元素脱离文档流，所以文档的普通流中的块框会表现的像浮动框不存在一样
4.解释一下z-index和叠加上下文是如何形成的？
负边距 margin为负值时元素会依参考线向外偏移，没有计算好会折叠，position会发生折叠，且有z-index属性
同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面，
z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）
5.解释一下BFC（block formatting context）和工作原理？
BFC（Block Formatting Context）直译为“块级格式化范围”
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
用处：解决子元素浮动，父元素高度塌陷。
两列自适应布局
合并外边距
6.clear属性有哪些？它有哪些适用场景？
clear 属性设置一个元素的侧面是否允许其他的浮动元素。
left ：在左侧不允许浮动元素
right ：在右侧不允许浮动元素
both ：在左右两侧均不允许浮 动元素
none：默认。允许浮动元素出现在两侧。
当一个容器中的元素全部浮动之后，由于浮动会让元素脱离普通文档流，所以对于外面的这个容器来讲它就没有内容将它撑开，背景设置无法显示，margin设置无法显示。
7.CSS雪碧图是什么？如何实现？
译为“CSS图像拼合”或“CSS贴图定位”, CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
优点：当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
缺点：做图像拼合的时候很麻烦。
8.你最喜欢的图片替换技术是什么？你会在什么时候使用？
设计师能够用一张背景图像替代某元素中的原始文字，以期显示出更美观的字体意义：而图像替换技术则保留了被替换元素中的原有文本，因此无论对何种客户而言，理解页面内容都不成问题。主要是考虑SEO，而非视觉上的效果。
9.如何处理特定浏览器的样式问题？
CSShack（利用了这些浏览器的漏洞价格，专门用这些漏洞来解决兼容性问题）:条件hack、属性级hack（_color:IE6；color:IE7；color:#090\9:IE9）、选择符级hack3 （html是IE6；*+html是IE7）
10.如何兼容某种功能受限的浏览器？
11.从视觉上将内容隐藏有哪些方式？（内容对屏幕阅读器可见）
display:none可以让网页中所有内容不显示
visibility:hidden 被隐藏掉的内容仍旧占据空间
overflow:hidden这种方式可以隐藏掉固定区域外的内容
12.有没有使用过grid系统？如果用过，你喜欢哪个？
是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
13.是否使用过媒体查询或实现过特定移动端特定布局？
媒体查询，设置页面样式随屏幕宽度的变化而变化（IE8和IE8之前都不支持）
```
媒体查询 media queries：
@media screen:屏幕设备(手机、IPAD之类的)
@media print:打印机
@media projector:投影仪
@media screen and (min-width: 480px) and (max-width: 760px){
body{
1.CSS3 - Media Query（最简单的方式）
2.借助原生的JS（成本高，不推荐）
3.第三方开源框架 bootstrap（可以很好的浏览器响应式布局的设计）
```
媒体查询 media queries：
@media screen:屏幕设备(手机、IPAD之类的)
@media print:打印机
@media projector:投影仪
@media screen and (min-width: 480px) and (max-width: 760px){
body{
1.CSS3 - Media Query（最简单的方式）
2.借助原生的JS（成本高，不推荐）
3.第三方开源框架 bootstrap（可以很好的浏览器响应式布局的设计）
em相对与父元素单位大小的；rem相对与html根元素单位大小的；
14.熟悉怎么为SVG设置样式吗？
矢量图形
15.如何优化网页进行打印？
@media print:打印机
16.为写出高性能的CSS，需要注意哪些陷阱？
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。