Can I use?
› http://caniuse.com/
Less
› http://lesscss.org
Cool Libraries
› Bootstrap from Twitter
› Jetstrap
这是一个创建于 232 天前的主题，其中的信息可能已经有所发展或是发生改变。
在学前端，看了 React 、Nextjs
又边看 Tailwind CSS 的文档边写点东西
但是 css 是来回调试，经常不生效，或者位置奇奇怪怪
css 有什么固定套路可以用吗？
你们怎么度过的这个阶段？
113 条回复 • 2024-05-10 14:42:56 +08:00
 |
1
murmur 232 天前  8
都 2024 了，不需要做 IE 兼容性，不要求你背八股文写各种奇奇怪怪的 hack ，有 flex 布局，直接源生支持--var 和 calc
搭配 ai 加成和各种工具，比如专门做阴影、渐变的 学不会就是菜，难什么，你没好好学而已 |
|
2
murmur 232 天前 3
抛去各种炫技、动画，css 本身是切分的艺术，要学会拆布局，拆成几个部分，找出每个部分的规律，一层层拆下去
|
 |
3
b1t OP @murmur 大佬，确实想着着急出东西，想着边用边学，不过不尽人意。目前在尝试着重新实现一边 v 站，这个过程基本要靠 gpt 完成布局，自己 css 写起来很吃力，如果掌握 flex 布局，是不是就能应对大部分场景了？
|
 |
4
reDesign 232 天前 2
刚好也在用 nextjs 和 tailwind 搞博客，放一个链接在这，https://www.augusts.me 。
我的答案就是先用起来，边解决问题边熟练。就像学习 office 一样，看完《 word 操作大全还是不会用 word 》，能解决自己需求就好了。 |
 |
5
InDom 232 天前 4
我现在前段的状态就是，你让我微调边距，字体，样式都还行。
但你让我搞布局，我想上吊... |
 |
