1

8

2

3

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

3

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

4

2

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

5

4

6

2

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

7

1

8

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

9

1

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

10

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

11

1

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

12

13

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

17

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

18

1

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

19

1

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

20

1

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

21

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

22

2

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

23

3

24

1

25

1

27

1

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

28

29

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

30

1

31

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

32

1

直接 flex 干一切

33

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

35

1

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

36

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

37

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

38

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

39

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

41

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

42

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

43

1

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

46

月经贴了

47

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

48

flex 就够用了

51

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

52

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

53

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

56

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

57

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

58

tailwindcss

59

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

60

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

61

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

62

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

63

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

64

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

65

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

67

68

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

69

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

72

73

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

74

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

75

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

76

浮现-->复现

78

css 的浮动我至今都没搞懂

79

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

80

6

81

遇事不决 position

82

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

83

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

84

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

85

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

86

还手动写？让 gpt4 写就行了

87

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

89

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

90

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

91

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

93

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

95

2

96

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

97

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

98

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

99

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

100

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