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

两个CSS的问题困扰我很久了。

  •  
  •   Dummy · 2012-09-17 13:08:04 +08:00 · 4737 次点击
    这是一个创建于 4238 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一直困扰我很久了

    1. 经常在设计的时候会有一个纠结的地方 ,一个Block的宽度和高度,是奇数好还是偶数好?

    排除设计本身的问题,对浏览器来说,渲染上(性能/效率)会不会有区别?

    2. 经常听到前端的同学告诉在告诫新人,浮动不能够滥用, 我在平时Coding的时候,经常用Float,只要清除内外浮动一般在布局上都没有问题,兼容主流浏览器也没有问题。

    浮动有什么缺点?为什么前端的GG会有这种经验的传授呢?

    拜谢。
    14 条回复    1970-01-01 08:00:00 +08:00
    Julyyq
        1
    Julyyq  
       2012-09-17 13:11:55 +08:00
    试问没有float怎么布局?
    hzlzh
        2
    hzlzh  
       2012-09-17 13:19:18 +08:00
    宽度偶数好,如果是单边有边框就用奇数;
    另外高度和宽度的奇数偶数取舍还要参照本页的字体大小font-size,你应该了解一下 12px 14px 字体和 13px 字体的区别(对称),中文字体更要考虑。
    http://ux.stackexchange.com/questions/14963/why-is-13px-arial-font-the-web-standard
    浮动的话我常用,没有太多顾忌。然后overflow:hidden,清除。
    eric_zyh
        3
    eric_zyh  
       2012-09-17 13:21:57 +08:00
    1.我码的时候很少考虑浏览器的性能问题,现在PC都这么强大了,渲染慢个几毫秒没什么关系,重要还是压缩css、js、html的体积,能少几个字节算几个字节,毕竟这些流量都是服务器的消耗~

    2.float布局应该没什么问题吧。v2ex的左右双栏结构也是float出来滴~ 前辈说的滥用应该是指的本来可以不需要float就尽量不要float吧?
    bitsmix
        4
    bitsmix  
       2012-09-17 13:48:30 +08:00
    float 需要避免的情况是:

    <ul> <li> </li> <li> </li> </ul>

    这里面, <li> 都浮动了的话, <ul> 会没有高度

    但是只要清理掉浮动就好了。其他倒是没什么。
    romoo
        5
    romoo  
       2012-09-17 13:56:25 +08:00
    2. 不要用 Float 去模拟 Display-inline 的效果。
    twm
        6
    twm  
       2012-09-17 13:57:39 +08:00
    @Julyyq 绝对定位
    Julyyq
        7
    Julyyq  
       2012-09-17 14:15:39 +08:00
    @twm 绝对定位会覆盖z-index低的元素
    NemoAlex
        8
    NemoAlex  
       2012-09-17 14:34:11 +08:00   ❤️ 1
    1. 奇数或者是偶数像素,是一个简单又深刻的问题
    一般来说,由于各种终端设备的分辨率是偶数的,设计上普遍采用偶数像素体系
    奇数像素体系收到排挤,主要的冲突表现在:奇数像素宽度的东西,无法在偶数像素元素内居中显示,总是要差一个像素
    我们经常在一些制作比较粗糙的网页上看到这个问题,尤其是小块的东西,例如一些 icon 和 UI 元素,如果没有居中显示,就会非常明显
    siemonday
        9
    siemonday  
       2012-09-17 15:26:16 +08:00
    float用起来就是麻烦点,得多考虑到对父元素产生的影响
    Dummy
        10
    Dummy  
    OP
       2012-09-18 09:33:13 +08:00
    @romoo 为什么呢?
    用Float来完成inline-display这一个情况就是经常遇到的

    因为低版的浏览器不支持这个特性,所以在这种时候我都float了。
    Dummy
        11
    Dummy  
    OP
       2012-09-18 09:34:12 +08:00
    @NemoAlex 这一点完全明白了。谢谢。
    romoo
        12
    romoo  
       2012-09-18 09:35:04 +08:00
    Dummy
        13
    Dummy  
    OP
       2012-09-18 09:36:35 +08:00
    @eric_zyh 自己写着玩和他们使用还是很有区别的。
    像他们做一些访问量巨高,复杂的页面,如逻辑复杂,效果繁多,有大量DOM节点和图片的detail页面和List页面,能节省哪怕是一点儿性能都应该节约。。。
    hpyhacking
        14
    hpyhacking  
       2012-09-18 10:51:07 +08:00
    第一个问题 你可以用box-sizing来解决
    第二个问题 就跟不要滥用GOTO不要滥用存储过程不要滥用XXX等等一样,自己去体会就好
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1115 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 22:42 · PVG 06:42 · LAX 15:42 · JFK 18:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.