本文主要是介绍掌握技术面试的 50 多个 CSS 问题和挑战，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

掌握技术面试的 50 多个 CSS 问题和挑战

对于任何寻求第一次机会或申请工作的人来说，进入技术面试阶段是最令人期待的里程碑之一。如果您正在申请前端职位，您可能需要 解决一些关于 CSS 的测试和回答问题 .

考虑到这一点，我编制了一份清单 一些最常见的 CSS 问题和问题 候选人面临的。让我们开始吧！

Photo by 费伦茨·阿尔马西 on 不飞溅

问题

一般的

1. 什么是 CSS？
2. CSS从哪一部分处理 结构-表现-行为 在网页中？
3. 编写一个简单的 CSS 语法并解释它的每个部分。
4. CSS如何包含在HTML文件中？解释不止一种方式。

选择器

1. 什么是 CSS 选择器？
2. CSS 中有哪些不同类型的选择器？
3. 如何编写类型选择器？
4. 如何编写 ID 选择器？
5. 如何编写类选择器？
6. 如何编写属性选择器？
7. 如何将多个选择器分组为一个通用样式？
8. 如何编写通用选择器？

组合器

1. CSS 中的组合子是什么？
2. 什么是后代组合器？你怎么能写一个？
3. 什么是子组合器？你怎么能写一个？
4. 什么是相邻兄弟组合子？你怎么能写一个？
5. 什么是通用兄弟组合子？你怎么能写一个？

伪类和元素

1. 什么是伪类？
2. 选择器中的伪类是怎么写的？
3. 什么是伪元素？
4. 选择器中的伪元素是怎么写的？

单位

1. CSS 中用于长度值的不同单位是什么？
2. 举一些绝对和相对长度单位的例子。
3. 有什么区别 时间 和 雷姆 ?
4. 有什么区别 时间 , 像素 , pt 和 % ?
5. 什么是 大众 和 vh ?

颜色值

1. 如何在 CSS 中定义颜色值？
2. 如何在 RGB 中定义颜色值？
3. 如何在 HEX 中定义颜色值？
4. 如何在 HSL 中定义颜色值？
5. 颜色值中的 alpha 值是什么？

盒子模型

1. CSS中的盒子模型是什么？
2. 盒子模型有哪些不同的组成部分？
3. 什么是填充？
4. 什么是保证金？
5. 什么是边界？
6. 什么是大纲？
7. Outline 与 Border 有何不同？
8. 如何计算元素的总宽度和高度？
9. box-sizing 属性有什么用？
10. box-sizing 属性的不同值是什么？

挑战

CSS 选择器

1. 全部着色 p 粉红色的元素
2. 用 id 为元素的文本着色 e72 变蓝
3. 用类为所有元素着色 字幕 变红
4. 在一条规则中，为所有颜色着色 p 和 部分 橙色元素

背景

1. 将整个页面的背景颜色设置为红色
2. 为整个页面设置背景图片
3. 显示在整个页面中重复的背景图像
4. 在左上角显示背景图片且不重复

利润

1. 设置边距 1 件事 到一个 按钮
2. 设置边距 2em 水平和 1em 垂直于 p 元素
3. 为每边设置不同的边距值 p 元素

填充

1. 设置 a 的顶部填充 按钮 元素到 20像素
2. 设置填充 32像素 在每一侧 p 元素

边界

1. 显示段落的虚线边框
2. 设置上边框双，左边框虚线，右边框虚线和下边框实线
3. 设置边框 3像素 , 加倍并将黄色变为 a p 元素
4. 画一个半径为 5px 的圆
5. 绘制一个半径为 10px、25px 的椭圆

文本

1. 对齐 a 的文本 p 元素到中心
2. 对齐 a 的文本 p 元素
3. 仅对齐 a 中的最后一行文本 p 元素
4. 将段落内的文本设置为全部大写
5. 样式内的文本 h2 大写的元素
6. 删除超链接元素的下划线
7. 删除文本
8. 在上划线和下划线中设置文本的某些单词的样式
9. 间距为 0.5 的空间线 p 元素
10. 空格词 20像素 分开在一个 p 元素
11. 显示一个 p 从右到左的元素
12. 缩进 a 的第一行 p 元素到 1 件事
13. 显示阴影 .5rem （水平和垂直）到文本

位置

1. 将文本放置在图像的左上角
2. 显示一些固定在页面特定位置的文本
3. 在页面中显示一些粘性文本

溢出

1. 隐藏溢出段落的滚动条
2. 仅在溢出时显示段落的滚动条

高度宽度

1. 设置宽度 p 元素为页面的 1/3。
2. 将高度设置为 250像素 对于一个 div
3. 将最小宽度设置为 100像素 和最大宽度 300像素 为一个 p 元素

结论

我用一些问题整理了这个列表，但我想到了一些更高级的问题，所以 如果你想要第 2 部分，请告诉我 在评论中。

谢谢阅读！在本平台关注我，阅读更多编程内容。祝你有美好的一天，很快再见！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23524/12161001

这篇关于掌握技术面试的 50 多个 CSS 问题和挑战的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！