V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
b1t
V2EX  ›  CSS

css 好难,你们怎么熟练把 css 用起来的?

  •  
  •   b1t · 196 天前 · 12355 次点击
    这是一个创建于 196 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在学前端,看了 React 、Nextjs

    又边看 Tailwind CSS 的文档边写点东西

    但是 css 是来回调试,经常不生效,或者位置奇奇怪怪

    css 有什么固定套路可以用吗?
    你们怎么度过的这个阶段?

    113 条回复    2024-05-10 14:42:56 +08:00
    1  2  
    murmur
        1
    murmur  
       196 天前   ❤️ 8
    都 2024 了,不需要做 IE 兼容性,不要求你背八股文写各种奇奇怪怪的 hack ,有 flex 布局,直接源生支持--var 和 calc

    搭配 ai 加成和各种工具,比如专门做阴影、渐变的

    学不会就是菜,难什么,你没好好学而已
    murmur
        2
    murmur  
       196 天前   ❤️ 3
    抛去各种炫技、动画,css 本身是切分的艺术,要学会拆布局,拆成几个部分,找出每个部分的规律,一层层拆下去
    b1t
        3
    b1t  
    OP
       196 天前
    @murmur 大佬,确实想着着急出东西,想着边用边学,不过不尽人意。目前在尝试着重新实现一边 v 站,这个过程基本要靠 gpt 完成布局,自己 css 写起来很吃力,如果掌握 flex 布局,是不是就能应对大部分场景了?
    reDesign
        4
    reDesign  
       196 天前   ❤️ 2
    刚好也在用 nextjs 和 tailwind 搞博客,放一个链接在这,https://www.augusts.me
    我的答案就是先用起来,边解决问题边熟练。就像学习 office 一样,看完《 word 操作大全还是不会用 word 》,能解决自己需求就好了。
    InDom
        5
    InDom  
       196 天前   ❤️ 4
    我现在前段的状态就是,你让我微调边距,字体,样式都还行。

    但你让我搞布局,我想上吊...
    hevi
        6
    hevi  
       196 天前   ❤️ 2
    可以快速把《响应式 Web 设计 HTML5 和 CSS3 实战(图灵出品)》(俗称瓢虫书)看看,我当时是用它入门的。
    然后把阮一峰老师的 flex 和 grid 布局文章都看看,就可以莽了
    murmur
        7
    murmur  
       196 天前   ❤️ 1
    @b1t gpt 可以写代码,但是得自己练习,毕竟 gpt 出的东西和已有项目的风格不一样,你乱写未必过的了代码审查

    可以试着先无视各种文字、按钮,先把每个区域用白块做出来,布局做熟练了再开始填内容

    比如这个 v 左侧区域,可以先把主楼 回复 新回复框 这几个白块做出来,然后在回复里拆出子楼层,然后分出回复的头像、标题、正文区域,一点点循序渐进来

    这种拆布局拆两次就习惯了,很简单
    b1t
        8
    b1t  
    OP
       196 天前
    @InDom
    @hevi
    啊,所以布局方面,大家基本上都是通过 flex 布局一把索是嘛
    murmur
        9
    murmur  
       196 天前   ❤️ 1
    @b1t 你一开始不考虑 position: absolute 这些用法或者用 before ,after 写伪类,可以把所有的布局都按左右、上下拆分,这样写出来就简单的多,上手也快
    Simle100
        10
    Simle100  
       196 天前
    当时因为 CSS 放弃了前端,实在是整不会
    bzw875
        11
    bzw875  
       196 天前   ❤️ 1
    我亦无他,惟手熟尔。我当年是这么学习,一比一绘制 https://m.jd.com/的 html 、css 。上面图片保存下来;然后是 CSS 动画,过渡。可以开发者工具看它怎么写的
    b1t
        12
    b1t  
    OP
       196 天前
    @murmur 大佬好方法,感谢提供思路
    b1t
        13
    b1t  
    OP
       196 天前
    @Simle100 css 给人感觉看着不难,一下手就不是那么会事了,得练一练
    lovedebug
        14
    lovedebug  
       196 天前   ❤️ 1
    谷歌的教程,还算写的很好的 https://web.developers.google.cn/learn/css
    b1t
        15
    b1t  
    OP
       196 天前
    @lovedebug 我去看看,谢谢
    yKXSkKoR8I1RcxaS
        16
    yKXSkKoR8I1RcxaS  
       196 天前
    沒,順其自然就會了,然後越用越熟練,哪裏不會查哪裏,多看文檔。
    linyongxin
        17
    linyongxin  
       196 天前
    我以前也纠结 css 各种兼容和布局,后来发现,只要用 Twitter 出品的框架 bootstrap ,就不用那么麻烦
    Jame00001
        18
    Jame00001  
       196 天前   ❤️ 1
    html/js/css 是前端最基础的东西。正经前端简历上都不敢写这些,因为太基础了。你如果要用前端,起码吧基础看一下吧。
    每次看到说自己不擅长写 y 样式就觉得在侮辱。好像“高级的”你百度一下就会了不屑于学这种低级的东西。逼都让你装了回头再啐一口。
    Justin13
        19
    Justin13  
       196 天前 via Android   ❤️ 1
    盒子模型
    流式布局 定位元素
    bfc
    stacking context
    inline 行框 基线
    flex grid
    这些基本功学学就差不多了
    剩下的用到再学
    yanulg
        20
    yanulg  
       196 天前   ❤️ 1
    真没啥难的,又不需要你兼容老浏览器,以前什么垂直居中的 20 种方法,分割布局的各种奇怪 trick ,现在都能用 flex ,更复杂点的也能用非常直观的 grid ,现在能用到的属性看一看基本没有什么理解不了的,你无非是没法 1 天学会 30 天的知识就着急了
    FeifeiJin
        21
    FeifeiJin  
       196 天前 via Android
    我是决定永远也学不会 css 的。
    Guidoo
        22
    Guidoo  
       196 天前   ❤️ 2
    布局就 flex 和 grid 一把梭,找几个常见的布局,多练几次就会了
    Puteulanus
        23
    Puteulanus  
       196 天前   ❤️ 3
    ——“但是 css 是来回调试,经常不生效,或者位置奇奇怪怪”

    浏览器的元素查看面板能看到每个元素的样式和计算样式,遇到不生效或者位置奇怪的时候,顺着选择器、继承这些去看,找到确定的原因。

    它不是平白无故“失效”和“位置奇怪”的,你不理解的地方就是你该去学习的地方,每次搞懂了下次再出问题的时候对背后的逻辑分析都会清晰一点。你如果只想“换个属性试试”、“换个布局器试试”这样去试,等于每一次面对的都是全新的问题。
    43n5Z6GyW39943pj
        24
    43n5Z6GyW39943pj  
       196 天前   ❤️ 1
    flex 够用, 炫酷的那些一般也玩不转

    可以说精通 js, 但没人敢说精通 css
    murmur
        25
    murmur  
       196 天前   ❤️ 1
    @MorJS 精通没必要,贴图解决 100%问题,贴视频解决 120%问题,复杂需求用 unity 或者 unreal 做解决 200%问题

    css 不是万金油,当年还在玩 IE 年代的 css 动画,支付宝的背景就开始贴完整视频了
    o00O00o
        26
    o00O00o  
       196 天前 via Android
    @reDesign 有意思,请问一下头像是如何生成的呢
    crocoBaby
        27
    crocoBaby  
       196 天前   ❤️ 1
    flex 一把梭,秀操作就学 grid,想了解布局的前世今生就从 table,float,margin,position 看一遍
    b1t
        28
    b1t  
    OP
       196 天前
    @yanulg 老哥说的对的,其实也是因为一看好像就懂了,所以感觉自己就行了,其实还是得多学学想想练练


    @Puteulanus
    你如果只想“换个属性试试”、“换个布局器试试”这样去试,等于每一次面对的都是全新的问题。
    ------------
    老哥,太懂了。哈哈哈哈,感谢分享查找问题的方法
    DOLLOR
        29
    DOLLOR  
       196 天前
    CSS 最基本的功能就是调间距、大小、色彩,搞明白 margin 、padding 、border 、font-size 、color 、background ,就能干很多活了。
    布局方面优先考虑 flex 。当然有的人 flex 怎么都学不会,用 inline-block 也不是什么可笑的事情。
    如果只是想快速出东西,直接用组件库就好了。
    angrylid
        30
    angrylid  
       196 天前   ❤️ 1
    本站怪现状之一,一群人日常嘲笑前端切图仔,而另一群人不会写 CSS

    差不多就是 15 楼讲的那样,先把最基本的这些概念学完了。剩下的就是多写多练了。
    lneoi
        31
    lneoi  
       196 天前
    文档流 知道浏览器对常见的元素默认的处理特性 然后可以开始 F12 对着调需要的效果
    wuyiccc
        32
    wuyiccc  
       196 天前   ❤️ 1
    直接 flex 干一切
    wuyiccc
        33
    wuyiccc  
       196 天前
    我现在已经放弃思考 css 到底怎么玩了,直接 flex ,可以解决我 95%的问题。剩余 5%的问 gpt, 实在不行!important
    arfaWong
        34
    arfaWong  
       196 天前
    模仿和使用练习
    particlec
        35
    particlec  
       196 天前   ❤️ 1
    display: flex;
    align-items: center;
    justify-content: center;
    写的最多的代码了
    storyxc
        36
    storyxc  
       196 天前
    这玩意没别的办法,就是多写,去年写了两个自用的小项目,当时调整样式已经很得心应手了。这俩小项目搞完没碰前端,就又忘的差不多了。
    wu67
        37
    wu67  
       196 天前
    用多了就熟了.
    前端仔表示当年看了一星期就上手了, 至于干活, 当然是 flex 一把梭. 如果常见业务 flex 解决不了, 那是业务有毛病, 得花更多时间去布局, 而且大多数情况下其实客户根本不关心这种效果...
    Jungzl
        38
    Jungzl  
       196 天前
    @particlec 这坨我通常用 unocss 的 shortcuts 简写成 fcc 的类名,还有其他一些 fcb ,fbb 之类的
    jy02534655
        39
    jy02534655  
       196 天前
    先学习下 css 选择器,了解下 css 权重这种基本功吧
    ARslince
        40
    ARslince  
       196 天前 via iPhone
    https://github.com/slince-zero/IMaker

    可以看一下我这个项目,也是用的 tailwindcss
    cgpiao
        41
    cgpiao  
       196 天前
    现代的 CSS 多简单,又不考虑远古,远古 float 是恶心到极致。
    flex 就能搞定 99%的布局问题,其他的就属于元素个别样式了。
    zwpaper
        42
    zwpaper  
       196 天前
    简直是深有体验。。。和 op 一样,也是想着直接上手,项目里学习,结果发现 css 这玩意就是 op 总结的,要不不生效,要不就各种奇怪,感觉还是没用对方法
    jqtmviyu
        43
    jqtmviyu  
       196 天前   ❤️ 1
    flex 和定位能解决 99%的问题.
    然后就是 css 三大特性, 层叠(覆盖), 继承, 优先级(权重)
    dj721xHiAvbL11n0
        44
    dj721xHiAvbL11n0  
       196 天前
    那我建议你还是拿主题改,这样更好,不然兴趣都磨光了
    AirCrusher
        45
    AirCrusher  
       196 天前
    @reDesign 这个好酷,请问导航栏动效是怎么实现的呢
    Ritter
        46
    Ritter  
       196 天前
    月经贴了
    freezebreze
        47
    freezebreze  
       196 天前
    直接 tailwindcss 边用边学习 css 知识 用过都说好
    Ashore
        48
    Ashore  
       196 天前
    flex 就够用了
    laobobo
        49
    laobobo  
       196 天前
    你这才刚入门就难,想学的深入就更难了!
    abcdxe2v
        50
    abcdxe2v  
       196 天前
    css (的深入)是前端最难的东西。
    “css 是来回调试,经常不生效,或者位置奇奇怪怪” 正常,99%的前端都不知道一个属性到底为什么造成了某个奇怪的效果/位置。真想理解得看这个东西 https://drafts.csswg.org/ ,太乱了。
    NerbraskaGuy
        51
    NerbraskaGuy  
       196 天前
    CSS 最大难点是吃经验和很多反直觉的遗留问题,新手不要先想着兼容 ie 那些了,最快方法应该就是找现成的例子仿写。
    WhateverYouLike
        52
    WhateverYouLike  
       196 天前
    边做边学不一定是个好办法,因为低水平重复调试会浪费时间,最起码掌握了百分之七八十之后边做边学才比较有效果。
    coolmint
        53
    coolmint  
       196 天前
    tailwind 教程看看直接就开始一把梭了,直接项目中用,遇到问题就 gpt 或者翻翻文档,实战下来没啥问题,普通的 css 就算之前学过现在也不是什么都记得了。
    xuhai951753
        54
    xuhai951753  
       196 天前
    https://devv.ai/zh 直接问你要什么效果,直接出码。
    所以重点还是在于你要知道 css 大概能做到怎样的效果
    walker1024
        55
    walker1024  
       196 天前
    招个熟练 CSS 的
    libasten
        56
    libasten  
       196 天前
    先找个架子,然后现在搜索,现在是问 ai
    lianxiben
        57
    lianxiben  
       196 天前
    多写,多踩坑,没有捷径的
    seven123
        58
    seven123  
       196 天前
    tailwindcss
    DT27
        59
    DT27  
       196 天前
    要学会 F12 开发者工具排查。
    codehz
        60
    codehz  
       196 天前
    @murmur 但是 flex 有 Safari 的各种 bug (布局尺寸改变相关)
    然后导致很多抽象失效,因为单独测试的时候都是好的,组合起来 safari 就炸了 ( flex in flex
    @Puteulanus Safari 还真的可以出现 devtools 里给出的框是正确的,但渲染出来就是炸的情况,还能在 devtools 打开后(因为改变了页面宽度导致 reflow )自动恢复,有时候真的只能换个布局()
    Leon6868
        61
    Leon6868  
       196 天前
    布局需要多练习,先拆解别人的布局方案,然后尝试对着设计稿复现
    me1onsoda
        62
    me1onsoda  
       196 天前
    为什么好多后端 boy 都很难上手 css🤣
    xlzyxxn
        63
    xlzyxxn  
       196 天前
    可以先练习使用 css 连接数据库,熟悉之后就可以写写布局,动画了
    dif
        64
    dif  
       196 天前
    这玩意属实玩不转,学 scala 、go 、python 、java 都没这么难。反正就是各种尝试。最关键的,项目还是 scss 。
    chengxy
        65
    chengxy  
       196 天前
    Tailwind CSS 并不能提升你的 CSS 技能
    draguo
        66
    draguo  
       196 天前   ❤️ 1
    因为 CSS 是没有逻辑可言,推荐看一下这个 https://zhuanlan.zhihu.com/p/29888231 ,反正我是因为 css 放弃前端的
    morizawatt
        67
    morizawatt  
       196 天前
    多写就背下来了,我是设计,自学的 html 、css ,js 学不了一点...

    从改网页模版开始学的,然后自己设计、敲代码搭了个人站

    也是三四年前了,现在网页端刷知乎摸鱼用最多的是 display:none😗
    lycpang
        68
    lycpang  
       196 天前
    熟能生巧吧。。。做得多了自然就懂了,就是多个样式之间的关联关系,出了问题自己搞不定就问 chatgpt ,只要你描述的够清楚,他就能一下吧 css 全给你搞定
    lycpang
        69
    lycpang  
       196 天前
    @lycpang 所以,你怕 chatgpt 么,,如果你连 css 都不会,chatgpt 真的能取代你。
    CHTuring
        70
    CHTuring  
       196 天前
    Grid 布局: https://www.joshwcomeau.com/css/interactive-guide-to-grid/

    Flex 布局: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

    把这两篇文章看完,并且跟着敲一遍。保证你布局相关肯定没问题。
    Lemonadeccc
        71
    Lemonadeccc  
       196 天前
    @FeifeiJin 好多年不见飞飞了
    Puteulanus
        72
    Puteulanus  
       196 天前
    @codehz 那你不也搞清楚了原因,还能跟人分享这个案例(摊手)
    而不是“有时候别的地方能用的样式不知道为啥突然就不好使了,换个布局就好了”

    我们有一回项目临近尾声了甲方突然说他们员工用的都是苹果,要求保证 Safari 用起来正常,QA 一测茫茫多的地方显示有问题,开发头都大了

    DemonQ
        73
    DemonQ  
       196 天前
    可以借鉴培训班的思路:照着淘宝京东再来一个复杂点的网站抄,只抄静态浮现,原模原样浮现,有不会的就打开调试看看人家怎么做的,抄两三个基本 css 就是信手拈来了,归根结底还是锻炼少
    当然这是基本的 css 训练,至于什么兼容处理,动效实现就是自己积累了
    label
        74
    label  
       196 天前
    学下弹性盒子, 一把梭, 简单的一批
    davin
        75
    davin  
       196 天前
    Chrome 还没诞生的年代,靠着各种 CSS CHM 手册、CSS 禅意花园、IETester 和 Firebug 也熬过来了。熬死了那个年代的 IE 、Opera 、Flash 、Silverlight 、Adobe AIR...
    DemonQ
        76
    DemonQ  
       196 天前
    浮现-->复现
    iniMeow
        77
    iniMeow  
       196 天前
    @reDesign 好酷!想学
    dog82
        78
    dog82  
       196 天前
    css 的浮动我至今都没搞懂
    codehz
        79
    codehz  
       196 天前
    @Puteulanus 但确实是上下文相关的,我的意思是,同样一个组件,放第一个位置,嗯,没问题,前面随便加一点别的,就整个分崩离析,完全没办法用逻辑解释(当然,chrome 什么的都是正常的),就是 safari 布局引擎本身的 bug
    而且主要出现的场景就是 flex layout ,不过很多时候能被 grid 替代,换成 grid 实现一样的效果就不会有问题()
    wentx
        80
    wentx  
       196 天前   ❤️ 6
    SimonWoo
        81
    SimonWoo  
       195 天前
    遇事不决 position
    gitignore
        82
    gitignore  
       195 天前
    需不需要手把手教😌在线教学,红包🧧你看着给
    maxmeng936
        83
    maxmeng936  
       195 天前
    很简单,你只要在浏览网页时也想着怎么布局就行。遇到不会的,打开控制台看一下。
    wzy44944
        84
    wzy44944  
       195 天前
    感觉 css 就不属于编程语言,顶多算是设计语言,就是给组件设置属性
    supuwoerc
        85
    supuwoerc  
       195 天前
    flex + grid 解决绝大多数布局,再补充问一问 gpt ,做几个页面就熟悉了
    mumbler
        86
    mumbler  
       195 天前
    还手动写?让 gpt4 写就行了
    agagega
        87
    agagega  
       195 天前 via iPhone
    现在 flex 一把梭,高级点的加上 grid ,absolute 、float 这些东西都不太会用到。css 难是因为它各种属性不正交,相互之间会影响,外加浏览器会自带一些属性。但 css 好歹(大部分)是无状态的,调试起来比 js 操纵的布局容易很多。
    guxin0123
        88
    guxin0123  
       195 天前
    IE6
    yanyao233
        89
    yanyao233  
       195 天前 via Android
    之前也一直觉得 css 难,但实际用了之后发现现代 css 挺简单的,flex grid 布局无脑套,其他的样式看着 tailwind 文档自己挑
    oakland
        90
    oakland  
       195 天前
    css 真的难,没什么统一的组织理论,都是零零散散,tailwind 不全能,postcss 也不全能,全靠各种拼凑。
    你要说做个什么效果,那还好,但是要把整个项目组织起来,真是头大
    xrzxrzxrz
        91
    xrzxrzxrz  
       195 天前
    主业是后端。如果我写 css ,那就是面向玄学,开 F12 ,各种调调调,效果对了就复制贴到代码里面。
    shanejix
        92
    shanejix  
       195 天前
    @reDesign 挺不错的 想问下开源没有
    jsq2627
        93
    jsq2627  
       195 天前
    现在 flex grid 感觉已经很简单了
    要想当年要兼容 IE6 的时代,用 flex 都要畏畏缩缩的
    leegradyllljjjj
        94
    leegradyllljjjj  
       195 天前
    又不是不能用,业务实现就行,丑点怎么了
    kneo
        95
    kneo  
       195 天前   ❤️ 2
    CSS 就是很难。

    1. 一个效果有无数种实现。比如一个像素也有十几种常见做法,我都会。但是用哪个好?——选择障碍症自杀了。

    2. 想实现一个效果,改来改去总是差几个像素。——强迫症自杀了。

    3. 抄别人的实现,抄过来几百行代码,能用,但是这么多垃圾代码我不允许。删删删,小不小心效果删没了……加回来几行,好像又能用了,继续删删删。删了一晚上,妈的算了我自己写吧。——洁癖症自杀了。

    3. CSS 动画,有现成的,拿过来就能用。啊,要我改个特效?——智力不足者自杀了。

    4. 丑?丑是我的问题吗。让你招个设计你不招,非让老子写,说了老子不会做设计。——无产者自杀了。
    NeoChen
        96
    NeoChen  
       195 天前 via iPhone
    不知道还有多少人记得 web 标准化的历程…blueidea 到死还是 table 布局
    Adelell
        97
    Adelell  
       195 天前 via iPhone
    不管啥布局,直接 position absolute 一把梭,统统写死。
    Al0rid4l
        98
    Al0rid4l  
       195 天前
    现在的人 CSS 都不过 MDN 了吗...当年把 MDN 和 CSS 权威指南都过了一遍, 从此 CSS 简单轻松
    f14g
        99
    f14g  
       195 天前 via Android
    感觉楼上有位专业的说的非常有道理的:flex+grid 解决大部分问题、复杂的动画问题完全可以上图片或视频,更进一步的需求则用诸如 unity 、three js 、d3 等前端库了。
    综上说,“CSS 难学”真的不是做前端的一个障碍。更何况现在还有 flutter ,如果觉得 CSS 难学,完全可以用其他框架替代嘛
    ( BTW ,我觉得 flutter 描述界面那个表现力还不如 X ( HT ) ML+CSS 呢)
    rowink
        100
    rowink  
       195 天前
    建议是找个网站写,手搓博客小工具之类的,还有就是参考别人界面布局的样式,模仿着写,熟练后自然就会了
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4858 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 09:44 · PVG 17:44 · LAX 01:44 · JFK 04:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.