学习前端中，感觉 css 最难，怎么办？

[KT0J]

Android 老码农，Flutter 三年经验。
最近在学 Web 开发。
目标是能从 0 开始独立做简单的 Web 。

感觉比起 Vue ，React ，Angular 之类框架本身(至少简单 Web 不用学的很深入)，CSS 更让我觉得困难。

我现在的难题是，一个界面，怎么布局，怎么摆，感觉很困难。
写起来很有挫折。 写一点，卡一点，查一点。

找了一些 CSS 教程，学完感觉似乎没有改善。
这种只能靠多练习？

感谢。
准备仔细学下 flex ，然后用上 tailwindcss

[LandCruiser]

你自己已经说出答案了，卡一点查一点，解决这个问题当然是系统的学习一遍了。

[1t1y1ILnW0x5nt47]

css 也不能说最难,很多都是靠记的,相对记知识点,程序员更应该多看文档,文档之于程序员,犹如海澜之家之于男人,每逛一次都有新发现

[insanny]

同前端新手，css 确实是老大难，有的布局原理（比如 line-height ，line-box 这种）看的我很痛苦..
个人感觉想系统掌握有两个方向吧，一方面需要多看别人是怎么布局的，学下主流的技巧；一方面最好能看一本类似 CSS 权威指南这种书（当然看起来可能也比较枯燥），理解各种属性的运作方式。
我觉得前期还是多看多练更重要一点，至少会觉得有“产出”

[mineralsalt]

直接用 flex 干就行了

[hardto]

那就不学了，睡大觉！

[murmur]

学习能力菜，没别的理由，就算是面向 google 编程也能编出来

css 的难点是布局拆分，怎么从大到小，从外到里拆分布局，这个跟 android xml 有本质区别么

[cvbnt]

不学了，睡大觉，交给 chatgpt

[Seanfuck]

记住常用的那些就行了，也不是很多；
布局的话，常用好像也就 4 种方式：
1. inline-block 设置宽度
2. 绝对定位，position: absolute/fixed
3. flaot ，跟绝对定位相似
4. flex

[BwNVlwSq]

前几年有和你差不多的感受
多写写页面吧

[superedlimited]

css 和传统的 android xml 布局有很大不同。仔细看 mdn 文档，多写一写，写 css 时要忘掉安卓布局那回事。

[ashong]

直接从 sass/scss 开始，减少重复
布局用 flex 都可以解决

[darkengine]

flex + div 一把梭

[liveoppo]

把 flex 学好，尽量用这个。有了 flex 后 css 简单太多了，以前才是难。

[nnccree]

flex + grid 基本够用了

[retrocode]

flex 布局, 除必须使用外,忘记 position: absolute 和 float

[xingyuc]

现在没有 IE 已经好太多了

[Lesenelir]

学 flex ，再看 position ，知道这两个基本的内容后再使用 tailwindcss 你就可以做出现在绝大多数的页面。

[taotaodaddy]

OP 可以换个方式切入 CSS 的学习和使用: tailwindcss

[qingshui33]

难了就不学

[hhjswf]

gpt 有没有相关应用，根据设计稿生成 css😩

[redford42]

多写，我最开始接触的时候写了三个月才好点....

[NoManPlay]

现在 flex 和 grid 直接写现代布局，然后伪类伪元素实现一些特殊效果

[dcsuibian]

《精通 CSS 》

[weixiangzhe]

布局只有 flex 和 grid ， 其他都是历史遗留

[notejava]

作为一个后端，刚写 CSS 也挺痛苦，写多了就好了，多积累，多 F12 看看别人的网站是怎么实现的。

[sentinelK]

CSS 目前最流行的布局方式，和 Android 并没有任何区别。
横向、纵向线性布局，高宽，居中/等分/权重/向 x 对齐，外边距内边距，背景边框圆角，
如此 90%的界面已经搞定了。

[sanmaozhao]

程序员学 CSS 确实是最难的，因为
1 、它并不是个编程语言，其他语言的经验很难迁移过来
2 、很多 css 属性值的设置，并不是正交的。设置了 a 属性的值，会隐含式地牵连到 b 、c 属性的效果

