​CSS面试26题

大家好，这一期呢，我们看一下css的面试题。

第1题，css有哪些版本？

css1，css 2, css 2.1, css3, css 4.

第2题, 有多少种把css集成到网页里的办法?

有三种办法, inline, external, internal。

第3题，什么是css？

Css是针对html元素的网络设计语言。它的出现大大的简化了设计流程和增强了网页的展示性。

第4题，External css的优点和缺点是什么?

优点有:

一个网站可以管理多个样式文件。

多个网页可以共享一个或者多个样式文件。

可以应对样式文件特别复杂的情况。

缺点有:

样式文件作为单独的文件，需要单独的下载。

样式文件作为单独文件需要被加载才能使用。

当样式比较小的时候，创建一个文件显得有点矫枉过正。

第5题，讨论一下嵌入式样式的好处和坏处?

好处有:

样式跟元素合用一个文件。

可以使用selector和group methods.

不需要单独下载。

坏处有:

其他的元素文件无法分享这些样式。

第6题, 什么是css Box model, 它有哪些元素?

Box定义了样式的设计和布局。它有如下元素:

Margin

Border

Padding

Content。

第7题, z-index的目的是什么？如何使用?

z-index用来指定stack的顺序。实际环境中多个元素会叠加在一起，这个顺序决定了这些元素是如何显示的。

Z-index可以有如下的值:

auto, 跟父级元素相同。

Number

Initial, 确认值为0。

Inherit, 跟父级元素相同。

第8题, css sprites的好处是什么?

Css sprites的好处就是把很多个小的图片文件，合成一个大的图片文件，在网络传输中，把多个请求变成一个请求，从而加快加载的速度。

第9题, 有哪些media types?

all, aural, braille, embossed, print, projection, handheld, tv, screen.

第10题，什么是pseudo元素？

结合selector使用，用于对选中的元素的某一部分进行样式变化。

比如，它可以对第1个字母, 第1行，或者第1个元素进行一些样式变化。还可以添加一些内容。

第11题， Class selector的用处是什么?

在样式定义中，class前面会有一个点，它的名字可以包含减号, 下划线, 大小写字母和数字。在使用的时候，在元素中用class属性。

第12题, 列举一下fonts的属性。

Fonts的属性包括font style, font variant , fomt weight, font size, line height, font family, caption, icon.

第13题, Css是大小写敏感的吗？

在有xhtml DOCtype的情况下, Css是大小写敏感的。

在Html 4.01中, css不是大小写敏感的，除了class names，Font families， Image urls 等等。

第14题, Logical tags和physical tags的区别是什么?

Physical tag是为了指定特定的字符是如何格式化的。Logical tag是为了强化某些文字。

Physical tag, 被认为是展示型的标记。Logical tag不会被显示。

physical tag更新。Logical tag是老古董。

第14题， 区分一下style sheet跟html。

Html是定义了数据部分的结构。Style sheet是定义这些数据如何展示出来.

第15题, 什么是rule set?

Rule set就是对一个元素进行样式定义的集合。它有两个部分，一个是selector, 一个是样式集合。

第16题, Css的优势有哪些?

提供了样式变换的灵活性。

容易维护。

允许数据和样式的分离。

加载网页更快了。

多种设备的兼容性很强。

提高了浏览器的适应性。

Tag

Class.

ID.

第18题, 说几个pseudo元素。

First line, first letter, selection, after, before.

第19题, 说几个pseudo class。

hover, active, first child, last child, nth child.

第20题, 什么是属性？如何使用它们?

你可以使用方括号来指定属性值。input[type="radio"] {

}

第21题, !Important是做什么用的?

这个标记是用来重写已经存在的样式。用的时候一定要小心.

第22题, Flex box, grid box的区别是什么?

这两个都是非常好的布局设计工具。

Flex box相对来说更简单，它可以对横向和纵向的内容进行排列。

Grid box, 倾向于对双向也就是横向和纵向内容同时进行兼顾。

第23题, 变量是做什么用的?

变量可以用来定义类似颜色，字体，字体大小，一些坐标等可以重用的数值。

第24题， 什么是functions或者mixins?

Mixins提供了一种动态机制，可以根据输入的参数来设定不同的样式。

第25题， 什么是universal selector?

Universal selector匹配的是任何一个元素类型。

第26题, Display hidden 和 display none有什么区别?

Display hidden是把元素隐藏起来，但是仍然占据空间，仍然会影响整个文档的布局。

Display none, 隐藏, 不占空间。