最新版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 元素的区别
static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。
relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式
absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不再存在。
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。
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,或反之的理由?为什么?

相关文章
相关标签/搜索