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

[b1t]

在学前端，看了 React 、Nextjs

又边看 Tailwind CSS 的文档边写点东西

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

css 有什么固定套路可以用吗？
你们怎么度过的这个阶段？

[FeifeiJin]

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

[Guidoo]

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

[Puteulanus]

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

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

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

[43n5Z6GyW39943pj]

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

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

[murmur]

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

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

[o00O00o]

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

[crocoBaby]

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

[b1t]

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


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

[DOLLOR]

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

[angrylid]

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

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

[lneoi]

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

[wuyiccc]

直接 flex 干一切

[wuyiccc]

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

[arfaWong]

模仿和使用练习

[particlec]

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

[storyxc]

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

[wu67]

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

[Jungzl]

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

[jy02534655]

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

[ARslince]

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

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