V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
paopjian
V2EX  ›  问与答

初学前端应该怎么快速找到想要的方法呢?

  •  
  •   paopjian · 2022-10-21 15:54:26 +08:00 · 888 次点击
    这是一个创建于 545 天前的主题,其中的信息可能已经有所发展或是发生改变。
    只有后端经验,公司让转前端,学 vue,刚看完一个教学视频,试着用 elementUI 仿照一个页面,这也太难学了,刚开始模仿一个导航栏,
    bootstrap 里 ml-auto 就能将元素靠右,在 elementUI 里就没有这个功能,找了半天才知道,得用 CSS 的"float:right",感觉好割裂啊, 如果要学前端的话,去哪里能把这些布局学会呢?
    10 条回复    2022-10-21 17:17:37 +08:00
    Asakijz
        1
    Asakijz  
       2022-10-21 15:57:16 +08:00   ❤️ 1
    有空 mdn 快速过一遍
    mrbunker
        2
    mrbunker  
       2022-10-21 15:59:22 +08:00
    weixind
        3
    weixind  
       2022-10-21 16:00:15 +08:00   ❤️ 1
    写了几年前端了,flex 一把唆。
    aikilan
        4
    aikilan  
       2022-10-21 16:03:56 +08:00   ❤️ 1
    楼上说的对,花几分钟看一下 flex 布局,然后一边用一边查 flex ,起码可以让你聚焦在这一个 API 上,不用找其他的布局 API ,轻松很多。
    paopjian
        5
    paopjian  
    OP
       2022-10-21 16:06:12 +08:00
    @mrbunker 我看的就是官网 https://element.eleme.cn/#/zh-CN/component/menu 这里的导航栏根本就没提如何右置,看 github 的 issue,他们压根不打算做,官网布局都是 float 右置的,好气哦
    retrocode
        6
    retrocode  
       2022-10-21 16:11:12 +08:00   ❤️ 1
    flex 解君愁, 现在 css 一般是团队自己封装的居多, 我的建议是 你先熟悉下 flex 布局,然后自己封装 scss 全局文件就好了,
    不要考虑第三方样式库, 这样也可以让你快速属性 css, 直接用第三方库对上手前端的人来说更难以理解
    自己封装几个 flex-center 或者你说的 ml-auto 这种 class 随用随加就好, 正常情况, 搭配第三方组件最后累计出来的 css 文件也不会很大
    HugoChao
        7
    HugoChao  
       2022-10-21 16:11:54 +08:00   ❤️ 1
    引入 elementUI 用自带的网格布局 分分块就好了
    oldshensheep
        8
    oldshensheep  
       2022-10-21 16:26:22 +08:00   ❤️ 1
    CSS 是个坑,但是就布局来说还好。用 flex 布局很好解决,我看得这个,有例子和配图。
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    optional
        9
    optional  
       2022-10-21 16:29:28 +08:00 via iPhone
    css 属性过一遍,记得干嘛用就好,不用记细节。
    Rache1
        10
    Rache1  
       2022-10-21 17:17:37 +08:00
    ml-auto 和 float: right 并不相同,ml-auto 对应 margin-left: auto ,适用于 flex 子元素或者 display block 元素且有宽度的时。

    float 会造成高度塌陷
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5309 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 03:40 · PVG 11:40 · LAX 20:40 · JFK 23:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.