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

如何训练自己用 CSS 布局的能力?

  •  
  •   abcbuzhiming · 2021-12-30 15:31:31 +08:00 · 2362 次点击
    这是一个创建于 819 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我前后系统的学过 CSS 3 次。然后到现在,还是无法自信的说,在理论上我比较了解 CSS ,感觉 CSS 隐含的互相影响条件太多了,可能我这个后端出身的从思维上就不太适合这东西。


    于是放弃研究理论,现在的想法是 [训练用 CSS 来布局] 的能力,因为我本质是希望掌握用 CSS 画 UI 的能力,因为现在有大量其它领域的 UI ,其实也是类似 CSS 的系统,比如盒模型,比如 margin 。希望学通一个,反三到其它。


    但是始终不得要领,我极少的 UI 开发经历都是来自那个拖拉拽的时代,对 CSS 这种元素和元素彼此之间的关系是 [互相堆叠,互相影响] 的系统,非常的麻爪,感觉 [进不去] ,不知道该如何上手。
    12 条回复    2021-12-31 07:49:10 +08:00
    dcsuibian
        1
    dcsuibian  
       2021-12-30 15:34:30 +08:00
    同后端,看一遍《精通 CSS 》,够用了
    murmur
        2
    murmur  
       2021-12-30 15:38:00 +08:00   ❤️ 1
    先学会拆分页面,css 不行多半是拆解能力不行,把页面拆成一个个单元,有了 flex 布局之后 css 好学多了
    murmur
        3
    murmur  
       2021-12-30 15:39:06 +08:00
    比如 V2EX ,直观上看他是左右两部分,整体居中的布局,那我们先从最简单开始,中间只有一块,然后居中两侧留白怎么写

    然后做两列,右侧定宽左侧变宽,又怎么写

    现在右侧你发现还有几块摞起来了,然后应该怎么办
    Cbdy
        4
    Cbdy  
       2021-12-30 15:46:13 +08:00 via Android   ❤️ 1
    作为一个前端,我觉得 CSS 基本的运用还是比较简单的,尤其是现在大家都用 flex 、grid 做布局,很傻瓜了

    如果你真的感觉特别困惑,可以联系我(点我头像),我可以帮你做答疑
    murmur
        5
    murmur  
       2021-12-30 15:46:22 +08:00
    新的 css 真的屌到一批,以前写一个一行文字显示不下省略号都那么多条件

    现在他进化了,你可以设置两行显示不下省略,三行,四行,一个 css 值就搞定了
    snoopyhai
        6
    snoopyhai  
       2021-12-30 15:48:11 +08:00
    1. 禁止一股脑的用绝对布局,主要是为了防止基于页面左上角定位去画页面,真的是画。
    2. 弄清楚文档流,基于 float 做一些常见页面布局,最简单的两类:1 、各种 blog 模板布局; 2 、各种后台 admin 布局
    3. 然后在把 2 做好的布局,用 flex 布局再做一次。

    2.3.两项,注意多浏览器兼容性。即便是古化石也可以尝试。

    最后,注意一下页面 DTD 声明。声明不同,浏览器的解析略有不同,最终会导致兼容性问题。
    snoopyhai
        7
    snoopyhai  
       2021-12-30 15:50:18 +08:00
    如果这些都通关了,可以尝试一些细节区域用 position 布局了。
    Charrlles
        8
    Charrlles  
       2021-12-30 19:58:53 +08:00 via iPhone
    只学盒模型和弹性盒布局就差不多了,举一反三是不存在的,因为 css 的每一种布局都有自己的逻辑
    gearkey
        9
    gearkey  
       2021-12-30 20:14:36 +08:00 via Android
    理解一下相应式设计,然后精简盒模型
    alexmy
        10
    alexmy  
       2021-12-30 20:50:41 +08:00
    应该是多练习吧,同为后端,前后学了好几遍,还是记不住。外边距,内边距的单词都记不住!!!
    自从鼓劲写了几个网站,好多了,起码能用。
    enchilada2020
        11
    enchilada2020  
       2021-12-30 23:07:14 +08:00 via Android
    @murmur 两行显示不下省略号可有例子。。
    murmur
        12
    murmur  
       2021-12-31 07:49:10 +08:00   ❤️ 1
    @enchilada2020 -webkit-line-clamp
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5485 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 08:26 · PVG 16:26 · LAX 01:26 · JFK 04:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.