• 欢迎访问少将全栈,学会感恩,乐于付出,珍惜缘份,成就彼此、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 吐槽,投稿,删稿,交个朋友,商务沟通v:ai_draw
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏少将全栈吧

以20像素为基准的CSS网页布局实践分享

点滴 admin 8年前 (2016-04-27) 1715次浏览 已收录 0个评论 扫描二维码

        偶然去到了张鑫旭神的博客,感觉里面都是前端干货,非常值得去学习。

        当然了,此大神09年毕业于华中科技大学,目前在ISUX上海设计中心,能不厉害吗?

        为了不浪费你的时间,建议直接去原链接阅读,肯定收获多多。转自zhangxinxu博客:http://www.zhangxinxu.com/wordpress/?p=5264

        请勿再往下看了,在此仅仅记录一下而已


        开始讲解line-height,以前的字体对齐都用的line-height,但是要让文字占据高度为20像素,那么行高是多少呢?

body {
  line-height: 1.42858;
  font-size: 14px;
}

        在CSS中,行高计算的时候,一定不要向下四舍五入,而要向上。类似上面的代码,虽然14*1.42857近乎就是20像素,但是,不好意思,最后还是以19像素的高度呈现,在Chrome浏览器下就是如此!

        这样就有了一个20像素为基准的网页布局环境了,为什么要用20像素布局呢?

        目前而言,绝大多数网站还是处于12像素字体时代,设计师设计的图标都是按照16*16像素规格设计的偏多;不太专业的设计师可能会14~20像素之间摇摆。

        反正不管怎样,最后(加上sprite工具盛行)我们图形在网页中的尺寸基本上就是16px*16px。

        1. 与后面文字的对齐
由于vertical-align属性的兼容性,以及vertical-align:middle并不是严格意义的垂直居中,因此,小图标+文字的对齐,基本上都要针对不同浏览器加个hack补丁;在加上,如果你的图标尺寸一会儿16像素,一会儿18像素,显然,没法通过全局一个设置使得整站的小图标和文字都对齐良好!

        2. 点击区域大小
有时候,我们的小图标直接就是点击按钮,此时,如果你的尺寸就是16像素*16像素,会不会点不准的概率就上升了,如果图标是20px*20px呢?

        3. 重复冗余的CSS代码
        当下类似grunt-spritesmith的小图标合并工具基本成了前端团队的标配,而根据我的观察,基本上,大家都是设计师给的图标直接扔到文件夹里面进行合并,于是,产出的代码基本上就是width/height/background-position的模式,然而,可能里面70%宽高都是16像素,20%是18像素,还有10%是其他小尺寸,也就是,其实很多CSS代码是可以合并的,然而,都浪费了。

        但是如果所有图标统一按照20px*20px的标准处理,那么网页文字基础高度是20像素,图标也是20像素高,天然对齐,问题1解决;20*20的点击区域对吧,显然比16*16要大,问题2解决;所有图标都是20*20的尺寸范围内,所有width/height都可以合并,大大减少CSS代码,问题3也搞定了!是不是很赞哈。

        然而,实际上的处理要比上面说的复杂和深奥的多!
        图标和文字天然对齐
        按照我们直观的认知,两个元素都是20像素高,都在自己的垂直范围内居中,那这两个元素应该是在一个水平线上的。实际上真的是这样吗?是的,但是,注意这里的但是,是有条件限制的!

        如果inline-block水平元素’overflow’不是’visible’,或者里面没有内联元素(图片、文字之类),则整个元素的基线就是自身的下边缘;否则,基线就是里面最后一行图文元素的基线

        有点不太理解?没关系,不是本文的重点。你只要知道,我们要想20像素高的图标和20像素高的文字天然对齐显示,需要满足这两个条件:
        1、 overflow属性值除了visible都不行;
        2、 里面需要有不加修饰的文本内容;

      

        因此,要想实现小图标天然对齐,我们不能有overflow:hidden同时HTML标签内部有文本内容,张大神给出了方案。

.icon { 
    display: inline-block; 
    width:20px; height:20px; 
    background: ...; 
    white-space:nowrap; 
    letter-spacing: -1em; 
    text-indent: -99em; 
    color: transparent;
    /* IE7 */
    *text-indent: 0;
    *zoom: expression( this.runtimeStyle[’zoom’] = ’1’, this.innerHTML = ’3000’);
}
.icon:before {
    /* 伪元素插入空格文本 */
    content: ’3000’; 
}

        可以有CSS代码段满足各种场景的对齐效果的。无论是空标签HTML,还是内置可访问性提示文字的HTML,都是对齐效果棒棒哒!

        而且,就算文字的字号大小变化,例如14px→16px图标和文字也是对齐良好的,因为,对齐的本质是图标元素里面的文字和后面的文字对齐,文字和文字对齐,自然是天然对齐的,千古难题就这么有了解决方案,以前的CSS hack啊,什么vertical-align控制,还有margin负值偏移都是浮云了。

20像素的基准行高要在体系中才能大放异彩,而这个体系的另一个非常重要的成员就是页面的基本UI组件们!

        所有的按钮均是40像素高度,所有的输入框都是40像素高度,所有的下拉框、时间选择框都是40像素高度;
        由于我们的基准文字高度是20像素,因此,左边文字距离顶部的间距,就是标准的10像素!

        这就使得我们网页中无论是大模块之间的间距,还是小的文字和空间之间的间距;无论是水平的间距还是垂直的间距,全部都是标准的5像素的倍数。从而让我们所有的大小模块的实际高度都是10的倍数(padding-top + line-height*行数 + padding-bottom)。

        换句话说,我们以20像素为基准进行布局和UI组件设计,使得我们的网页间距标准化了,无形之中会让我们页面的排版更专业,同时也让zxx.lib.css的利用率提升了。

        看似是简单的要求以20像素为基准,实际上根植于体系中并有一套完整的解决方案。

        不过,跳出内容本身,换个角度讲,本文的内容其实挺无聊的。

        人家淘宝天猫就是基础高度18像素,不是这里推荐的20像素,但照样年销售额3万亿,照样上市,照样造就了一大批土豪。

        所以,大家大可不必过分在意一点点的CSS细节,CSS对于产品的商业价值有,但是到了一定阶段以后,实际上就有限,或者说很难直观的体现,或者说性价比就不高了。今天还有小伙伴问我,absolute绝对定位元素display:none和visiibility:hidden两个隐藏的渲染性能差异,这个问题的商业价值比本文内容还要小1万倍,以现在浏览器的渲染性能以及我们实际的开发需求,就算有差异,有价值吗,肯定没有!

        大环境如此浮躁,你会发现,自己遇到的困境并不是技术成长遇到了瓶颈,而是根据不需要你这方面进一步的技术成长,来,干点收益更明显的事情!

        我想,很多前辈技术博客断掉了,怕也是人在职场,身不由己!

        能不能走出一条不一样的路呢?

        转自张鑫旭博客:http://www.zhangxinxu.com/wordpress/?p=5264

喜欢 (0)
[🍬谢谢你请我吃糖果🍬🍬~]
分享 (0)
关于作者:
少将,关注Web全栈开发、项目管理,持续不断的学习、努力成为一个更棒的开发,做最好的自己,让世界因你不同。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址