这篇文章发布于 2023年03月17日，星期五，01:13，归类于 CSS相关。 阅读 34307 次, 今日 4 次 17 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10786 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
想了10个与CSS相关的书写案例，看看chatGPT的CSS代码水平如何，评估下自己会不会失业。
一、开始啦，走起
1. 圆角渐变按钮
div {
background: linear-gradient(to bottom, #007bff, #0088cc);
border-radius: 8px;
height: 40px;
width: 120px;
}
“`
解释：
– `background` 属性定义背景颜色、图像或渐变。这里使用了 `linear-gradient()` 渐变函数，表示从顶部到底部使用蓝色线性渐变，颜色分别为 `#007bff` 和 `#0088cc`。
– `border-radius` 属性可定义边框的圆角。这里设置为 `8px`，即8像素。
– `height` 属性定义元素的高度，这里设置为 `40px`。
– `width` 属性定义元素的宽度，这里设置为 `120px`。
喔噢，天哪，有点屌啊，这水平，已经比大部分前端都厉害了，你让现在的前端手写一个CSS渐变代码，很多人都写不出来的，线性渐变根本就拼不出来。
这ChatGPT不仅写了出来，连排版都弄好了，还是markdown语法，连各个属性的含义和作用都显示了，牛！
2. flex两端对齐布局
display: flex;
justify-content: space-between; /*水平方向两端对齐*/
align-items: center; /*垂直方向居中对齐*/
}
我了个擦，全对，连选择器类名都用得非常的合适，???
3. 全屏覆盖的黑色半透明层
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
}
“`
解释：
– `position: fixed;` 让元素固定在浏览器窗口的位置，不随页面滚动而变化。
– `top: 0; left: 0;` 让元素从左上角开始覆盖整个屏幕。
– `width: 100%; height: 100%;` 让元素的宽度和高度都等于屏幕的宽度和高度，实现全屏覆盖效果。
– `background-color: rgba(0, 0, 0, 0.75);` 设置背景颜色为黑色，透明度为 75%，使用 rgba 颜色格式。
天呐个撸，我以为这一题应该会出点岔子的，没想到啊没想到，完全正确，这CSS代码水平，已经是职业水准了。???
4. 灰色分隔线
“`CSS
.separator {
position: relative; /* 设置相对定位 */
height: 1px; /* 设置高度 */
}
.separator::before {
content: “”; /* 添加伪元素 */
position: absolute; /* 设置绝对定位 */
top: 50%; /* 设置位置居中 */
left: 0; /* 从左侧开始 */
width: 100%; /* 宽度为整个父元素 */
height: 1px; /* 高度同父元素 */
background-color: #ccc; /* 灰色背景色 */
transform: translateY(-50%); /* 使用transform垂直居中 */
}
“`
在HTML中，可以将类名`separator`添加到需要添加分隔线的元素上，例如：
“`HTML
“`
这样就会在`div`的顶部添加一条1像素高的灰色分隔线。
终于遇到了一个不完美的回答了。
这个回答不能说不正确，最终的效果也确实是一个 1px 高度的灰色分隔线，但是实现逻辑就啰嗦了，直接给.separator设置background-color为灰色就可以。
至于为什么会使用伪元素，那是因为在移动端，为了实现.5px的分隔线，都使用伪元素去创建（border边框半像素渲染效果不太好，在过去），chatGPT估计有大量类似代码的学习。
5. 图片元素的样式设置
width: 10rem;
height: 10rem;
object-fit: cover;
}
对于上面的结果，我只能说一句：牛逼！
6. CSS变量的使用
a {
color: var(–link-color);
}
/* 将 a 标签的文本颜色设置为定义的变量，以便链接颜色与变量颜色相同 */
当答案出现的那一刻，我扑通一声给跪下了，这都可以，神了呀，无可挑剔。
我写的这段prompt怕是很多前端同行都会理解有误，这个chatGPT居然能够准确理解，且给出完全符合预期的代码，不得不服啊！
7. 去年支持的@container容器查询
width: 100%; /*设置容器宽度为100%*/
max-width: 1200px; /*设置容器最大宽度为1200像素*/
margin: 0 auto; /*居中显示容器*/
padding: 20px; /*设置容器内边距为20像素*/
box-sizing: border-box; /*让容器的内边距和边框不会撑开容器*/
background-color: #fff; /*给容器设置白色背景颜色*/
border: 1px solid #ccc; /*给容器设置1像素灰色边框*/
}
.container {
max-width: 750px;
}
}
这个@container规则设置容器的最大宽度为750像素，只有在视口宽度大于等于768像素时才生效。
这个就没回答正确，哈哈哈，终于，估计是训练的模型数据不包括@container容器查询，毕竟这个CSS新特性是2022年才由各大浏览器支持的。
所以，ChatGPT学习CSS新技术新特性的能力要比成熟技术弱一些。
8. CSS兼容性询问
上上篇文章介绍了Safari 16开始支持的text-align-last属性，我就问问这个，嘿嘿嘿，我觉得我好坏，这种新特性正中ChatGPT的软肋，估计是不知道的。
结果——
一开始的回答出乎我的意料，我还以为chatGPT紧跟时事，连Safari去年底支持了text-align-last属性都知道，结果我追问了下，哦吼，原形毕露了，完全错误，Safari 9根本就不支持text-align-last属性，倒是justify-content和justify-items属性是Safari 9开始支持的。
这种过于细节的知识，Safari似乎表现没那么强了，还是比不过我，哈哈哈哈哈哈哈哈哈哈哈哈???
9. :is()和:where()伪类的区别
区别：
1. :is()伪类可以接受多个参数，将其作为“或”的关系组合在一起，例如`:is(p, h1, .class)`。而:where()只能接受一个参数，与该参数组合是等效的。
2. :is()伪类可以嵌套使用，例如`:is(:first-child, :last-child)`, 但:where()伪类不能嵌套。
3. :is()不会影响其他伪类的解析，而:where()会对其他伪类和伪元素的解析产生影响。
总之，:is()相对于:where()来说更加灵活、功能更强大，但还未普及以前，我们需要继续使用:where()伪类。
嗯……???
这个问题就属于一本正经地胡说八道了，:is()和:where()伪类的区别仅在于两者的选择器优先级不同而已，语法什么都是一样的。
chatGPT应该买本《CSS选择器世界》看看，或者等下个月《CSS选择器世界第2版》也可以，那就不会犯这么明显的错误了。
这样看起来很正经的解释最容易误人子弟了。
10. 写一段最能体现你CSS功力的代码
“`
/* CSS代码块 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.card {
background-color: #fff;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
.card h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.card p {
font-size: 16px;
line-height: 1.5;
color: #333;
}
“`
这段代码展示了我对于CSS盒模型、选择器、样式属性等方面的理解。其中：
– `.container`使用了百分比宽度、最大宽度、居中对齐等布局技巧；
– `.card`则涉及了背景色、阴影、边框圆角、内外边距等效果处理；
– `h2`和`p`则是对文字排版、字体大小、颜色、行高等样式的定义。
这段代码虽然简单，但却充分展示了我的CSS功力。
这一题的回答倒是很出色，如果作为开放性的面试题的话，可以得高分。
这下麻烦了，以后出面试题，可能以前那种效果很好的开放性面试题并不能测出候选人真实的实力了。
嗯……不过也不一定，到时候一看，好家伙，几个人的回答都是类似的，还有这语言描述风格，这完美无缺的语法，肯定有鬼，淘汰！
二、感想和结论
那些半吊子水平的前端真的要瑟瑟发抖了。
好在前端发展很快，新方法新特性出现的速度是快于人工智能学习的速度的（至少现在这个版本的chatGPT是这样的），所以，只要持续学习，对细节和基础掌握牢固，还是可以干的过chatGPT的，甚至可以把chatGPT当作小弟，当作工具，助力自己的工作效率进一步提高。
例如，一些没什么技术含量的CSS代码，直接让chatGPT生成，然后你自己复制粘贴就好了。
对于那些技术稳定，已经成型的技术领域，chatGPT带来的挑战可不得了。
从上面的测试可以看出，那些成熟的，传统的CSS代码，chatGPT可以完整无误地创建出来，效果惊为天人。
而chatGPT的发展非常地快，说不定过几个月chatGPT 5.0就出来了，到时候，随便画几张草图，整个网站的HTML和CSS代码就可以出来了（4.0似乎就已经有这样的能力）。
这不就是无数团队，众多前端心心念念的，设计图直接转代码嘛。
没想到是以这样的方式出现的。
伟大的变革正在出现，做好准备，迎接风暴的到来吧！
???
本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10786
（本篇完）
- AI代码辅助工具codeium和copilot在前端表现对比 (0.352)
- CSS :not伪类可能错误的认识 (0.205)
- 巧用:is()或:where()伪类让scoped的style依然全局匹配 (0.205)
- 一万年了，CSS text-align-last终于可以用了 (0.176)
- 半深入理解CSS3 object-position/object-fit属性 (0.117)
- 为什么HTML <picture>元素很少见人使用？ (0.117)
- CSS @supports开始支持selector选择器检测了 (0.088)
- 介绍2022最期待且已正式支持的CSS container容器查询 (0.070)
- 又发现一种无需绝对定位就可以元素重叠的CSS技巧 (0.070)
- CSS高宽不等图片固定比例布局的三重进化 (0.070)
- 颠覆，原来background-image也是支持CSS动画的 (RANDOM - 0.029)
我的应用
我的应用
低代码被降维打击了
GPT数据方面的资料只截止2021年9月份。
好像有插件可以查到现在
已经瑟瑟发抖中了
我就是那个半吊子前端，哈哈哈
就差一个从UI提取json的功能。这个应该很简单，毕竟蓝湖墨刀都标注了。
chatgpt 用来改webpack之类的配置很方便，不用去网上查，想要什么功能直接跟它说，有些网上查不到的问它就可以。但它也会编回答，之前让它写一个autohotkey实现spaceFn的代码，它就给了假的回答。
以后真的惨了………..
Safari似乎表现没那么强了 =》ChatGPT似乎表现没那么强了
我是人工，不是智能
哈哈哈，前阵子让它写了个复杂正则，比我写的还要简洁一些，真跪了
是的，我已经在抖了。打字都不利索了。确实比大多数前端要强了
看大佬其他文章，突然看到了这篇哈哈哈哈。chatgpt 的训练数据是 2021 年之前的，所以新的不知道，但是他的学习速度肯定是快于任何方法特性的发展的。另外，大佬没有测试直接让他写页面，事实上如果描述恰当，他连实际项目都能写，虽然会有纰漏，有的时候驴唇不对马嘴。还有，GPT-4 模型确实已经可以根据草图生成代码了。
总之，半吊子水品的我已经开始颤抖了。
对话UI 做的好
貌似是因为chatgpt只知道2021年之前的事
新特性支持不好，感觉是因为数据库停留在21年..很多新的事实都会自己发明创造..不过这个好就好在，实时学习能力，比如，可以在接口中专门训练读某本书的全部内容，然后基于这本书来回答问题（比如chartPDf），也可以去读些比如保险合同来分析有没有坑之类的，非常非常的实用
应该会对市面上所有的低代码平台带来冲击吧，不管是真的想做低代码，还是只是想着kpi的所有团队
能兼容ie6么？