如何应对？
1 、如果要求不高，就依靠 UI 库吧，用现成的 UI 组件去组合出界面来，就不用碰 css 了
2 、要求高，就只能多学多练了，感觉没啥捷径。我也推荐《精通 CSS 》这本书

[poporange]

我是爱好学习的代码，前端的 css 简直是痛苦中的痛苦...

[zzzkkk]

布局怎么摆 页面设计是产品经理的职责 也是很耗脑的工作 必须要有一个人专门做
产品经理不但要研究同类产品的界面和交互 具体细节 从运营人员里搜集汇总需求 还要有自己的微创新
前端的职责是从美工手里拿设计图 把它变成 html css js

一个人碰到了这种页面内容怎么摆怎么设计 这种难题 相当于是在做三个人的工作 也差不多是闭门造车

[worldqiuzhi]

css 自己写感觉不难 修修改改勉强能用 最怕产品指手画脚 各种骚操作 这块不好看 那块偏一点 这个组件顺序调整一下 就很搞 很浪费时间

[SleepyRaven]

"一个界面，怎么布局，怎么摆"，这个算设计层面了吧
css 是把已经摆好的布局设计图用代码复现出来
我的建议是...flex 一把梭🐶

[gitignore]

v 我 500 手把手教，有问题随时问 😛

[xz410236056]

2023 年了还写 CSS ？前端不是一堆框架吗

[SharkRazor]

多写多画，找已有的网站模仿去画一遍再 f12 看看人家怎么画的，慢慢的就有思路了

[AndrewAdam]

flex
chatgpt

[giaodadi]

用框架，套模板
熟能生巧

[dddd1919]

学会盒模型打天下

[Ju22]

关注一下张鑫旭的博客，css 总统山的人物。

[wanderingaround]

遇事不决 flex,把定位搞清楚，建议不要看太多，重点是去写，看得太多写的不多很容易不知道如何写

[charmToby]

我是后端，领导也会派一些对应的前端任务，css 什么的，知道 flex 布局，盒子模型这些东西，然后不懂的结合 chatGPT 基本就能写个七七八八了。

[456789]

反正 css 我是看一次放弃一次，建议睡大觉

[Hilong]

慕课网有一个 css 教程,跟完那个走一遍,大概对体系有个了解,后面知道怎么搜索或者给 chatgpt 提问就可以了.

[id80108900]

看得我也想好好学学 CSS 了。

[ljpCN]

https://zh.learnlayout.com/
一篇学完布局，其他的 css 用到的时候再查。

[MagmaBlock]

我是开发着 Tailwindcss 的项目一边看文档一边开发一边学的。Tailwindcss 用的都是比较现代常用的样式，而且归类归的很好，多翻翻文档就能了解各自样式应该用什么了。然后他文档也还提供了对应的 CSS ，了解怎么实现之后就只需要写相应的 CSS 了

[KT0J]

@Lesenelir
@taotaodaddy
@MagmaBlock
@Lesenelir
看了看 Tailwindcss ，救星啊。赶紧学起来。

[taotaodaddy]

@KT0J 和你感觉一样,当初就觉得 tailwind 是救星
如果不是做很深入的实现,一开始只学 tailwind 的类名使用就可以了,特别适合我这种半瓶水上手;
后来慢慢的,通过观察鼠标移到类名上浮现的原生 css 定义,开始扩大对原生 css 的学习,这种结合实效的学习比较不容易枯燥;
然后又了解了定位(静态,相对,绝对,固定,粘性),了解布局(块,行内,浮动,网格,弹性),这下就对整体性有了新的把握;
再往后在 taildwind 实现的不够灵活完美的地方,开始写一些 style(非常少)作为 tailwind 的补充.

[duan602728596]

因为你没学过啊，所以难啊。就像现在如果让我去开发 android 我也觉得难啊，因为我不会啊。
以前干前端的都是拿着 PS ，切过各种页面的，肯定对 css 有一些理解啊。

[Al0rid4l]

看来很多人没耐心刷完 MDN 的 CSS reference...

[weeshin]

@Al0rid4l 个人感觉刷完这个没啥用，CSS 重要的是心智模型，要清楚地知道现在的布局模式，以及在该模式下各种属性的用法😂