面试题汇总（CSS篇）

以你之姓@ 2022-07-12 14:52 197阅读 0赞

## 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][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][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][http_www.runoob.com_cssref_css3-pr-mediaquery.html]

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

@font-face  
详见：[http://www.w3school.com.cn/css3/css3\_font.asp][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][http_www.w3school.com.cn_cssref_pr_box-sizing.asp]

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

SVG为可缩放矢量图形，详见：  
[http://www.w3school.com.cn/svg/index.asp][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，或反之的理由？为什么？

[http_www.cnblogs.com_pssp_p_5948356.html]: http://www.cnblogs.com/pssp/p/5948356.html
[http_www.w3school.com.cn_css_css_pseudo_elements.asp]: http://www.w3school.com.cn/css/css_pseudo_elements.asp
[http_www.runoob.com_cssref_css3-pr-mediaquery.html]: http://www.runoob.com/cssref/css3-pr-mediaquery.html
[http_www.w3school.com.cn_css3_css3_font.asp]: http://www.w3school.com.cn/css3/css3_font.asp
[http_www.w3school.com.cn_cssref_pr_box-sizing.asp]: http://www.w3school.com.cn/cssref/pr_box-sizing.asp
[http_www.w3school.com.cn_svg_index.asp]: http://www.w3school.com.cn/svg/index.asp