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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 517 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

第 1 条附言 · 2023-07-04 09:23:52 +08:00

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

CSS

Web

码农

感觉

50 条回复 • 2023-07-30 08:34:56 +08:00

LandCruiser

2023-07-03 11:41:25 +08:00

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

1t1y1ILnW0x5nt47

2023-07-03 11:48:05 +08:00

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

insanny

2023-07-03 11:52:03 +08:00

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

mineralsalt

2023-07-03 11:52:21 +08:00

直接用 flex 干就行了

hardto

2023-07-03 11:55:12 +08:00

那就不学了，睡大觉！

murmur

2023-07-03 11:57:58 +08:00

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

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

cvbnt

2023-07-03 11:58:03 +08:00 via Android

不学了，睡大觉，交给 chatgpt

Seanfuck

2023-07-03 12:00:38 +08:00

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

BwNVlwSq

2023-07-03 12:13:28 +08:00

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

superedlimited

2023-07-03 12:15:42 +08:00 via iPhone

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

ashong

2023-07-03 12:16:20 +08:00 via iPhone

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

darkengine

2023-07-03 12:44:28 +08:00

flex + div 一把梭

liveoppo

2023-07-03 12:57:36 +08:00

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

nnccree

2023-07-03 13:08:50 +08:00

flex + grid 基本够用了

retrocode

2023-07-03 13:09:06 +08:00

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

xingyuc

2023-07-03 13:15:50 +08:00

现在没有 IE 已经好太多了

Lesenelir

2023-07-03 13:16:22 +08:00

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

taotaodaddy

2023-07-03 13:19:00 +08:00

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

qingshui33

2023-07-03 13:19:06 +08:00

难了就不学

hhjswf

2023-07-03 13:21:39 +08:00 via Android

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

redford42

2023-07-03 13:27:36 +08:00

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

NoManPlay

2023-07-03 13:28:36 +08:00

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

dcsuibian

2023-07-03 13:30:09 +08:00 via Android

《精通 CSS 》

weixiangzhe

2023-07-03 14:24:55 +08:00

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

notejava

2023-07-03 14:27:07 +08:00

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

sentinelK

2023-07-03 14:32:22 +08:00

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

sanmaozhao

2023-07-03 14:35:57 +08:00

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

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

poporange

2023-07-03 14:35:59 +08:00

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

zzzkkk

2023-07-03 14:37:26 +08:00 via Android

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

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

worldqiuzhi

2023-07-03 14:39:16 +08:00

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

SleepyRaven

2023-07-03 14:51:08 +08:00

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

gitignore

2023-07-03 15:48:43 +08:00

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

xz410236056

2023-07-03 16:14:42 +08:00

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

SharkRazor

2023-07-03 16:33:13 +08:00

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

AndrewAdam

2023-07-03 16:38:05 +08:00

flex
chatgpt

giaodadi

2023-07-03 17:18:27 +08:00

用框架，套模板
熟能生巧

dddd1919

2023-07-03 17:24:27 +08:00

学会盒模型打天下

Ju22

2023-07-03 17:31:48 +08:00

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

wanderingaround

2023-07-03 17:57:11 +08:00

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

charmToby

2023-07-03 17:58:56 +08:00

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

456789

2023-07-03 18:05:43 +08:00

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

Hilong

2023-07-03 19:28:45 +08:00

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

id80108900

2023-07-03 23:09:44 +08:00

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

ljpCN

2023-07-03 23:20:19 +08:00

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

MagmaBlock

2023-07-04 06:39:18 +08:00 via Android

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

KT0J

2023-07-04 09:20:19 +08:00

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

taotaodaddy

2023-07-04 09:57:53 +08:00

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

duan602728596

2023-07-04 11:08:51 +08:00

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

Al0rid4l

2023-07-04 13:10:08 +08:00

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

weeshin

2023-07-30 08:34:56 +08:00

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