V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
KT0J
V2EX  ›  前端开发

学习前端中,感觉 css 最难,怎么办?

  •  
  •   KT0J · 2023-07-03 11:28:34 +08:00 · 5401 次点击
    这是一个创建于 491 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    第 1 条附言  ·  2023-07-04 09:23:52 +08:00
    感谢。
    准备仔细学下 flex ,然后用上 tailwindcss
    50 条回复    2023-07-30 08:34:56 +08:00
    LandCruiser
        1
    LandCruiser  
       2023-07-03 11:41:25 +08:00   ❤️ 1
    你自己已经说出答案了,卡一点查一点,解决这个问题当然是系统的学习一遍了。
    1t1y1ILnW0x5nt47
        2
    1t1y1ILnW0x5nt47  
       2023-07-03 11:48:05 +08:00   ❤️ 2
    css 也不能说最难,很多都是靠记的,相对记知识点,程序员更应该多看文档,文档之于程序员,犹如海澜之家之于男人,每逛一次都有新发现
    insanny
        3
    insanny  
       2023-07-03 11:52:03 +08:00
    同前端新手,css 确实是老大难,有的布局原理(比如 line-height ,line-box 这种)看的我很痛苦..
    个人感觉想系统掌握有两个方向吧,一方面需要多看别人是怎么布局的,学下主流的技巧;一方面最好能看一本类似 CSS 权威指南这种书(当然看起来可能也比较枯燥),理解各种属性的运作方式。
    我觉得前期还是多看多练更重要一点,至少会觉得有“产出”
    mineralsalt
        4
    mineralsalt  
       2023-07-03 11:52:21 +08:00   ❤️ 1
    直接用 flex 干就行了
    hardto
        5
    hardto  
       2023-07-03 11:55:12 +08:00   ❤️ 2
    那就不学了,睡大觉!
    murmur
        6
    murmur  
       2023-07-03 11:57:58 +08:00
    学习能力菜,没别的理由,就算是面向 google 编程也能编出来

    css 的难点是布局拆分,怎么从大到小,从外到里拆分布局,这个跟 android xml 有本质区别么
    cvbnt
        7
    cvbnt  
       2023-07-03 11:58:03 +08:00 via Android
    不学了,睡大觉,交给 chatgpt
    Seanfuck
        8
    Seanfuck  
       2023-07-03 12:00:38 +08:00
    记住常用的那些就行了,也不是很多;
    布局的话,常用好像也就 4 种方式:
    1. inline-block 设置宽度
    2. 绝对定位,position: absolute/fixed
    3. flaot ,跟绝对定位相似
    4. flex
    BwNVlwSq
        9
    BwNVlwSq  
       2023-07-03 12:13:28 +08:00
    前几年有和你差不多的感受
    多写写页面吧
    superedlimited
        10
    superedlimited  
       2023-07-03 12:15:42 +08:00 via iPhone
    css 和传统的 android xml 布局有很大不同。仔细看 mdn 文档,多写一写,写 css 时要忘掉安卓布局那回事。
    ashong
        11
    ashong  
       2023-07-03 12:16:20 +08:00 via iPhone
    直接从 sass/scss 开始,减少重复
    布局用 flex 都可以解决
    darkengine
        12
    darkengine  
       2023-07-03 12:44:28 +08:00
    flex + div 一把梭
    liveoppo
        13
    liveoppo  
       2023-07-03 12:57:36 +08:00
    把 flex 学好,尽量用这个。有了 flex 后 css 简单太多了,以前才是难。
    nnccree
        14
    nnccree  
       2023-07-03 13:08:50 +08:00
    flex + grid 基本够用了
    retrocode
        15
    retrocode  
       2023-07-03 13:09:06 +08:00
    flex 布局, 除必须使用外,忘记 position: absolute 和 float
    xingyuc
        16
    xingyuc  
       2023-07-03 13:15:50 +08:00
    现在没有 IE 已经好太多了
    Lesenelir
        17
    Lesenelir  
       2023-07-03 13:16:22 +08:00
    学 flex ,再看 position ,知道这两个基本的内容后再使用 tailwindcss 你就可以做出现在绝大多数的页面。
    taotaodaddy
        18
    taotaodaddy  
       2023-07-03 13:19:00 +08:00
    OP 可以换个方式切入 CSS 的学习和使用: tailwindcss
    qingshui33
        19
    qingshui33  
       2023-07-03 13:19:06 +08:00
    难了就不学
    hhjswf
        20
    hhjswf  
       2023-07-03 13:21:39 +08:00 via Android
    gpt 有没有相关应用,根据设计稿生成 css😩
    redford42
        21
    redford42  
       2023-07-03 13:27:36 +08:00
    多写,我最开始接触的时候写了三个月才好点....
    NoManPlay
        22
    NoManPlay  
       2023-07-03 13:28:36 +08:00
    现在 flex 和 grid 直接写现代布局,然后伪类伪元素实现一些特殊效果
    dcsuibian
        23
    dcsuibian  
       2023-07-03 13:30:09 +08:00 via Android
    《精通 CSS 》
    weixiangzhe
        24
    weixiangzhe  
       2023-07-03 14:24:55 +08:00   ❤️ 1
    布局只有 flex 和 grid , 其他都是历史遗留
    notejava
        25
    notejava  
       2023-07-03 14:27:07 +08:00
    作为一个后端,刚写 CSS 也挺痛苦,写多了就好了,多积累,多 F12 看看别人的网站是怎么实现的。
    sentinelK
        26
    sentinelK  
       2023-07-03 14:32:22 +08:00
    CSS 目前最流行的布局方式,和 Android 并没有任何区别。
    横向、纵向线性布局,高宽,居中/等分/权重/向 x 对齐,外边距内边距,背景边框圆角,
    如此 90%的界面已经搞定了。
    sanmaozhao
        27
    sanmaozhao  
       2023-07-03 14:35:57 +08:00
    程序员学 CSS 确实是最难的,因为
    1 、它并不是个编程语言,其他语言的经验很难迁移过来
    2 、很多 css 属性值的设置,并不是正交的。设置了 a 属性的值,会隐含式地牵连到 b 、c 属性的效果

    如何应对?
    1 、如果要求不高,就依靠 UI 库吧,用现成的 UI 组件去组合出界面来,就不用碰 css 了
    2 、要求高,就只能多学多练了,感觉没啥捷径。我也推荐《精通 CSS 》这本书
    poporange
        28
    poporange  
       2023-07-03 14:35:59 +08:00
    我是爱好学习的代码,前端的 css 简直是痛苦中的痛苦...
    zzzkkk
        29
    zzzkkk  
       2023-07-03 14:37:26 +08:00 via Android
    布局怎么摆 页面设计是产品经理的职责 也是很耗脑的工作 必须要有一个人专门做
    产品经理不但要研究同类产品的界面和交互 具体细节 从运营人员里搜集汇总需求 还要有自己的微创新
    前端的职责是从美工手里拿设计图 把它变成 html css js

    一个人碰到了这种页面内容怎么摆怎么设计 这种难题 相当于是在做三个人的工作 也差不多是闭门造车
    worldqiuzhi
        30
    worldqiuzhi  
       2023-07-03 14:39:16 +08:00
    css 自己写感觉不难 修修改改勉强能用 最怕产品指手画脚 各种骚操作 这块不好看 那块偏一点 这个组件顺序调整一下 就很搞 很浪费时间
    SleepyRaven
        31
    SleepyRaven  
       2023-07-03 14:51:08 +08:00
    "一个界面,怎么布局,怎么摆",这个算设计层面了吧
    css 是把已经摆好的布局设计图用代码复现出来
    我的建议是...flex 一把梭🐶
    gitignore
        32
    gitignore  
       2023-07-03 15:48:43 +08:00
    v 我 500 手把手教,有问题随时问 😛
    xz410236056
        33
    xz410236056  
       2023-07-03 16:14:42 +08:00
    2023 年了还写 CSS ?前端不是一堆框架吗
    SharkRazor
        34
    SharkRazor  
       2023-07-03 16:33:13 +08:00
    多写多画,找已有的网站模仿去画一遍再 f12 看看人家怎么画的,慢慢的就有思路了
    AndrewAdam
        35
    AndrewAdam  
       2023-07-03 16:38:05 +08:00
    flex
    chatgpt
    giaodadi
        36
    giaodadi  
       2023-07-03 17:18:27 +08:00
    用框架,套模板
    熟能生巧
    dddd1919
        37
    dddd1919  
       2023-07-03 17:24:27 +08:00
    学会盒模型打天下
    Ju22
        38
    Ju22  
       2023-07-03 17:31:48 +08:00   ❤️ 2
    关注一下张鑫旭的博客,css 总统山的人物。
    wanderingaround
        39
    wanderingaround  
       2023-07-03 17:57:11 +08:00
    遇事不决 flex,把定位搞清楚,建议不要看太多,重点是去写,看得太多写的不多很容易不知道如何写
    charmToby
        40
    charmToby  
       2023-07-03 17:58:56 +08:00
    我是后端,领导也会派一些对应的前端任务,css 什么的,知道 flex 布局,盒子模型这些东西,然后不懂的结合 chatGPT 基本就能写个七七八八了。
    456789
        41
    456789  
       2023-07-03 18:05:43 +08:00
    反正 css 我是看一次放弃一次,建议睡大觉
    Hilong
        42
    Hilong  
       2023-07-03 19:28:45 +08:00
    慕课网有一个 css 教程,跟完那个走一遍,大概对体系有个了解,后面知道怎么搜索或者给 chatgpt 提问就可以了.
    id80108900
        43
    id80108900  
       2023-07-03 23:09:44 +08:00
    看得我也想好好学学 CSS 了。
    ljpCN
        44
    ljpCN  
       2023-07-03 23:20:19 +08:00
    https://zh.learnlayout.com/
    一篇学完布局,其他的 css 用到的时候再查。
    MagmaBlock
        45
    MagmaBlock  
       2023-07-04 06:39:18 +08:00 via Android
    我是开发着 Tailwindcss 的项目一边看文档一边开发一边学的。Tailwindcss 用的都是比较现代常用的样式,而且归类归的很好,多翻翻文档就能了解各自样式应该用什么了。然后他文档也还提供了对应的 CSS ,了解怎么实现之后就只需要写相应的 CSS 了
    KT0J
        46
    KT0J  
    OP
       2023-07-04 09:20:19 +08:00
    @Lesenelir
    @taotaodaddy
    @MagmaBlock
    @Lesenelir
    看了看 Tailwindcss ,救星啊。赶紧学起来。
    taotaodaddy
        47
    taotaodaddy  
       2023-07-04 09:57:53 +08:00
    @KT0J 和你感觉一样,当初就觉得 tailwind 是救星
    如果不是做很深入的实现,一开始只学 tailwind 的类名使用就可以了,特别适合我这种半瓶水上手;
    后来慢慢的,通过观察鼠标移到类名上浮现的原生 css 定义,开始扩大对原生 css 的学习,这种结合实效的学习比较不容易枯燥;
    然后又了解了定位(静态,相对,绝对,固定,粘性),了解布局(块,行内,浮动,网格,弹性),这下就对整体性有了新的把握;
    再往后在 taildwind 实现的不够灵活完美的地方,开始写一些 style(非常少)作为 tailwind 的补充.
    duan602728596
        48
    duan602728596  
       2023-07-04 11:08:51 +08:00
    因为你没学过啊,所以难啊。就像现在如果让我去开发 android 我也觉得难啊,因为我不会啊。
    以前干前端的都是拿着 PS ,切过各种页面的,肯定对 css 有一些理解啊。
    Al0rid4l
        49
    Al0rid4l  
       2023-07-04 13:10:08 +08:00
    看来很多人没耐心刷完 MDN 的 CSS reference...
    weeshin
        50
    weeshin  
       2023-07-30 08:34:56 +08:00
    @Al0rid4l 个人感觉刷完这个没啥用,CSS 重要的是心智模型,要清楚地知道现在的布局模式,以及在该模式下各种属性的用法😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5052 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 03:55 · PVG 11:55 · LAX 19:55 · JFK 22:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.