6
hevi 232 天前 2
可以快速把《响应式 Web 设计 HTML5 和 CSS3 实战(图灵出品）》（俗称瓢虫书）看看，我当时是用它入门的。
然后把阮一峰老师的 flex 和 grid 布局文章都看看，就可以莽了 |
|
7
murmur 232 天前 1
@b1t gpt 可以写代码，但是得自己练习，毕竟 gpt 出的东西和已有项目的风格不一样，你乱写未必过的了代码审查
可以试着先无视各种文字、按钮，先把每个区域用白块做出来，布局做熟练了再开始填内容 比如这个 v 左侧区域，可以先把主楼 回复 新回复框 这几个白块做出来，然后在回复里拆出子楼层，然后分出回复的头像、标题、正文区域，一点点循序渐进来 这种拆布局拆两次就习惯了，很简单 |
|
9
murmur 232 天前 1
@b1t 你一开始不考虑 position: absolute 这些用法或者用 before ，after 写伪类，可以把所有的布局都按左右、上下拆分，这样写出来就简单的多，上手也快
|
 |
10
Simle100 232 天前
当时因为 CSS 放弃了前端，实在是整不会
|
 |
11
bzw875 232 天前 1
我亦无他，惟手熟尔。我当年是这么学习，一比一绘制 https://m.jd.com/的 html 、css 。上面图片保存下来；然后是 CSS 动画，过渡。可以开发者工具看它怎么写的
|
 |
14
lovedebug 232 天前 1
谷歌的教程，还算写的很好的 https://web.developers.google.cn/learn/css
|
 |
16
yKXSkKoR8I1RcxaS 232 天前
沒，順其自然就會了，然後越用越熟練，哪裏不會查哪裏，多看文檔。
|
 |
17
linyongxin 232 天前
我以前也纠结 css 各种兼容和布局，后来发现，只要用 Twitter 出品的框架 bootstrap ，就不用那么麻烦
|
 |
18
Jame00001 232 天前 1
html/js/css 是前端最基础的东西。正经前端简历上都不敢写这些，因为太基础了。你如果要用前端，起码吧基础看一下吧。
每次看到说自己不擅长写 y 样式就觉得在侮辱。好像“高级的”你百度一下就会了不屑于学这种低级的东西。逼都让你装了回头再啐一口。 |
 |
19
Justin13 232 天前 via Android 1
盒子模型
流式布局 定位元素 bfc stacking context inline 行框 基线 flex grid 这些基本功学学就差不多了 剩下的用到再学 |
 |
20
yanulg 232 天前 1
真没啥难的，又不需要你兼容老浏览器，以前什么垂直居中的 20 种方法，分割布局的各种奇怪 trick ，现在都能用 flex ，更复杂点的也能用非常直观的 grid ，现在能用到的属性看一看基本没有什么理解不了的，你无非是没法 1 天学会 30 天的知识就着急了
|
 |
21
FeifeiJin 232 天前 via Android
我是决定永远也学不会 css 的。
|
 |
22
Guidoo 232 天前 2
布局就 flex 和 grid 一把梭，找几个常见的布局，多练几次就会了
|
 |
23
Puteulanus 232 天前 3
——“但是 css 是来回调试，经常不生效，或者位置奇奇怪怪”
浏览器的元素查看面板能看到每个元素的样式和计算样式，遇到不生效或者位置奇怪的时候，顺着选择器、继承这些去看，找到确定的原因。 它不是平白无故“失效”和“位置奇怪”的，你不理解的地方就是你该去学习的地方，每次搞懂了下次再出问题的时候对背后的逻辑分析都会清晰一点。你如果只想“换个属性试试”、“换个布局器试试”这样去试，等于每一次面对的都是全新的问题。 |
 |
24
43n5Z6GyW39943pj 232 天前 1
flex 够用, 炫酷的那些一般也玩不转
可以说精通 js, 但没人敢说精通 css |
|
25
murmur 232 天前 1
@MorJS 精通没必要，贴图解决 100%问题，贴视频解决 120%问题，复杂需求用 unity 或者 unreal 做解决 200%问题
css 不是万金油，当年还在玩 IE 年代的 css 动画，支付宝的背景就开始贴完整视频了 |
 |
27
crocoBaby 232 天前 1
flex 一把梭,秀操作就学 grid,想了解布局的前世今生就从 table,float,margin,position 看一遍
|
|
28
b1t OP @yanulg 老哥说的对的，其实也是因为一看好像就懂了，所以感觉自己就行了，其实还是得多学学想想练练
@Puteulanus 你如果只想“换个属性试试”、“换个布局器试试”这样去试，等于每一次面对的都是全新的问题。 ------------ 老哥，太懂了。哈哈哈哈，感谢分享查找问题的方法 |
 |
29
DOLLOR 232 天前
CSS 最基本的功能就是调间距、大小、色彩，搞明白 margin 、padding 、border 、font-size 、color 、background ，就能干很多活了。
布局方面优先考虑 flex 。当然有的人 flex 怎么都学不会，用 inline-block 也不是什么可笑的事情。 如果只是想快速出东西，直接用组件库就好了。 |
 |
30
angrylid 232 天前 1
本站怪现状之一，一群人日常嘲笑前端切图仔，而另一群人不会写 CSS
差不多就是 15 楼讲的那样，先把最基本的这些概念学完了。剩下的就是多写多练了。 |
 |
31
lneoi 232 天前
文档流 知道浏览器对常见的元素默认的处理特性 然后可以开始 F12 对着调需要的效果
|
 |
32
wuyiccc 232 天前 1
直接 flex 干一切
|
|
33
wuyiccc 232 天前
我现在已经放弃思考 css 到底怎么玩了，直接 flex ，可以解决我 95%的问题。剩余 5%的问 gpt, 实在不行!important
|
 |
34
arfaWong 232 天前
模仿和使用练习
|
 |
35
particlec 232 天前 1
display: flex;
align-items: center; justify-content: center; 写的最多的代码了 |
 |
36
storyxc 232 天前
这玩意没别的办法，就是多写，去年写了两个自用的小项目，当时调整样式已经很得心应手了。这俩小项目搞完没碰前端，就又忘的差不多了。
|
 |
37
wu67 232 天前
用多了就熟了.
前端仔表示当年看了一星期就上手了, 至于干活, 当然是 flex 一把梭. 如果常见业务 flex 解决不了, 那是业务有毛病, 得花更多时间去布局, 而且大多数情况下其实客户根本不关心这种效果... |
 |
39
jy02534655 232 天前
先学习下 css 选择器，了解下 css 权重这种基本功吧
|
 |
40
ARslince 232 天前 via iPhone
|
 |
41
cgpiao 232 天前
现代的 CSS 多简单，又不考虑远古，远古 float 是恶心到极致。
flex 就能搞定 99%的布局问题，其他的就属于元素个别样式了。 |
 |
42
zwpaper 232 天前
简直是深有体验。。。和 op 一样，也是想着直接上手，项目里学习，结果发现 css 这玩意就是 op 总结的，要不不生效，要不就各种奇怪，感觉还是没用对方法
|
 |
43
jqtmviyu 232 天前 1
flex 和定位能解决 99%的问题.
然后就是 css 三大特性, 层叠(覆盖), 继承, 优先级(权重) |
 |
44
dj721xHiAvbL11n0 232 天前
那我建议你还是拿主题改，这样更好，不然兴趣都磨光了
|
 |
45
AirCrusher 232 天前
@reDesign 这个好酷，请问导航栏动效是怎么实现的呢
|
 |
46
Ritter 232 天前
月经贴了
|
 |
47
freezebreze 232 天前
直接 tailwindcss 边用边学习 css 知识 用过都说好
|
 |
48
Ashore 232 天前
flex 就够用了
|
 |
49
laobobo 232 天前
你这才刚入门就难，想学的深入就更难了！
|
 |
50
abcdxe2v 232 天前
css （的深入）是前端最难的东西。
“css 是来回调试，经常不生效，或者位置奇奇怪怪” 正常，99%的前端都不知道一个属性到底为什么造成了某个奇怪的效果/位置。真想理解得看这个东西 https://drafts.csswg.org/ ，太乱了。 |
 |
51
NerbraskaGuy 232 天前
CSS 最大难点是吃经验和很多反直觉的遗留问题，新手不要先想着兼容 ie 那些了，最快方法应该就是找现成的例子仿写。
|
 |
52
WhateverYouLike 232 天前
边做边学不一定是个好办法，因为低水平重复调试会浪费时间，最起码掌握了百分之七八十之后边做边学才比较有效果。
|
 |
53
coolmint 232 天前
tailwind 教程看看直接就开始一把梭了，直接项目中用，遇到问题就 gpt 或者翻翻文档，实战下来没啥问题，普通的 css 就算之前学过现在也不是什么都记得了。
|
 |
54
xuhai951753 232 天前
https://devv.ai/zh 直接问你要什么效果，直接出码。
所以重点还是在于你要知道 css 大概能做到怎样的效果 |
 |
55
walker1024 232 天前
招个熟练 CSS 的
|
 |
56
libasten 232 天前
先找个架子，然后现在搜索，现在是问 ai
|
 |
57
lianxiben 232 天前
多写，多踩坑，没有捷径的
|
 |
58
seven123 232 天前
tailwindcss
|
 |
59
DT27 232 天前
要学会 F12 开发者工具排查。
|
 |
60
codehz 232 天前
@murmur 但是 flex 有 Safari 的各种 bug （布局尺寸改变相关）
然后导致很多抽象失效，因为单独测试的时候都是好的，组合起来 safari 就炸了 （ flex in flex @Puteulanus Safari 还真的可以出现 devtools 里给出的框是正确的，但渲染出来就是炸的情况，还能在 devtools 打开后（因为改变了页面宽度导致 reflow ）自动恢复，有时候真的只能换个布局（） |
 |
61
Leon6868 232 天前
布局需要多练习，先拆解别人的布局方案，然后尝试对着设计稿复现
|
 |
62
me1onsoda 232 天前
为什么好多后端 boy 都很难上手 css🤣
|
 |
63
xlzyxxn 232 天前
可以先练习使用 css 连接数据库，熟悉之后就可以写写布局，动画了
|
 |
64
dif 232 天前
这玩意属实玩不转，学 scala 、go 、python 、java 都没这么难。反正就是各种尝试。最关键的，项目还是 scss 。
|
 |
65
chengxy 232 天前
Tailwind CSS 并不能提升你的 CSS 技能
|
 |
66
draguo 232 天前 1
因为 CSS 是没有逻辑可言，推荐看一下这个 https://zhuanlan.zhihu.com/p/29888231 ，反正我是因为 css 放弃前端的
|
 |
67
morizawatt 232 天前
多写就背下来了，我是设计，自学的 html 、css ，js 学不了一点...
从改网页模版开始学的，然后自己设计、敲代码搭了个人站 也是三四年前了，现在网页端刷知乎摸鱼用最多的是 display:none😗 |
 |
68
lycpang 232 天前
熟能生巧吧。。。做得多了自然就懂了，就是多个样式之间的关联关系，出了问题自己搞不定就问 chatgpt ，只要你描述的够清楚，他就能一下吧 css 全给你搞定
|
 |
70
CHTuring 232 天前
Grid 布局： https://www.joshwcomeau.com/css/interactive-guide-to-grid/
Flex 布局： https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/ 把这两篇文章看完，并且跟着敲一遍。保证你布局相关肯定没问题。 |
 |
71
Lemonadeccc 232 天前
@FeifeiJin 好多年不见飞飞了
|
|
72
Puteulanus 232 天前
@codehz 那你不也搞清楚了原因，还能跟人分享这个案例（摊手）
而不是“有时候别的地方能用的样式不知道为啥突然就不好使了，换个布局就好了” 我们有一回项目临近尾声了甲方突然说他们员工用的都是苹果，要求保证 Safari 用起来正常，QA 一测茫茫多的地方显示有问题，开发头都大了  |
 |
73
DemonQ 232 天前
可以借鉴培训班的思路：照着淘宝京东再来一个复杂点的网站抄，只抄静态浮现，原模原样浮现，有不会的就打开调试看看人家怎么做的，抄两三个基本 css 就是信手拈来了，归根结底还是锻炼少
当然这是基本的 css 训练，至于什么兼容处理，动效实现就是自己积累了 |
 |
74
label 232 天前
学下弹性盒子, 一把梭, 简单的一批
|
 |
75
davin 232 天前
Chrome 还没诞生的年代，靠着各种 CSS CHM 手册、CSS 禅意花园、IETester 和 Firebug 也熬过来了。熬死了那个年代的 IE 、Opera 、Flash 、Silverlight 、Adobe AIR...
|
|
76
DemonQ 232 天前
浮现-->复现
|
 |
78
dog82 232 天前
css 的浮动我至今都没搞懂
|
|
79
codehz 232 天前
@Puteulanus 但确实是上下文相关的，我的意思是，同样一个组件，放第一个位置，嗯，没问题，前面随便加一点别的，就整个分崩离析，完全没办法用逻辑解释（当然，chrome 什么的都是正常的），就是 safari 布局引擎本身的 bug
而且主要出现的场景就是 flex layout ，不过很多时候能被 grid 替代，换成 grid 实现一样的效果就不会有问题（） |
 |
80
wentx 232 天前 6
 |
 |
81
SimonWoo 232 天前
遇事不决 position
|
 |
82
gitignore 232 天前
需不需要手把手教😌在线教学，红包🧧你看着给
|
 |
83
maxmeng936 231 天前
很简单，你只要在浏览网页时也想着怎么布局就行。遇到不会的，打开控制台看一下。
|
 |
84
wzy44944 231 天前
感觉 css 就不属于编程语言，顶多算是设计语言，就是给组件设置属性
|
 |
85
supuwoerc 231 天前
flex + grid 解决绝大多数布局，再补充问一问 gpt ，做几个页面就熟悉了
|
 |
86
mumbler 231 天前
还手动写？让 gpt4 写就行了
|
 |
87
agagega 231 天前 via iPhone
现在 flex 一把梭，高级点的加上 grid ，absolute 、float 这些东西都不太会用到。css 难是因为它各种属性不正交，相互之间会影响，外加浏览器会自带一些属性。但 css 好歹（大部分）是无状态的，调试起来比 js 操纵的布局容易很多。
|
 |
88
guxin0123 231 天前
IE6
|
 |
89
yanyao233 231 天前 via Android
之前也一直觉得 css 难，但实际用了之后发现现代 css 挺简单的，flex grid 布局无脑套，其他的样式看着 tailwind 文档自己挑
|
 |
90
oakland 231 天前
css 真的难，没什么统一的组织理论，都是零零散散，tailwind 不全能，postcss 也不全能，全靠各种拼凑。
你要说做个什么效果，那还好，但是要把整个项目组织起来，真是头大 |
 |
91
xrzxrzxrz 231 天前
主业是后端。如果我写 css ，那就是面向玄学，开 F12 ，各种调调调，效果对了就复制贴到代码里面。
|
 |
92
Rwq8xlHrBAi0ct2w 231 天前
@reDesign 挺不错的 想问下开源没有
 |
 |
93
jsq2627 231 天前
现在 flex grid 感觉已经很简单了
要想当年要兼容 IE6 的时代，用 flex 都要畏畏缩缩的 |
 |
94
leegradyllljjjj 231 天前
又不是不能用，业务实现就行，丑点怎么了
|
 |
95
kneo 231 天前 2
CSS 就是很难。
1. 一个效果有无数种实现。比如一个像素也有十几种常见做法，我都会。但是用哪个好？——选择障碍症自杀了。 2. 想实现一个效果，改来改去总是差几个像素。——强迫症自杀了。 3. 抄别人的实现，抄过来几百行代码，能用，但是这么多垃圾代码我不允许。删删删，小不小心效果删没了……加回来几行，好像又能用了，继续删删删。删了一晚上，妈的算了我自己写吧。——洁癖症自杀了。 3. CSS 动画，有现成的，拿过来就能用。啊，要我改个特效？——智力不足者自杀了。 4. 丑？丑是我的问题吗。让你招个设计你不招，非让老子写，说了老子不会做设计。——无产者自杀了。 |
 |
96
NeoChen 231 天前 via iPhone
不知道还有多少人记得 web 标准化的历程…blueidea 到死还是 table 布局
|
 |
97
Adelell 231 天前 via iPhone
不管啥布局，直接 position absolute 一把梭，统统写死。
|
 |
98
Al0rid4l 231 天前
现在的人 CSS 都不过 MDN 了吗...当年把 MDN 和 CSS 权威指南都过了一遍, 从此 CSS 简单轻松
|
 |
99
f14g 231 天前 via Android
感觉楼上有位专业的说的非常有道理的：flex+grid 解决大部分问题、复杂的动画问题完全可以上图片或视频，更进一步的需求则用诸如 unity 、three js 、d3 等前端库了。
综上说，“CSS 难学”真的不是做前端的一个障碍。更何况现在还有 flutter ，如果觉得 CSS 难学，完全可以用其他框架替代嘛 （ BTW ，我觉得 flutter 描述界面那个表现力还不如 X （ HT ） ML+CSS 呢） |
 |
100
rowink 231 天前
建议是找个网站写，手搓博客小工具之类的，还有就是参考别人界面布局的样式，模仿着写，熟练后自然就会了
|
Select Language