面试题汇总（CSS篇）

1、CSS 中类 (classes) 和 ID 的区别

对于CSS而言，id和class都是选择器，唯一不同的地方在于权重不同。

对于html而言，id和class都是dom元素的属性值。不同的地方在于id属性的值是唯一的，而class属性值可以重复。

id还一个老特性是锚点功能，当浏览器地址栏有一个#xxx，页面会自动滚动到id=xxx的元素上面。

2、请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？

Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准；是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。

normalizing：
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来

Normalize.css 保护了有价值的默认值：
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

3、请解释浮动 (Floats) 及其工作原理。

float被归类于CSS 定位属性（Positioning）
描述：规定框是否应该浮动。
定义和用法：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

4、描述z-index和叠加上下文是如何形成的。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

而凡是拥有层叠上下文的元素，将离用户最近，也就是越靠在Z轴前面。默认情况下只有根元素HTML会产生一个层叠上下文，并且元素一旦使用了一些属性也将会产生一个层叠上下文，如我们常用的定位属性。如两个层叠上下文相遇时，总是后一个层叠前一个，除非使用z-index来改变。

详情见：
http://www.cnblogs.com/pssp/p/5948356.html

5、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。

1、对父级设置适合CSS高度
2、clear:both清除浮动，但是需要新增一个空的div
3、父级div定义 overflow:hidden
4、父级div也一起浮动
5、父级div定义 display:table

6、请描述伪元素 (pseudo-elements) 及其用途。

伪元素例如：
:first-line / :first-letter / :befort / :after
详情参见链接：
http://www.w3school.com.cn/css/css_pseudo_elements.asp

7、请解释 inline 和 inline-block 的区别？

• display:block
  block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  block元素可以设置margin和padding属性。
• display:inline
  inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  inline元素设置width,height属性无效。
  inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
• display:inline-block
  简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

8、你用过媒体查询，或针对移动端的布局/CSS 吗？

@media
详见：http://www.runoob.com/cssref/css3-pr-mediaquery.html

9、如果设计中使用了非标准的字体，你该如何去实现？

@font-face
详见：http://www.w3school.com.cn/css3/css3_font.asp

10、请解释 relative、fixed、absolute 和 static 元素的区别

1. static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2. relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
   定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
   relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式
3. absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
   定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
   对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。
4. fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

注：使用static 定位或无position定位的元素z-index属性是无效的。

11、请罗列出你所知道的 display 属性的全部值

常见的包括：
none、block、inline、inline-block、list-item、run-in、table、inline-table、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、table-caption、inherit

12、请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

盒子模型分为两类：W3C标准盒子模型和IE盒子模型。这两者的关键差别就在于：
W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 填充（padding）和边框（border）
IE盒子模型——属性高（height）和属性宽（width）这两个值包含 填充（padding）和边框（border）
我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型）。

css中可使用hack或者wrapper。【CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的】

13、请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

大致就是说，在盒模型中，元素的高和宽包括了边框和内边距，详见：
http://www.w3school.com.cn/cssref/pr_box-sizing.asp

14、你熟悉 SVG 样式的书写吗？

SVG为可缩放矢量图形，详见：
http://www.w3school.com.cn/svg/index.asp

15、CSS 中字母 ‘C’ 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？

样式的优先级
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

选择器的优先权：
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

CSS 优先级法则：
1. 选择器都有一个权值，权值越大越优先；
2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
4. 继承的CSS 样式不如后来指定的CSS 样式；
5. 在同一组属性设置中标有“!important”规则的优先级最大；

16、为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

自适应是为了解决如何在不同大小的设备上呈现同样的网页（网页的主题和内容不改变）
响应式的概念覆盖了自适应，而且涵盖的内容更多。
自适应暴露的一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计、布局和展示的内容可能会有所改变。

17、在书写高效 CSS 时会有哪些问题需要考虑？

（1）避免使用全局样式
既然是全局的定义，那么他会吧所有标签都处理一遍，增加了浏览器解析的时间。有些标签其实没有必要处理。
允许一个元素去继承它的祖先，或者使用一个class去应用复杂的元素。
（2）将规则写的越精确越好
偏向使用class ，id，少使用tag
另外定义class时使用一些有代表意义的单词，比如在模块化开发的过程中，一般用mod-xxx，很利于维护，代码也很漂亮，
（3）移除一些无用的限定
下面的这些限定是多余的
1.id选择器被class 或者tag选择器限定，也就是不要在id前面添加任何限定符，包括class tag 或者其他的选择符。
2.class被tag选择器进行限定（如果一个class只被用于一个tag，这也是很好的实践）
（4）避免使用后代选择器，特别是包含了一些无用的祖先元素
eg：body ul li a{…} 制定了一个无用的body限定，因为所有的元素都是在body中。
（5）使用class选择器取代后代选择器，CSS 的层级选择器不要超过3个
eg：如果你需要两个不同的样式（一个无序列表，一个有序列表）
不要使用下面的样式
ul li {color:blue} ol li {color:red}
应该这样的使用 .unordered-list-item {color: blue;} .ordered-list-item {color: red;}
如果你一定要用后代选择器，建议你使用子选择器
（6）display与visibility的差异
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。所以不赞成用visibility:hidden;
（7）border:none;与border:0;的区别
有些同学肯定没注意过这两个代码的区别，在HTML显示肯定是一样的，但是从基本上来说他们不一样 用border:0虽然现实上和none没什么区别，但是它会保留color、style 这两个属性。所以不赞成用border:0;
（8）不宜过小的背景图片平铺
（9）代码缩写

18、使用 CSS 预处理器的优缺点有哪些？

缺点：简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。另外，预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。
优点：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

其他问题：

你会如何解决特定浏览器的样式问题？
如何为有功能限制的浏览器提供网页？
你会使用哪些技术和处理方法？
有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？
你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？
如何优化网页的打印样式？
请描述你曾经使用过的 CSS 预处理器的优缺点。
你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？
请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？
你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？