css 好难，你们怎么熟练把 css 用起来的？

都 2024 了，不需要做 IE 兼容性，不要求你背八股文写各种奇奇怪怪的 hack ，有 flex 布局，直接源生支持--var 和 calc

搭配 ai 加成和各种工具，比如专门做阴影、渐变的

学不会就是菜，难什么，你没好好学而已

抛去各种炫技、动画，css 本身是切分的艺术，要学会拆布局，拆成几个部分，找出每个部分的规律，一层层拆下去

@murmur 大佬，确实想着着急出东西，想着边用边学，不过不尽人意。目前在尝试着重新实现一边 v 站，这个过程基本要靠 gpt 完成布局，自己 css 写起来很吃力，如果掌握 flex 布局，是不是就能应对大部分场景了？

刚好也在用 nextjs 和 tailwind 搞博客，放一个链接在这，https://www.augusts.me 。
我的答案就是先用起来，边解决问题边熟练。就像学习 office 一样，看完《 word 操作大全还是不会用 word 》，能解决自己需求就好了。

我现在前段的状态就是，你让我微调边距，字体，样式都还行。

但你让我搞布局，我想上吊...

可以快速把《响应式 Web 设计 HTML5 和 CSS3 实战(图灵出品）》（俗称瓢虫书）看看，我当时是用它入门的。
然后把阮一峰老师的 flex 和 grid 布局文章都看看，就可以莽了

@b1t gpt 可以写代码，但是得自己练习，毕竟 gpt 出的东西和已有项目的风格不一样，你乱写未必过的了代码审查

可以试着先无视各种文字、按钮，先把每个区域用白块做出来，布局做熟练了再开始填内容

比如这个 v 左侧区域，可以先把主楼 回复 新回复框 这几个白块做出来，然后在回复里拆出子楼层，然后分出回复的头像、标题、正文区域，一点点循序渐进来

这种拆布局拆两次就习惯了，很简单

@InDom
@hevi
啊，所以布局方面，大家基本上都是通过 flex 布局一把索是嘛

@b1t 你一开始不考虑 position: absolute 这些用法或者用 before ，after 写伪类，可以把所有的布局都按左右、上下拆分，这样写出来就简单的多，上手也快

当时因为 CSS 放弃了前端，实在是整不会

我亦无他，惟手熟尔。我当年是这么学习，一比一绘制 https://m.jd.com/的 html 、css 。上面图片保存下来；然后是 CSS 动画，过渡。可以开发者工具看它怎么写的

@murmur 大佬好方法，感谢提供思路

@Simle100 css 给人感觉看着不难，一下手就不是那么会事了，得练一练

谷歌的教程，还算写的很好的 https://web.developers.google.cn/learn/css

@lovedebug 我去看看，谢谢

，其自然就了，然後越用越熟，哪不查哪，多看文。

我以前也纠结 css 各种兼容和布局，后来发现，只要用 Twitter 出品的框架 bootstrap ，就不用那么麻烦

html/js/css 是前端最基础的东西。正经前端简历上都不敢写这些，因为太基础了。你如果要用前端，起码吧基础看一下吧。
每次看到说自己不擅长写 y 样式就觉得在侮辱。好像“高级的”你百度一下就会了不屑于学这种低级的东西。逼都让你装了回头再啐一口。

盒子模型
流式布局 定位元素
bfc
stacking context
inline 行框 基线
flex grid
这些基本功学学就差不多了
剩下的用到再学

真没啥难的，又不需要你兼容老浏览器，以前什么垂直居中的 20 种方法，分割布局的各种奇怪 trick ，现在都能用 flex ，更复杂点的也能用非常直观的 grid ，现在能用到的属性看一看基本没有什么理解不了的，你无非是没法 1 天学会 30 天的知识就着急了

我是决定永远也学不会 css 的。

布局就 flex 和 grid 一把梭，找几个常见的布局，多练几次就会了

“但是 css 是来回调试，经常不生效，或者位置奇奇怪怪”

浏览器的元素查看面板能看到每个元素的样式和计算样式，遇到不生效或者位置奇怪的时候，顺着选择器、继承这些去看，找到确定的原因。

它不是平白无故“失效”和“位置奇怪”的，你不理解的地方就是你该去学习的地方，每次搞懂了下次再出问题的时候对背后的逻辑分析都会清晰一点。你如果只想“换个属性试试”、“换个布局器试试”这样去试，等于每一次面对的都是全新的问题。

flex 够用, 炫酷的那些一般也玩不转

可以说精通 js, 但没人敢说精通 css

@MorJS 精通没必要，贴图解决 100%问题，贴视频解决 120%问题，复杂需求用 unity 或者 unreal 做解决 200%问题

css 不是万金油，当年还在玩 IE 年代的 css 动画，支付宝的背景就开始贴完整视频了

@reDesign 有意思，请问一下头像是如何生成的呢

flex 一把梭,秀操作就学 grid,想了解布局的前世今生就从 table,float,margin,position 看一遍

@yanulg 老哥说的对的，其实也是因为一看好像就懂了，所以感觉自己就行了，其实还是得多学学想想练练


@Puteulanus
你如果只想“换个属性试试”、“换个布局器试试”这样去试，等于每一次面对的都是全新的问题。
------------
老哥，太懂了。哈哈哈哈，感谢分享查找问题的方法

CSS 最基本的功能就是调间距、大小、色彩，搞明白 margin 、padding 、border 、font-size 、color 、background ，就能干很多活了。
布局方面优先考虑 flex 。当然有的人 flex 怎么都学不会，用 inline-block 也不是什么可笑的事情。
如果只是想快速出东西，直接用组件库就好了。

本站怪现状之一，一群人日常嘲笑前端切图仔，而另一群人不会写 CSS

差不多就是 15 楼讲的那样，先把最基本的这些概念学完了。剩下的就是多写多练了。

文档流 知道浏览器对常见的元素默认的处理特性 然后可以开始 F12 对着调需要的效果

直接 flex 干一切

我现在已经放弃思考 css 到底怎么玩了，直接 flex ，可以解决我 95%的问题。剩余 5%的问 gpt, 实在不行!important

模仿和使用练习

display: flex;
align-items: center;
justify-content: center;
写的最多的代码了

这玩意没别的办法，就是多写，去年写了两个自用的小项目，当时调整样式已经很得心应手了。这俩小项目搞完没碰前端，就又忘的差不多了。

用多了就熟了.
前端仔表示当年看了一星期就上手了, 至于干活, 当然是 flex 一把梭. 如果常见业务 flex 解决不了, 那是业务有毛病, 得花更多时间去布局, 而且大多数情况下其实客户根本不关心这种效果...

@particlec 这坨我通常用 unocss 的 shortcuts 简写成 fcc 的类名，还有其他一些 fcb ，fbb 之类的

先学习下 css 选择器，了解下 css 权重这种基本功吧

https://github.com/slince-zero/IMaker

可以看一下我这个项目，也是用的 tailwindcss

现代的 CSS 多简单，又不考虑远古，远古 float 是恶心到极致。
flex 就能搞定 99%的布局问题，其他的就属于元素个别样式了。

简直是深有体验。。。和 op 一样，也是想着直接上手，项目里学习，结果发现 css 这玩意就是 op 总结的，要不不生效，要不就各种奇怪，感觉还是没用对方法

flex 和定位能解决 99%的问题.
然后就是 css 三大特性, 层叠(覆盖), 继承, 优先级(权重)

那我建议你还是拿主题改，这样更好，不然兴趣都磨光了

@reDesign 这个好酷，请问导航栏动效是怎么实现的呢

月经贴了

直接 tailwindcss 边用边学习 css 知识 用过都说好

flex 就够用了

你这才刚入门就难，想学的深入就更难了！

css （的深入）是前端最难的东西。
“css 是来回调试，经常不生效，或者位置奇奇怪怪” 正常，99%的前端都不知道一个属性到底为什么造成了某个奇怪的效果/位置。真想理解得看这个东西 https://drafts.csswg.org/ ，太乱了。

CSS 最大难点是吃经验和很多反直觉的遗留问题，新手不要先想着兼容 ie 那些了，最快方法应该就是找现成的例子仿写。

边做边学不一定是个好办法，因为低水平重复调试会浪费时间，最起码掌握了百分之七八十之后边做边学才比较有效果。

tailwind 教程看看直接就开始一把梭了，直接项目中用，遇到问题就 gpt 或者翻翻文档，实战下来没啥问题，普通的 css 就算之前学过现在也不是什么都记得了。

https://devv.ai/zh 直接问你要什么效果，直接出码。
所以重点还是在于你要知道 css 大概能做到怎样的效果

招个熟练 CSS 的

先找个架子，然后现在搜索，现在是问 ai

多写，多踩坑，没有捷径的

tailwindcss

要学会 F12 开发者工具排查。

@murmur 但是 flex 有 Safari 的各种 bug （布局尺寸改变相关）
然后导致很多抽象失效，因为单独测试的时候都是好的，组合起来 safari 就炸了 （ flex in flex
@Puteulanus Safari 还真的可以出现 devtools 里给出的框是正确的，但渲染出来就是炸的情况，还能在 devtools 打开后（因为改变了页面宽度导致 reflow ）自动恢复，有时候真的只能换个布局（）

布局需要多练习，先拆解别人的布局方案，然后尝试对着设计稿复现

为什么好多后端 boy 都很难上手 css

可以先练习使用 css 连接数据库，熟悉之后就可以写写布局，动画了

这玩意属实玩不转，学 scala 、go 、python 、java 都没这么难。反正就是各种尝试。最关键的，项目还是 scss 。

Tailwind CSS 并不能提升你的 CSS 技能

因为 CSS 是没有逻辑可言，推荐看一下这个 https://zhuanlan.zhihu.com/p/29888231 ，反正我是因为 css 放弃前端的

多写就背下来了，我是设计，自学的 html 、css ，js 学不了一点...

从改网页模版开始学的，然后自己设计、敲代码搭了个人站

也是三四年前了，现在网页端刷知乎摸鱼用最多的是 display:none

熟能生巧吧。。。做得多了自然就懂了，就是多个样式之间的关联关系，出了问题自己搞不定就问 chatgpt ，只要你描述的够清楚，他就能一下吧 css 全给你搞定

@lycpang 所以，你怕 chatgpt 么，，如果你连 css 都不会，chatgpt 真的能取代你。

Grid 布局： https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Flex 布局： https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

把这两篇文章看完，并且跟着敲一遍。保证你布局相关肯定没问题。

@FeifeiJin 好多年不见飞飞了

@codehz 那你不也搞清楚了原因，还能跟人分享这个案例（摊手）
而不是“有时候别的地方能用的样式不知道为啥突然就不好使了，换个布局就好了”

我们有一回项目临近尾声了甲方突然说他们员工用的都是苹果，要求保证 Safari 用起来正常，QA 一测茫茫多的地方显示有问题，开发头都大了

可以借鉴培训班的思路：照着淘宝京东再来一个复杂点的网站抄，只抄静态浮现，原模原样浮现，有不会的就打开调试看看人家怎么做的，抄两三个基本 css 就是信手拈来了，归根结底还是锻炼少
当然这是基本的 css 训练，至于什么兼容处理，动效实现就是自己积累了

学下弹性盒子, 一把梭, 简单的一批

Chrome 还没诞生的年代，靠着各种 CSS CHM 手册、CSS 禅意花园、IETester 和 Firebug 也熬过来了。熬死了那个年代的 IE 、Opera 、Flash 、Silverlight 、Adobe AIR...

浮现-->复现

@reDesign 好酷！想学

css 的浮动我至今都没搞懂

@Puteulanus 但确实是上下文相关的，我的意思是，同样一个组件，放第一个位置，嗯，没问题，前面随便加一点别的，就整个分崩离析，完全没办法用逻辑解释（当然，chrome 什么的都是正常的），就是 safari 布局引擎本身的 bug
而且主要出现的场景就是 flex layout ，不过很多时候能被 grid 替代，换成 grid 实现一样的效果就不会有问题（）

遇事不决 position

需不需要手把手教在线教学，红包你看着给

很简单，你只要在浏览网页时也想着怎么布局就行。遇到不会的，打开控制台看一下。

感觉 css 就不属于编程语言，顶多算是设计语言，就是给组件设置属性

flex + grid 解决绝大多数布局，再补充问一问 gpt ，做几个页面就熟悉了

还手动写？让 gpt4 写就行了

现在 flex 一把梭，高级点的加上 grid ，absolute 、float 这些东西都不太会用到。css 难是因为它各种属性不正交，相互之间会影响，外加浏览器会自带一些属性。但 css 好歹（大部分）是无状态的，调试起来比 js 操纵的布局容易很多。

IE6

之前也一直觉得 css 难，但实际用了之后发现现代 css 挺简单的，flex grid 布局无脑套，其他的样式看着 tailwind 文档自己挑

css 真的难，没什么统一的组织理论，都是零零散散，tailwind 不全能，postcss 也不全能，全靠各种拼凑。
你要说做个什么效果，那还好，但是要把整个项目组织起来，真是头大

主业是后端。如果我写 css ，那就是面向玄学，开 F12 ，各种调调调，效果对了就复制贴到代码里面。

@reDesign 挺不错的 想问下开源没有

现在 flex grid 感觉已经很简单了
要想当年要兼容 IE6 的时代，用 flex 都要畏畏缩缩的

又不是不能用，业务实现就行，丑点怎么了

CSS 就是很难。

1. 一个效果有无数种实现。比如一个像素也有十几种常见做法，我都会。但是用哪个好？选择障碍症自杀了。

2. 想实现一个效果，改来改去总是差几个像素。强迫症自杀了。

3. 抄别人的实现，抄过来几百行代码，能用，但是这么多垃圾代码我不允许。删删删，小不小心效果删没了……加回来几行，好像又能用了，继续删删删。删了一晚上，妈的算了我自己写吧。洁癖症自杀了。

3. CSS 动画，有现成的，拿过来就能用。啊，要我改个特效？智力不足者自杀了。

4. 丑？丑是我的问题吗。让你招个设计你不招，非让老子写，说了老子不会做设计。无产者自杀了。

不知道还有多少人记得 web 标准化的历程…blueidea 到死还是 table 布局

不管啥布局，直接 position absolute 一把梭，统统写死。

现在的人 CSS 都不过 MDN 了吗...当年把 MDN 和 CSS 权威指南都过了一遍, 从此 CSS 简单轻松

感觉楼上有位专业的说的非常有道理的：flex+grid 解决大部分问题、复杂的动画问题完全可以上图片或视频，更进一步的需求则用诸如 unity 、three js 、d3 等前端库了。
综上说，“CSS 难学”真的不是做前端的一个障碍。更何况现在还有 flutter ，如果觉得 CSS 难学，完全可以用其他框架替代嘛
（ BTW ，我觉得 flutter 描述界面那个表现力还不如 X （ HT ） ML+CSS 呢）

建议是找个网站写，手搓博客小工具之类的，还有就是参考别人界面布局的样式，模仿着写，熟练后自然就会了