才等录110www.sihu.com的时候,页面显示wwW110www.sihu.com空白是咋回事
点击联系发帖人
时间：2018-04-08 13:54
&figure&&img src=&https://pic2.zhimg.com/v2-b03aaf3f689f6a65d4ed2d2_b.jpg& data-rawwidth=&4032& data-rawheight=&3024& class=&origin_image zh-lightbox-thumb& width=&4032& data-original=&https://pic2.zhimg.com/v2-b03aaf3f689f6a65d4ed2d2_r.jpg&&&/figure&&p&（题图照片：2017年10月摄于丹佛共享办公楼SPACES。）&/p&&p&&br&&/p&&p&日到6日，&b&Node.js北美互动会&/b&在温哥华胜利召开。在这次团结的大会上，&b&谷歌&/b&正式成为Node.js基金会的白金会员。此前的白金会员包括&b&微软、IBM、英特尔、红帽&/b&和三星旗下的&b&Joyent&/b&。&/p&&p&这个Node.js是一位&b&华罗庚式的茶馆儿店小二&/b&，它是一种开源的、服务器端的、非阻断I/O、事件驱动的JavaScript运行环境。它能提高网络服务器的用户容量和响应速度。具体细节请参考：&a href=&https://www.zhihu.com/question//answer/& class=&internal&&张戎：Node.js是用来做什么的？&/a&和该问题下的其它答案。&/p&&p&总而言之，Node.js这个店小二现在是越来越招人待见了。你熟悉的很多公司都在用它，包括谷歌、苹果、宝马、airbnb等等。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f6d6ae53d3a634e926a919eb4bc62dfa_b.jpg& data-size=&normal& data-rawwidth=&978& data-rawheight=&1067& class=&origin_image zh-lightbox-thumb& width=&978& data-original=&https://pic3.zhimg.com/v2-f6d6ae53d3a634e926a919eb4bc62dfa_r.jpg&&&figcaption&在使用Node.js的公司（来源：lullabot.com）&/figcaption&&/figure&&p&因为Node.js依赖于谷歌的V8 JavaScript引擎，所以这次在温哥华&b&谷歌&/b&能成为白金会员，对于整个Node.js社区都是个积极的消息。（参考：&a href=&http://link.zhihu.com/?target=https%3A//medium.com/%40nodejs/node-js-foundation-welcomes-google-as-platinum-member-5a30f1ef7451& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node.js Foundation welcomes Google as Platinum Member&/a&）&/p&&p&有趣的是，在会议上设立展台的除了几大白金会员公司和利用Node.js搞托管、包裹管理、安全、云计算的相关公司以外，&b&还有一条狗&/b&，这是为什么呢？&/p&&figure&&img src=&https://pic4.zhimg.com/v2-ebe13b1fc4fd1f4975bc0b_b.jpg& data-size=&normal& data-rawwidth=&400& data-rawheight=&400& class=&content_image& width=&400&&&figcaption&丹佛初创公司HarperDB的图标（来源：HarperDB.io）&/figcaption&&/figure&&p&这条狗是&b&丹佛初创公司HarperDB&/b&的图标。HarperDB从事的不是宠物行业，而是数据库。&/p&&p&用大白话说吧，&b&HarperDB自认为给数据库的几大头疼病找到了止疼片儿，而Node.js是这种止疼片儿最合适的糖衣。&/b&&/p&&p&先举个例子说说数据库几大头疼病吧。2016年据腾讯网报道，京东当时已有6万快递小哥。&/p&&blockquote&&a href=&http://link.zhihu.com/?target=http%3A//tech.qq.com/a/513.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&刘强东爆料：京东配送条线员工总数已达6万人_科技_腾讯网&/a&&/blockquote&&p&我们知道小哥们的手持POS机（「把枪」）有客户和订单信息，可以实时处理收货等交易操作，这是目前就有的。但是，假如京东想同时对几万小哥的实时数据进行汇总，同时结合线上用户反馈，随时进行分析出报表以供实时决策，比如重新规划路线、临时处理客户投诉、动态改变送货任务，这个头疼的要求可能会把数据工程师逼疯。&/p&&p&&b&头疼有几点。&/b&&/p&&p&首先，&b&边收钱还要边算账&/b&很头疼。传统的数据库，要不擅长&b&交易操作&/b&，要不擅长&b&分析操作&/b&。如果要求同时进行交易和分析（HTAP：Hybrid Transaction and Analytical Processing），需要数据库同时支持&b&在线交易处理&/b&（OLTP）和&b&在线分析处理&/b&（OLAP），这就涉及到完全不同的数据库架构和解决方案，两者的整合不仅涉及姿态各异的软硬件，工程浩大，而且造成不可避免的分析延迟，很难实现真正的混合式交易分析处理。&/p&&p&其次，&b&要长得快还要长得齐&/b&很头疼&b&。&/b&结构严谨的关系型数据库SQL保障交易强于分析，但需要事先实现定义好数据架构，灵活性差。典型场景是电商和网上银行。结构灵活的NoSQL支持数据的快速增长，缩放自如，但交易和分析严谨性差。典型场景是社交网络和客户管理。在用户、产品、订单、业务模式迅速灵活增长时又要求结构严谨，使数据库选择常常在SQL和NoSQL之间陷入两难。&/p&&p&还有，&b&要花钱少还要算得快&/b&很头疼。随着业务量的增长，企业如果有全局实时分析能力的需求，通常只能投资建造更强大的计算中心，购买更快的网络带宽。&/p&&p&&b&那么，HarperDB这家刚刚成立8个月的初创公司拿来了什么止疼片呢？&/b&&/p&&p&这个止疼片点就是一个新型的数据库。啰嗦点说，是一个轻体、SQL／NoSQL兼容、无架构、跨平台、全索引的新型数据库。它主要有仨绝活儿：&/p&&p&&b&1. 「剁碎了」：&/b&&/p&&p&关系型数据库依赖于事先定义好的表及表之间的关系；非关系型数据库依赖于文档或列数据。而HarperDB的基本结构既不是表，也不是列，而是剁碎成单个的数据单元，然后再通过索引保持这些单个数据之间的行、列、表间关系。&/p&&p&这就好像图书馆里的书，既不按类别也不按作者首字母，而是按照入库顺序混乱地摆放在一起，然后依赖RFID索引到每一本书的具体位置。&/p&&p&或者说像亚马逊收购的Kiva Systems库房机器人，完全打乱固定货架，每一个方形立柱货架作为一个独立的存货单元，然后全面索引，需要哪个单元就由举重机器人把那个单元抬过来。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-0cbe6fe1d7d4ff37b0c52e_b.jpg& data-size=&normal& data-rawwidth=&1400& data-rawheight=&787& class=&origin_image zh-lightbox-thumb& width=&1400& data-original=&https://pic3.zhimg.com/v2-0cbe6fe1d7d4ff37b0c52e_r.jpg&&&figcaption&亚马逊库房机器人系统把货架剁碎成单个方形立柱货架。来源：NPR&/figcaption&&/figure&&p&在HarperDB自己的网站上是这样展示的:&/p&&figure&&img src=&https://pic3.zhimg.com/v2-facbc8c923dd07a802da_b.jpg& data-size=&normal& data-rawwidth=&1604& data-rawheight=&1206& class=&origin_image zh-lightbox-thumb& width=&1604& data-original=&https://pic3.zhimg.com/v2-facbc8c923dd07a802da_r.jpg&&&figcaption&最右侧的数据单元就是剁碎了的数据库。来源：harperdb.io&/figcaption&&/figure&&p&&b&2. 「靠边站」：&/b&&/p&&p&对比把数据集中到云端用中央服务器来运算的传统方案，HarperDB致力于支持&b&边缘计算，&/b&这在&b&物联网&/b&的场景下既可能又必要。&/p&&p&依赖于中央服务器来计算，就好像老师在黑板上演算100道题，20个小朋友坐在课堂里看着。边缘计算能够把计算负担推到移动设备上，就好像老师把100道题分了一人5道大家一起算。&/p&&p&HarperDB的设计思路面向边缘计算。设计意图是让企业不必动辄投资在计算中心，而是充分利用已经拥有的移动设备包括手机、笔记本、和嵌入式计算设备。&/p&&p&&b&3. 「讲普通话」：&/b&&/p&&p&分布式边缘计算的一大挑战是各地方言不通。特别是在OLTP／OLAP并重，SQL／NoSQL并存，各种缓存、插件纷繁复杂的情况下，这个矛盾尤其突出。好在从2000年&a href=&http://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Roy_Fielding& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Roy Fielding&/a&的博士论文开始，我们有了一种连接网络上不同平台的「普通话」，即REST或RESTful标准。为了保证HarperDB不为方言所困，HarperDB提供原生的REST API接口。&/p&&p&那好吧，这个有着三大药效的止疼片听着不错。怎么把这个止疼片包装起来呢？&/p&&p&Node.js。&/p&&p&大家从HarperDB边缘计算和面向物联网的路子听出来了，不管这个数据库用什么语言写，对这个语言的要求和对女装模特的要求是一样的：&b&轻体、混搭、流行。&/b&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f8dab57d048fabd69ea16c67e1615b86_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1843& data-rawheight=&1129& class=&origin_image zh-lightbox-thumb& width=&1843& data-original=&https://pic3.zhimg.com/v2-f8dab57d048fabd69ea16c67e1615b86_r.jpg&&&/figure&&p&而Node.js这个店小二就有这三个特点。&/p&&ul&&li&&b&首先，轻体&/b&：Node.js在不工作的情况下几乎不占用资源；其次用Node.js写的程序可以很小。HarperDB目前的发布整个软件才65MB，甚至能够部署到像Raspberry Pi这样的单板机上。&/li&&li&&b&其次，混搭：&/b&Node.js是跨平台的。HarperDB在第一版发布时就可以同步上映在各大影院上，包括Linux, Mac, ARM6, ARM7, 和ARM8上。&/li&&li&&b&另外，流行：&/b&Node.js近年的盛行使得代码包丰富，新人济济，帮HarperDB这样的初创企业提高开发速度，降低招聘门槛。Node.js的程序包管理系统npm现在就有35万个包，号称「当前世界上最大的软件包管理解决方案」。比如，HarperDB公司的CTO找到的async库手到擒来地解决了HarperDB本来需要自己开发编程的问题。所以流行也是优点，只要不是感冒。当然，开源系统的风险在于，有些包的开发维护会因为开发者的个人原因而突然中断，因此得优先选择有大公司大组织站台的。&/li&&/ul&&p&综上三点，HarperDB选择了Node.js作为糖衣包装自己的止疼片儿。而Node.js也欢迎自己在新型数据库上的应用，而且是目前在数据库上的唯一应用。这就是为什么微软、IBM、英特尔、三星、红帽在温哥华欢迎谷歌入Node.js群，来了一条狗。&/p&&p&不开玩笑，&b&Harper真的是一只狗&/b&。它是创始人Stephen的爱犬。好了，发福利了：本文得到Stephen的许可，&b&让知乎成为Harper靓照的全球互联网首发平台&/b&。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b579e5a26e19dc97f8df6b10033b5bbc_b.jpg& data-size=&normal& data-rawwidth=&1280& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic1.zhimg.com/v2-b579e5a26e19dc97f8df6b10033b5bbc_r.jpg&&&figcaption&HarperDB创始人Stephen Goldberg的爱犬Harper本尊。Stephen Goldberg授权使用。&/figcaption&&/figure&&p&本文试图从一个外行的视角来了解HarperDB和他们自己选用Node.js的理由，得到了CEO Stephen Goldberg和CTO Kyle Bernhardy的帮助。这是跟他们团队的合影，右二是Stephen，左一是Kyle。韩裔为Fred Yoon，COO。女生为Kaylan Stock，战略总监。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0caf4a00cbf_b.jpg& data-size=&normal& data-rawwidth=&4032& data-rawheight=&1960& class=&origin_image zh-lightbox-thumb& width=&4032& data-original=&https://pic4.zhimg.com/v2-0caf4a00cbf_r.jpg&&&figcaption&日跟HarperDB「狗仔队」在丹佛共享办公楼SPACES&/figcaption&&/figure&&p&本文基于跟他们哥儿俩的聊天及查阅相关网站，尚未找到HarperDB应用实例的资料，也没有来得及将其产品及技术和其它竞品进行对比。&/p&&ul&&li&&b&满足物联网边缘计算、交易分析同步、缩放自如的数据库还有哪些选择？&/b&&/li&&li&&b&有什么需要转告狗主人的表扬和批评？&/b&&/li&&/ul&&p&恳请懂行知友在评论区留言以助学习冰山水下那一大坨。&/p&&p&&br&&/p&&p&&b&参考资料：&/b&&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//www.harperdb.io/blog/why-choose-nodejs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why Choose Node.js?&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=http%3A//www.harperdb.io/solution/overview& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NoSQL
and SQL Application Database&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Hybrid_transactional/analytical_processing_%28HTAP%29& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hybrid transactional/analytical processing (HTAP)&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.lullabot.com/articles/nodejs-interactive-north-america-2017-key-takeaways& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node.js Interactive North America 2017: Key Takeaways&/a&&/p&&p&&br&&/p&&p&(以上日原帖）&/p&&hr&&p&日更新：&/p&&p&收到HarperDB的创始人Stephen Goldberg对本文评论区 &a class=&member_mention& href=&http://www.zhihu.com/people/2ecef563ffed0cb45a418b& data-hash=&2ecef563ffed0cb45a418b& data-hovercard=&p$b$2ecef563ffed0cb45a418b&&@王文武&/a& 同学批语的回复。懒得看英文的跳过引用块中文见。&/p&&blockquote&Rong, &br&&br&Thanks again for posting the article!
We had two downloads, and one contact last night as a result!
I have used google translate to read several of the comments and they seem to be positive for the most part.
&br&&br&I noticed one person suggested Mongodb instead of HarperDB.
MongoDB utilizes multimodel which means that resources must be duplicated in order to search.
MongoDB also doesn't support full ANSI SQL, and it is much larger then 65mb so it cannot run directly on the edge. &br&&br&SG&/blockquote&&p&他昨晚收到（来自中国的）两次下载和一次（电邮）联系。同时他借助Google翻译看了几条评论大体是积极的。（按咱知乎砖头垫拍两用的风格，他应该过两天再回来看看。）&/p&&p&他特别注意到一名读者（是不是拿不准读「王文武」还是「王斌」？）建议用MongoDB而不是HarperDB。他解释说「MongoDB用的是多模型方法，需要重复占用资源才能支持搜索。另外MongoDB不支持全套ANSI SQL，而且远远大于65MB所以没法直接在边缘上运行」。&/p&&p&&br&&/p&&p&&b&更多回答，请看：&a href=&https://www.zhihu.com/people/rong_zhang/answers& class=&internal&&张戎的回答&/a&&/b&&/p&&p&&b&更多文章，请看：&a href=&https://zhuanlan.zhihu.com/hemingke& class=&internal&&数据冰山&/a&&/b&&/p&
（题图照片：2017年10月摄于丹佛共享办公楼SPACES。） 日到6日，Node.js北美互动会在温哥华胜利召开。在这次团结的大会上，谷歌正式成为Node.js基金会的白金会员。此前的白金会员包括微软、IBM、英特尔、红帽和三星旗下的Joyent。这个Node.js是…
&figure&&img src=&https://pic1.zhimg.com/v2-fdaf98f59edc981e02ca522d0a135432_b.jpg& data-rawwidth=&1000& data-rawheight=&501& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic1.zhimg.com/v2-fdaf98f59edc981e02ca522d0a135432_r.jpg&&&/figure&&blockquote&简评：使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。&/blockquote&&h2&不同类型的图片 placehold&/h2&&figure&&img src=&https://pic3.zhimg.com/v2-5ee5c4bffe40d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&819& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic3.zhimg.com/v2-5ee5c4bffe40d_r.jpg&&&/figure&&p&对于图片占位符，通常我们会使用以下几种处理方式。&/p&&ul&&li&保持图像为空：这样可以保证内容不会出现跳动。&/li&&li&默认占位符：比如说用户想要查看个人资料显示头像内容，如果请求失败或者没有上传过图片，那么通常会使用默认占位符（这种占位符一般会使用 SVG 资源）。&/li&&li&纯色：从图像中获取颜色，并作为背景颜色。图片在过度是时候回显得比较平滑（&a href=&http://link.zhihu.com/?target=https%3A//www.pinterest.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&pinterest&/a& 就是使用这种方式）。&/li&&li&模糊的图像：这种方式会获取原图的缩略图并对其进行渲染，等图片加载完成再过度到原图。&/li&&/ul&&p&以上是我们比较常见的处理图片 placehold 的方法。还有另外一种方式是使用 SVG。&/p&&h2&基于 SVG 的 placehold&/h2&&p&SVG 是矢量图像的理想选择，但是大部分情况是需要显示位图，我们需要考虑的是如何将位图转换成矢量图，下面提供几种转换方案。&/p&&ol&&li&使用矢量绘制原图的轮廓，具体代码可以参考 &a href=&http://link.zhihu.com/?target=https%3A//codepen.io/jmperez/pen/oogqdp& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&demo&/a&。&/li&&/ol&&figure&&img src=&https://pic1.zhimg.com/v2-bfe912fcf8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&345& data-rawheight=&380& data-thumbnail=&https://pic1.zhimg.com/v2-bfe912fcf8_b.jpg& class=&content_image& width=&345&&&/figure&&p&2. 将原图转换为色块图，具体代码可以参考 &a href=&http://link.zhihu.com/?target=https%3A//codepen.io/jmperez/pen/BmaWmQ& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&demo&/a&。&/p&&a class=&video-box& href=&http://link.zhihu.com/?target=https%3A//www.zhihu.com/video/924992& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic1.zhimg.com/80/v2-692a4f01dafa_b.jpg& data-lens-id=&924992&&
&img class=&thumbnail& src=&https://pic1.zhimg.com/80/v2-692a4f01dafa_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/924992&/span&
&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/fogleman/primitive& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Primitive&/a&&/li&&/ul&&p&这里推荐 &a href=&http://link.zhihu.com/?target=https%3A//github.com/fogleman/primitive& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Primitive&/a& 这个库，这个库可以将位图生成矢量图，我们来看看效果。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-5fccf34e2c3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1642& data-rawheight=&1192& class=&origin_image zh-lightbox-thumb& width=&1642& data-original=&https://pic4.zhimg.com/v2-5fccf34e2c3_r.jpg&&&/figure&&p&上图分别使用不同数量的形状来绘制原图。使用矢量图作为 placehold 有一个很好的优点是小，例如上图 10 个图形的矢量图仅仅只占了 1030 个字节，当通过 SVGO 来传输时，代码还能减少到 640 个字节。&/p&&div class=&highlight&&&pre&&code class=&language-abap&&&span&&/span&&span class=&o&&&&/span&&span class=&nv&&svg&/span& &span class=&nv&&xmlns&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&http&/span&&span class=&p&&://&/span&&span class=&nv&&www&/span&&span class=&p&&.&/span&&span class=&nv&&w3&/span&&span class=&p&&.&/span&&span class=&nv&&org&/span&&span class=&p&&/&/span&&span class=&mi&&2000&/span&&span class=&p&&/&/span&&span class=&nv&&svg&/span&&span class=&err&&”&/span&&span class=&nv&&width&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&mi&&1024&/span&&span class=&err&&”&/span&&span class=&nv&&height&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&mi&&1024&/span&&span class=&err&&”&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&817&/span&&span class=&nv&&c70&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M0&/span& &span class=&mi&&0&/span&&span class=&nv&&hz&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&g&/span& &span class=&nv&&fill&/span&&span class=&o&&-&/span& &span class=&nv&&opacity&/span& &span class=&o&&=&/span&&span class=&err&&“。&/span&&span class=&mi&&502&/span&&span class=&err&&”&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&03020&/span&&span class=&nv&&f&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M178&/span& &span class=&mi&&994&/span&&span class=&nv&&l580&/span& &span class=&mi&&92&/span&&span class=&nv&&L402&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&nv&&f2e2ba&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M638&/span& &span class=&mi&&894&/span&&span class=&nv&&L614&/span& &span class=&mi&&6&/span&&span class=&nv&&l472&/span& &span class=&mi&&440&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span& &span class=&nv&&fff8be&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span& &span class=&mi&&854&/span&&span class=&nv&&h300L138&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&err&&路径填充&/span&&span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&mi&&76&/span&&span class=&nv&&c2d9&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M410&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span&&span class=&nv&&L154&/span& &span class=&mi&&530&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span& &span class=&mi&&38&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&err&&路径填充&/span&&span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&mi&&62&/span&&span class=&nv&&b4cf&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M1086&/span&&span class=&o&&-&/span&&span class=&mi&&2&/span&&span class=&nv&&L498&/span&&span class=&o&&-&/span& &span class=&mi&&305148&/span& &span class=&mi&&508&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&mi&&010412&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M430&/span&&span class=&o&&-&/span&&span class=&mi&&2&/span&&span class=&nv&&l196&/span& &span class=&mi&&52&/span&&span class=&o&&-&/span&&span class=&mi&&76&/span& &span class=&mi&&356&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&nv&&eb7d3f&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M598&/span& &span class=&mi&&594&/span&&span class=&nv&&l488&/span&&span class=&o&&-&/span&&span class=&mi&&32&/span&&span class=&o&&-&/span&&span class=&mi&&308&/span& &span class=&mi&&520&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&080&/span&&span class=&nv&&a18&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M198&/span& &span class=&mi&&418&/span&&span class=&nv&&l32&/span& &span class=&mi&&304&/span& &span class=&mi&&116&/span&&span class=&o&&-&/span&&span class=&mi&&448&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&3&/span&&span class=&nv&&f201d&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M1086&/span& &span class=&mi&&1062&/span&&span class=&nv&&l&/span&&span class=&o&&-&/span&&span class=&mi&&344&/span&&span class=&o&&-&/span&&span class=&mi&&52&/span& &span class=&mi&&248&/span&&span class=&o&&-&/span&&span class=&mi&&148&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&nv&&ebd29f&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span& &span class=&err&&“&/span&&span class=&nv&&M630&/span& &span class=&mi&&658&/span&&span class=&nv&&l&/span&&span class=&o&&-&/span&&span class=&mi&&60&/span&&span class=&o&&-&/span&&span class=&mi&&372&/span& &span class=&mi&&516&/span& &span class=&mi&&320&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&p&&/&/span& &span class=&nv&&g&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&p&&/&/span& &span class=&nv&&svg&/span&&span class=&o&&&&/span&
&/code&&/pre&&/div&&p&要达到满意的效我们就必须使用更多的图形来绘制它，如果用 100 个图形来绘制位图，生成的 SVG 大概有 8kB（SVGO 大概 5KB）。随着图形数量的增加，大小也会随之增加。&/p&&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/technopagan/sqip& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SQIP&/a&&/li&&/ul&&p&这是一种折中处理方式，我们可以理解为 Primitive 和高斯模糊的简单叠加，这种方式我可以使用少量的图形块就能达到我们满意的效果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7cd39bb484f869b9e5b815a00c741860_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1666& data-rawheight=&888& class=&origin_image zh-lightbox-thumb& width=&1666& data-original=&https://pic1.zhimg.com/v2-7cd39bb484f869b9e5b815a00c741860_r.jpg&&&/figure&&p&上图输出的 SVG 大小为 900 字节。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&svg xmlns =“ http://www.w3.org/2000/svg ”viewBox =“0 0 ”& &filter id =“b”& &feGaussianBlur stdDeviation =“12”/& &/ filter& &路径填充=“＃817c70”d =“M0 0hz”/& &g filter =“ url（#b）“transform =”translate（4 4）scale（7.8125）“fill-opacity =”。5“& &ellipse fill =”＃000210“rx =”1“ry =”1“transform =”matrix（50.41 11.886 107 194.6）“/& &ellipse fill =”＃eee3bb“rx =”1“ry =”1“transform =”matrix（-56. -24.484 205 110.1）“/& &ellipse fill =”＃fff4bd “rx =”1“ry =”1“transform =”matrix（35.419 14.37 16.4 123.6）“/& &ellipse fill =”＃79c7db“cx =”21“cy =”39“rx =”65“ ry =“65”/& &ellipse fill =“＃0c1320”cx =“117”cy =“38”rx =“34”ry =“47”/& &ellipse fill =“＃5cb0cd”rx =“1” ry =“1”transform =“矩阵（-39.76 -54.553 219.2 7.9）“/& &path fill =”＃e57339“d =”M271 159l-123-16 43 128z“/& &ellipse fill =”＃47332f“cx =”214“ cy =“237”rx =“242”ry =“19”/& &/ g& &/ svg&
&/code&&/pre&&/div&&ul&&li&剪影&/li&&/ul&&p&&a href=&http://link.zhihu.com/?target=https%3A//twitter.com/mikaelainalem& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Mikael Ainalem&/a& 分享了一个 &a href=&http://link.zhihu.com/?target=https%3A//codepen.io/ainalem/full/aLKxjm/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&codepen&/a&，使用双色轮廓作为 placehold，结果效果非常好：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-c1eee94d443db2c75943c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&800& data-rawheight=&531& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic1.zhimg.com/v2-c1eee94d443db2c75943c_r.jpg&&&/figure&&p&上面这种 SVG 是通过手绘得到的，不过我们也可以使用自动化工具自动生成。&/p&&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/tooolbox/node-potrace& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&node-potrace&/a& （js）可以将原图转换成矢量图。&/li&&/ul&&figure&&img src=&https://pic3.zhimg.com/v2-a3af32a4e2ae39be2beabee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&593& data-rawheight=&316& class=&origin_image zh-lightbox-thumb& width=&593& data-original=&https://pic3.zhimg.com/v2-a3af32a4e2ae39be2beabee_r.jpg&&&/figure&&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//craftcms.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Craft 3 CMS&/a& 也添加了对剪影的支持 —— &a href=&http://link.zhihu.com/?target=https%3A//github.com/nystudio107/craft3-imageoptimize/blob/master/src/lib/Potracio.php& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Potracio&/a& （php）。&/li&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/EmilTholin/image-trace-loader& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&image-trace-loader&/a& 可以追踪图片资源，然后导入生成的 img/svg+xml URL&/li&&/ul&&blockquote&原文：&a href=&http://link.zhihu.com/?target=https%3A//medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How to use SVG as a Placeholder, and Other Image Loading Techniques&/a&&br&&br&推荐阅读：&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&前端开发备忘录（合集）&/a&&/blockquote&&p&欢迎关注：知乎专栏「&a href=&https://zhuanlan.zhihu.com/jiguang-daily& class=&internal&&极光日报&/a&」，每天为 Makers 导读三篇优质英文文章。&/p&
简评：使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。不同类型的图片 placehold对于图片占位符，通常我们会使用以下几种处理方式。保持图像为空：这样可以保证内容不会出现跳动。默认占位符：比如说用户想要查看个人资料显示头像内容…
&figure&&img src=&https://pic1.zhimg.com/v2-f3f42a6e01ba5cb178a2_b.jpg& data-rawwidth=&700& data-rawheight=&700& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic1.zhimg.com/v2-f3f42a6e01ba5cb178a2_r.jpg&&&/figure&&p&&b&伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？&/b&&/p&&p&&i&伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。之所以叫伪元素，是因为他修饰不在文档树中的部分；不是真实存在的；&/i&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-bfc2cc6a05e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1242& data-rawheight=&394& class=&origin_image zh-lightbox-thumb& width=&1242& data-original=&https://pic3.zhimg.com/v2-bfc2cc6a05e_r.jpg&&&/figure&&p&伪元素实用小技巧 &/p&&figure&&img src=&https://pic1.zhimg.com/v2-ee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&991& data-rawheight=&510& class=&origin_image zh-lightbox-thumb& width=&991& data-original=&https://pic1.zhimg.com/v2-ee_r.jpg&&&/figure&&h2&1.清除浮动&/h2&&p&何谓清除浮动—？一个父元素的所有子元素如果都是浮动的，那么这个父元素是没有高度的;父元素并没有脱离正常的文档流，仍然占据正常文档流的空间; & 1. 如果这个父元素的相邻元素是行内元素，那么这个行内元素将会在这个父元素的区域内见缝插针，找到一块放得下它的地方 & 2. 如果相邻的元素是一个块级元素，那么设置这个块级元素的margin-top将会以这个父元素的起始位置作为起点。&/p&&p&问题：如何解决高度塌陷？&/p&&p&方法：把父容器的高度撑起来，考虑到浮动了的元素并没有脱离正常文档流，而其它元素会围绕着它环绕，所以清除浮动简单有效的办法就是让环绕的元素不可环绕，把它变成一把尺子，放在最后面，把所有浮动的元素顶起来，而这把尺子就是一个设置了clear的块级元素。因为块级元素会换行，并且设置它两边不能跟着浮动的元素，所以它就跑到浮动元素的下面去，就像一把尺子把浮动元素的内容给顶起来了。而这个可以用一个after实现，因为after就是最后一个子元素：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.clearfix:after{
content: &&;
&/code&&/pre&&/div&&h2&2.画分割线&/h2&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e28c310fbfcd99bb45e4b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&453& data-rawheight=&67& class=&origin_image zh-lightbox-thumb& width=&453& data-original=&https://pic4.zhimg.com/v2-e28c310fbfcd99bb45e4b_r.jpg&&&/figure&&p&&br&&/p&&p&&i&在开发中如果我们遇到类似这样的需求我们？我们应该如何只用一个简单的css元素去实现他？&/i&&/p&&p&&b&方案：一个p标签,左右两条线用before和after画出来：&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b259be08837bec7dc0dc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1139& data-rawheight=&429& class=&origin_image zh-lightbox-thumb& width=&1139& data-original=&https://pic1.zhimg.com/v2-b259be08837bec7dc0dc_r.jpg&&&/figure&&h2&3.计数器&/h2&&p&&i&动态的计算商品的数量，我们经常会借用js来实现；我想告诉css也能实现这个效果，他比js用起来简单多了&/i&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-180b5cad3b3dbdc001ef5d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&426& data-rawheight=&84& class=&origin_image zh-lightbox-thumb& width=&426& data-original=&https://pic2.zhimg.com/v2-180b5cad3b3dbdc001ef5d_r.jpg&&&/figure&&p&&br&&/p&&blockquote&1.counter-reset: 属性创建或者重置一个或多个计数器；&br&2.counter-increment: 属性递增一个或多个计数器值；&br&3.content: 与:before 及:after 伪元素配合使用，来插入生成内容。&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-34a6d811f06d30f15e2a26ef125ff4a4_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&925& data-rawheight=&413& class=&origin_image zh-lightbox-thumb& width=&925& data-original=&https://pic1.zhimg.com/v2-34a6d811f06d30f15e2a26ef125ff4a4_r.jpg&&&/figure&&p&&br&&/p&&p&没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技；&/p&&h2&4.平行四边形&/h2&&p&&i&有没有办法只让容器的形状倾斜而保持其内容不变呢？或许你会想到嵌套两层元素，外层skew（）,对内容在应用一次反相skew变形，从而抵消变形的效果。但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘&/i&&/p&&p&解决方案：&b&伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面&/b&&/p&&p&光说不练，假把式&b&&a href=&http://link.zhihu.com/?target=http%3A//dabblet.com/gist/f2d9b238aa9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&试一试&/a&&/b&&/p&&h2&5. 梯形标签页&/h2&&p&&i&在网页中我们经常见到梯形形状的标签页，常见的技巧都是比较杂乱，或者说难以维护的，那他们是如何实现的呢？&/i&&/p&&p&解决方案： &b&三维世界中旋转一个矩形，由于透视关系，我们在二维图像上看到一个梯形，再结合平行四边实现的方法便能实现&/b&&/p&&blockquote&perspective: 观察者与z=0平面的距离;&/blockquote&&p&对元素使用了3D变形之后，其内部的变形效应是&不可逆转的&，和2D变形不同（2D变形内部的逆向变形可以抵消外部的变形效应）；&/p&&p&为了让他的尺寸更好掌握，我们可以为他指定transform-origin：也可用scale()对他在进行美观操作；&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-d3d01a3340cdd32486e9afa38b6e03f9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&776& data-rawheight=&365& class=&origin_image zh-lightbox-thumb& width=&776& data-original=&https://pic2.zhimg.com/v2-d3d01a3340cdd32486e9afa38b6e03f9_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-2ece7db5cde9be5e3f6f16f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&686& data-rawheight=&89& class=&origin_image zh-lightbox-thumb& width=&686& data-original=&https://pic4.zhimg.com/v2-2ece7db5cde9be5e3f6f16f_r.jpg&&&/figure&&p&&br&&/p&&p&&b&&a href=&http://link.zhihu.com/?target=http%3A//dabblet.com/gist/dc8e794502& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&试一试&/a&&/b&&/p&&h2&6 多列均匀布局&/h2&&p&如何实现下列这种多列均匀布局：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-ccc8ab00ad5e2b642f2a1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&468& data-rawheight=&141& class=&origin_image zh-lightbox-thumb& width=&468& data-original=&https://pic2.zhimg.com/v2-ccc8ab00ad5e2b642f2a1_r.jpg&&&/figure&&p&&br&&/p&&p&通过给伪元素 :after 设置 inline-block 设置宽度 100% ，配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。&/p&&p&那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？&/p&&p&原因在于 justify 只有在存在第二行的情况下，第一行才两端对齐，所以在这里，我们需要制造一个假的第二行，而 :after 伪元素正好再适合不过。 &/p&&figure&&img src=&https://pic2.zhimg.com/v2-d145ec834fb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&436& data-rawheight=&474& class=&origin_image zh-lightbox-thumb& width=&436& data-original=&https://pic2.zhimg.com/v2-d145ec834fb_r.jpg&&&/figure&&p&&br&&/p&&p&&b&需要注意的是img/input等单标签是没有before/after伪元素的，因为它们本身是不可以有子元素，如果你给img添加一个before，那么会被浏览器忽略。&/b&&/p&&p&伪元素能实现的功能很多！欢迎大家在评论底下一一补充&/p&
伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起…
&figure&&img src=&https://pic4.zhimg.com/v2-e7eebef2e_b.jpg& data-rawwidth=&378& data-rawheight=&298& class=&content_image& width=&378&&&/figure&&blockquote&之前一直在博客园写作，最近几天才开的知乎专栏，这段时间我会每天从博客园搬运一篇博客到知乎上来。才疏学浅， 谬误之处请不吝于评论区指教，谢谢大家。我的博客园博客地址： &a href=&https://link.zhihu.com/?target=http%3A//www.cnblogs.com/penghuwan/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&外婆的彭湖湾 - 博客园&/a&&/blockquote&&p&&br&&/p&&p&文章目录&/p&&ul&&li&&i&单行文本溢出的省略&/i&&/li&&li&&i&从单行文本溢出省略到多行文本溢出省略&/i&&/li&&li&&i&多行文本溢出的省略（...）方案一 ---简单方便的解决方案&/i&&/li&&li&&i&多行文本溢出的省略（...）方案二 ---简单粗暴的解决方案&/i&&/li&&li&&i&多行文本溢出的省略（...）方案三 --简洁优雅的解决方案&/i&&/li&&/ul&&p&&br&&/p&&p&写前端UI的朋友们也许都遇到过这样的问题：我们需要实现这样一个需求，在一个父级元素中隐藏一个可能过长的文本&/p&&p&&br&&/p&&p&&i&这个文本可能是单行的：&/i&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a8c3d23b4fd8e_b.jpg& data-caption=&& data-rawwidth=&530& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&530& data-original=&https://pic1.zhimg.com/v2-a8c3d23b4fd8e_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&i&也可能是多行的：&/i&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-de051dd5e0_b.jpg& data-caption=&& data-rawwidth=&412& data-rawheight=&150& class=&content_image& width=&412&&&/figure&&p&&br&&/p&&p&下面我就给大家展示如何简单或优雅地实现这种需求&/p&&p&&br&&/p&&blockquote&&b&单行文本溢出的省略&/b&&/blockquote&&p&&br&&/p&&p&先上代码&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&style &/span&&span class=&o&&=&/span&
&span class=&s&&'width:400&/span&
&span class=&s&&
height:40&/span&
&span class=&s&&
border:1'&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&
&span class=&s&&'overflow:&/span&
&span class=&s&&
text-overflow:&/span&
&span class=&s&&
white-space:'&/span&&span class=&p&&&&/span&
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&demo:&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b1a054cb7ba80affaa8ff11_b.jpg& data-caption=&& data-rawwidth=&904& data-rawheight=&166& class=&origin_image zh-lightbox-thumb& width=&904& data-original=&https://pic1.zhimg.com/v2-b1a054cb7ba80affaa8ff11_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&&i&关于overflow: hidden&/i&&/b&&/p&&p&这里我们需要注意到一点：这里的overflow并不是设置为父级元素div的属性，而是p标签的属性，需要和overflow的普通用法区分开来&/p&&ol&&li&overflow：hidden的普通用法：用在块级元素（例如div）的外层隐藏内部溢出元素&/li&&li&overflow: hidden的特殊用法：在上述例子中配合text-overflow:white-space:实现p元素隐藏自身的溢出并设置（...）的效果&/li&&/ol&&p&&br&&/p&&p&&b&&i&关于text-overflow:&/i&&/b&&/p&&p&这一属性依赖于overflow: hidden存在，只有设置了overflow:hidden它才是能够生效的，你可以把它看作overflow对于文本溢出隐藏的一种‘特殊样式’&/p&&p&&br&&/p&&p&&b&&i&关于white-space: nowrap&/i&&/b&&/p&&p&它的作用是让文本不换行，这是overflow:hidden和text-overflow：ellipsis生效的基础！没有它overflow:hidden和text-overflow：ellipsis无法生效！（在单行文本溢出省略这一案例中）&/p&&p&&br&&/p&&blockquote&&b&从单行文本溢出省略到多行文本溢出省略&/b&&/blockquote&&p&许多同学可能会这样想：怎么实现多行文本省略呢？不是只要把white-space:nowrap去掉就可以了吗？( _(:3 」∠)_ 要是这么简单就好了...)&/p&&p&实践出真知，让我们来试一下，&b&去掉CSS样式中的white-space:nowrap&/b&&/p&&p&&br&&/p&&p&demo：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aae7acb0933dca_b.jpg& data-caption=&& data-rawwidth=&930& data-rawheight=&282& class=&origin_image zh-lightbox-thumb& width=&930& data-original=&https://pic1.zhimg.com/v2-aae7acb0933dca_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&这次，没能隐藏成功，那如果我们overflow:hidden是设在父级元素div中呢？&/p&&p&得到demo:&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f9a4f49a14845fcecc753d1_b.jpg& data-caption=&& data-rawwidth=&914& data-rawheight=&274& class=&origin_image zh-lightbox-thumb& width=&914& data-original=&https://pic3.zhimg.com/v2-f9a4f49a14845fcecc753d1_r.jpg&&&/figure&&p&&br&&/p&&p&隐藏成功了，&b&可你仍然看不到你想看到的那三个点&/b&&/p&&p&&br&&/p&&p&妥妥地失败了，嗯，没错,所以对于多行文本溢出的省略我们需要另辟蹊径了&/p&&p&&br&&/p&&blockquote&&b&多行文本溢出的省略（...）方案一 ---简单方便的解决方案&/b&&/blockquote&&p&&br&&/p&&p&我们可以借助&b&webkit的CSS扩展属性&/b&实现这一点：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&style &/span&&span class=&o&&=&/span&
&span class=&s&&'width:400&/span&
&span class=&s&&
height:70&/span&
&span class=&s&&
border:1'&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&
&span class=&s&&'display: -webkit-//对象作为弹性伸缩盒子模型显示 &/span&
&span class=&s&&
-webkit-box-orient://设置或检索伸缩盒对象的子元素的排列方式 &/span&
&span class=&s&&
-webkit-line-clamp: 2;//溢出省略的界限&/span&
&span class=&s&&
overflow:'&/span&&span class=&err&&//设置隐藏溢出元素&/span&
&span class=&p&&&&/span&
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&demo:&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-b05e1ed5b747dcb9fcf3542_b.jpg& data-caption=&& data-rawwidth=&826& data-rawheight=&190& class=&origin_image zh-lightbox-thumb& width=&826& data-original=&https://pic2.zhimg.com/v2-b05e1ed5b747dcb9fcf3542_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&【注意】&/p&&ol&&li&四行CSS缺一不可！&/li&&li&因为这是webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器：chrome/safari/QQ浏览器/360/猎豹等以及绝大多数的移动端浏览器&/li&&/ol&&p&&br&&/p&&blockquote&&b&多行文本溢出的省略（...）方案二 ---简单粗暴的解决方案&/b&&/blockquote&&p&&br&&/p&&p&&b&方案一固然最为简单，但其还存在着跨浏览器兼容的问题&/b&，于是人民群众们提出了一种简单粗暴的方式去实现通用的解决方案：给div固定高和宽，同时采用相对定位，与此同时对在div内放一个&p&...&/p&对其使用绝对定位，定在右下角，同时设其背景颜色为白色就可以了：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&style &/span&&span class=&o&&=&/span&
&span class=&s&&'position:&/span&
&span class=&s&&
width:400&/span&
&span class=&s&&
height:45&/span&
&span class=&s&&
border:1&/span&
&span class=&s&&
overflow:'&/span&&span class=&p&&&&/span&
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&style &/span&&span class=&o&&=&/span& &span class=&s&&'position:right:0;bottom:6margin:0;background:white'&/span&&span class=&p&&&&/span&...&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&demo:&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-3cde1d1fe04dcf4d4d79b69a3cca185d_b.jpg& data-caption=&& data-rawwidth=&834& data-rawheight=&156& class=&origin_image zh-lightbox-thumb& width=&834& data-original=&https://pic2.zhimg.com/v2-3cde1d1fe04dcf4d4d79b69a3cca185d_r.jpg&&&/figure&&p&&br&&/p&&p&但方案二也有一些问题&/p&&p&1在文本没有溢出父级元素时也同样显示省略号：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2c6cf32decbe8bc9adbd3aa_b.jpg& data-caption=&& data-rawwidth=&886& data-rawheight=&196& class=&origin_image zh-lightbox-thumb& width=&886& data-original=&https://pic3.zhimg.com/v2-2c6cf32decbe8bc9adbd3aa_r.jpg&&&/figure&&p&&br&&/p&&p&2末尾处文本可能有被“裁剪”的副效果：&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-cec3af63b50e574b05522_b.jpg& data-caption=&& data-rawwidth=&936& data-rawheight=&214& class=&origin_image zh-lightbox-thumb& width=&936& data-original=&https://pic4.zhimg.com/v2-cec3af63b50e574b05522_r.jpg&&&/figure&&p&&br&&/p&&blockquote&&b&多行文本溢出的省略（...）方案三 --简洁优雅的解决方案&/b&&/blockquote&&p&&br&&/p&&p&那么有没有更加优雅的解决方案，在没有溢出的时候不显示省略号（...），在溢出的时候隐藏并显示省略号呢？答案是有的！先看看我们最终实现的demo:&/p&&p&&br&&/p&&p&在文本没有溢出父级元素时：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8b4cf126e5ae49a5be4e0_b.jpg& data-caption=&& data-rawwidth=&468& data-rawheight=&202& class=&origin_image zh-lightbox-thumb& width=&468& data-original=&https://pic1.zhimg.com/v2-8b4cf126e5ae49a5be4e0_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&文本溢出父级元素时：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fb246f02dbdef698f5847cbfc02dab05_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&196& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic1.zhimg.com/v2-fb246f02dbdef698f5847cbfc02dab05_r.jpg&&&/figure&&p&&br&&/p&&p&下面是HTML和JS代码：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&id&/span&&span class=&o&&=&/span&&span class=&s&&'view'&/span&
&span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&'border:1&/span&
&span class=&s&&
width:200&/span&
&span class=&s&&
height:70&/span&
&span class=&s&&
overflow:auto'&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&JS代码&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&s&/span& &span class=&o&&=&/span& &span class=&s1&&'这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本'&/span&
&span class=&nx&&el&/span& &span class=&o&&=&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&getElementById&/span&&span class=&p&&(&/span&&span class=&s1&&'view'&/span&&span class=&p&&);&/span&
&span class=&nx&&n&/span& &span class=&o&&=&/span& &span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&offsetHeight&/span&&span class=&p&&;&/span&
&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&nx&&i&/span&&span class=&o&&=&/span&&span class=&mi&&0&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span&&span class=&o&&&&/span&&span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span&&span class=&o&&++&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&p&&);&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&nx&&n&/span& &span class=&o&&&&/span& &span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&scrollHeight&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&style&/span&&span class=&p&&.&/span&&span class=&nx&&overflow&/span& &span class=&o&&=&/span& &span class=&s1&&'hidden'&/span&&span class=&p&&;&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&o&&-&/span&&span class=&mi&&3&/span&&span class=&p&&)&/span& &span class=&o&&+&/span& &span class=&s1&&'...'&/span&&span class=&p&&;&/span&
&span class=&k&&break&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&首先我们需要弄清楚offsetHeight和scrollHeight所表示的高度：&/p&&p&&br&&/p&&p&1溢出显示滚动条时：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ee9d52e97c4eb8ccdf2a8_b.jpg& data-caption=&& data-rawwidth=&640& data-rawheight=&650& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-ee9d52e97c4eb8ccdf2a8_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&2没有溢出时：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-41b0b04f3de9ac1a3a1ac3_b.jpg& data-caption=&& data-rawwidth=&768& data-rawheight=&326& class=&origin_image zh-lightbox-thumb& width=&768& data-original=&https://pic1.zhimg.com/v2-41b0b04f3de9ac1a3a1ac3_r.jpg&&&/figure&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&el&/span& &span class=&o&&=&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&getElementById&/span&&span class=&p&&(&/span&&span class=&s1&&'view'&/span&&span class=&p&&);&/span&
&span class=&nx&&n&/span& &span class=&o&&=&/span& &span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&offsetHeight&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&表示的是取到当前包裹文本的父级元素的高度&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&p&&);&/span&
&/code&&/pre&&/div&&p&表示在for循环中取出长度递增的文段，例如：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&'这' --& '这是' --& '这是一'
&/code&&/pre&&/div&&p&当n & el.scrollHeight也就是 当前文本高度&滚动条内的内容的高度，代表着刚好达到溢出的界限，此时执行if内的语句&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&style&/span&&span class=&p&&.&/span&&span class=&nx&&overflow&/span& &span class=&o&&=&/span& &span class=&s1&&'hidden'&/span&&span class=&p&&;&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&o&&-&/span&&span class=&mi&&3&/span&&span class=&p&&)&/span& &span class=&o&&+&/span& &span class=&s1&&'...'&/span&&span class=&p&&;&/span&
&span class=&k&&break&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&将父级元素view的overflow设置为hidden，并且将末尾的三个文字用...取代，同时跳出for循环&/p&&p&&br&&/p&&p&perfect!
这样我们就实现了优雅的解决方案&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0aaa8e5e39faced1683b44c_b.jpg& data-caption=&& data-rawwidth=&1626& data-rawheight=&1508& class=&origin_image zh-lightbox-thumb& width=&1626& data-original=&https://pic4.zhimg.com/v2-0aaa8e5e39faced1683b44c_r.jpg&&&/figure&&p&&/p&
之前一直在博客园写作，最近几天才开的知乎专栏，这段时间我会每天从博客园搬运一篇博客到知乎上来。才疏学浅， 谬误之处请不吝于评论区指教，谢谢大家。我的博客园博客地址：
文章目录单行文本溢出的省略从单行文本溢出省略到多行文…
&figure&&img src=&https://pic2.zhimg.com/v2-e69af734e1b2d1f4aafa5_b.jpg& data-caption=&& data-rawwidth=&394& data-rawheight=&357& class=&content_image& width=&394&&&/figure&&p&所有的事件都会走一遍这个流程。&/p&&blockquote&事件委托(代理)，这个地方一直不是特别明白，为什么可以在父元素上面安装addEventListener就可以监视管理它的子元素?&/blockquote&&p&如果点击了 (text) 那么在 div、body、……绑定的事件都会执行，除非有一个事件阻止了事件冒泡。&/p&&p&因此我们可以给父元素绑定一个事件，这样子元素的事件就会&b&冒泡&/b&到父元素。&/p&&p&----------------&/p&&p&当事件捕获和事件冒泡一起存在的情况，事件又是如何触发呢。这里记被点击的DOM节点为target节点&/p&&ol&&li&document 往 target节点，捕获前进，遇到注册的捕获事件立即触发执行&/li&&li&到达target节点，触发事件（对于target节点上，是先捕获还是先冒泡则捕获事件和冒泡事件的注册顺序，先注册先执行）&/li&&li&target节点 往 document 方向，冒泡前进，遇到注册的冒泡事件立即触发&/li&&/ol&&h2&总结下就是:&/h2&&ul&&li&对于非target节点则先执行捕获在执行冒泡&/li&&li&对于target节点则是先执行先注册的事件，无论冒泡还是捕获&/li&&/ul&
所有的事件都会走一遍这个流程。事件委托(代理)，这个地方一直不是特别明白，为什么可以在父元素上面安装addEventListener就可以监视管理它的子元素?如果点击了 (text) 那么在 div、body、……绑定的事件都会执行，除非有一个事件阻止了事件冒泡。因此我们…
&figure&&img src=&https://pic1.zhimg.com/v2-4ea3fefcdec72f_b.jpg& data-rawwidth=&910& data-rawheight=&276& class=&origin_image zh-lightbox-thumb& width=&910& data-original=&https://pic1.zhimg.com/v2-4ea3fefcdec72f_r.jpg&&&/figure&&blockquote&本文基于Apple UI Design Resources-iOS 11 beta (Sketch)&/blockquote&&p&在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名较为完整，&b&虽然不是唯一答案&/b&，但很有参考价值。本文是系列第2篇，整理补充了一下思路，谢谢大家对我第1篇的的支持~&/p&&blockquote&第1篇的链接在此：&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&图层英文怎么写？来看看Apple官方写法(Bars篇)&/a&&/blockquote&&h2&&b&命名规则&/b&&/h2&&p&&b&1.顺序为大类/中类/小类+属性、状态描述（非必须，看情况），使用symbol&/b&&/p&&p&Sketch的Symbol会识别&/&进行归类，这个很多人都知道。特别是大型的UiKit，尤其需要这种系统的分类方法。而且，Sketch要正式推出的Libraries，其实也是基于Symbol进行协作哦，所以分类更能提高效率。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-62f34bcfce0dd_b.jpg& data-rawwidth=&946& data-rawheight=&164& class=&origin_image zh-lightbox-thumb& width=&946& data-original=&https://pic1.zhimg.com/v2-62f34bcfce0dd_r.jpg&&&/figure&&p&&br&&/p&&p&&b&Controls(控制器)&/b&&/p&&p&控制器包括以下组件（类名），有些是查找的翻译，有些是我自己试着翻译的。如有错误，希望大家多多指正，我会及时修改的。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-18f91f88e5a64b457cdfb5e_b.jpg& data-rawwidth=&484& data-rawheight=&378& class=&origin_image zh-lightbox-thumb& width=&484& data-original=&https://pic4.zhimg.com/v2-18f91f88e5a64b457cdfb5e_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&大类&/b&：Controls&/li&&/ul&&p&&br&&/p&&ul&&li&&b&中类：&/b&按钮（Button）、编辑菜单（Edit Menu）、分页点（Pagination Dots）、进度提示（Progress Indicators）、分段标题（Section Headers）、分段控制器（Segmented Control）、滑动条（Sliders）、表格视图单元格（Table View cells）、文本域（Text Field）、文本（Text）&/li&&/ul&&p&&br&&/p&&ul&&li&&b&小类：&/b&步进器（Stepper）、开关（Switch）、页面指示器（Page Controls）、头部（Header，灰色）、Cell（单元格）、脚注（Footer，cell下面的小文字）、粘性标题（Sticky Header）、分段索引（Section Index）、Label（标注，各种文字说明）、选项卡（Tab）、Action（功能，泛指一个小功能组件，我们可以按自己的需要起名）、Dots（点）、Checkmark（对号）、Accessory（附件，一般是几个action集合）、Indicator（指示器）...&/li&&/ul&&p&&br&&/p&&ul&&li&&b&属性、状态描述：&/b&Light（明、浅色）、Dark（暗、暗色）、Left（左）、Center（中）、Right（右）、Default（默认）、Large（大）、Info（信息）、Single（单一）、Add（添加）、、On（在...上）、Selection（选中）、Multi（多）、+（多个组件之间并列）、With（带有）、Line（行，一二三行文字）、Move（移动）、Delete（删除）...&/li&&/ul&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1acb69ce6ba28_b.jpg& data-rawwidth=&510& data-rawheight=&479& class=&origin_image zh-lightbox-thumb& width=&510& data-original=&https://pic4.zhimg.com/v2-1acb69ce6ba28_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&3.低耦合的组件用_resourse进行归类，&_&符号开头会使symbol排在最末。&/b&&/p&&p&低耦合可以理解为一个组件可用在很多地方，一般是拆分后的比较基本的组件。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-be7c106fd6dce_b.jpg& data-rawwidth=&750& data-rawheight=&100& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/v2-be7c106fd6dce_r.jpg&&&/figure&&ul&&li&Controls/TableViewCell/_Resources/Left Actions/Add Light（控制/表格视图单元格/_资源/左功能/浅色添加）&/li&&/ul&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f40defdf24a_b.jpg& data-rawwidth=&655& data-rawheight=&544& class=&origin_image zh-lightbox-thumb& width=&655& data-original=&https://pic3.zhimg.com/v2-f40defdf24a_r.jpg&&&/figure&&p&也就是说，组合好的较大组件是symbol，拆分后低耦合的_Resources是symbol内的symbol，一般是归属于它的父集，如TableViewCell。&/p&&p&&br&&/p&&p&4.&b&大小写&/b&&/p&&p&大写首字母即各种组件Symbol，小写则多见内部非symbol的图层、组 。&/p&&p&&br&&/p&&p&&b&记得在命名的前期需要想好整体的结构。&/b&&/p&&p&&br&&/p&&h2&&b&翻译举例：&/b&&/h2&&p&这些可以简单看看，印证一下我的分析~&/p&&p&&br&&/p&&h2&Buttons(按钮)&/h2&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-882a01bb5ff1d2feb8734d_b.jpg& data-rawwidth=&790& data-rawheight=&322& class=&origin_image zh-lightbox-thumb& width=&790& data-original=&https://pic2.zhimg.com/v2-882a01bb5ff1d2feb8734d_r.jpg&&&/figure&&ol&&li&Controls/buttons/light default(控制/按钮/浅色默认)&/li&&li&Controls/Buttons/Light Info(控制/按钮/浅色信息)&/li&&li&Controls/Buttons/Light Add(控制/按钮/浅色添加)&/li&&/ol&&p&&br&&/p&&h2&Segmented Control(分段控制器)&/h2&&p&Controls / Segmented Control / 3 Buttons on Light（控制/分段控制器/3浅色按钮）&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-efcf191d3aee01e02d9e58_b.jpg& data-rawwidth=&748& data-rawheight=&130& class=&origin_image zh-lightbox-thumb& width=&748& data-original=&https://pic4.zhimg.com/v2-efcf191d3aee01e02d9e58_r.jpg&&&/figure&&ol&&li&选项卡（Tab1,Tab2,Tab3），这里为什么写着Label，而图层名叫Tab呢？分析Label只是指代标签内容的名字，而Tab是组件的类型。&/li&&/ol&&p&&br&&/p&&h2&Sliders(滑块)&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d2e3ea4d1ceac2c40935a_b.jpg& data-rawwidth=&796& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic1.zhimg.com/v2-d2e3ea4d1ceac2c40935a_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls/Slider/Light Default（控制/滑块/浅色默认）&/li&&li&Controls/Slider/Light Volume（控制/滑块/浅色音量）&/li&&li&fill（填充）&/li&&li&knob（把手）&/li&&li&track（路径）&/li&&/ol&&p&&br&&/p&&h2&Stepper（计步器）&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a8abe90adc657fe2cb09e67_b.jpg& data-rawwidth=&798& data-rawheight=&190& class=&origin_image zh-lightbox-thumb& width=&798& data-original=&https://pic1.zhimg.com/v2-a8abe90adc657fe2cb09e67_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls/TableViewCell/Light Default（控制/表格视图单元格/浅色默认）&/li&&li&外层symbol名：Left Detail（左详情）&/li&&/ol&&ul&&li&内层symbol名：Controls/TableViewCell/_Resources/Left Accessory/Light 1 Line（控制/表格视图单元格/_资源/左部件/浅色1行）&/li&&/ul&&p&3.外层symbol名：Right Detail（右详情）&/p&&ul&&li&内层symbol名：Controls/TableViewCell/_Resources/Right Accessories/Stepper（控制/表格视图单元格/_资源/右部件/计步器）&/li&&/ul&&p&&br&&/p&&h2&Page Controls（页面指示器）&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-85cdd9b862f7_b.jpg& data-rawwidth=&752& data-rawheight=&212& class=&origin_image zh-lightbox-thumb& width=&752& data-original=&https://pic1.zhimg.com/v2-85cdd9b862f7_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls / Pagination Dots / 2 Dots On Light（控制 / 分页点 / 2个浅色上的点）&/li&&li&Controls / Pagination Dots / 2 Dots On Dark（控制 / 分页点 / 2个暗色上的点）&/li&&li&Dot 1（点）&/li&&/ol&&p&&br&&/p&&h2&Edit Menu（编辑菜单）&/h2&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-404fcc223feea0dcd4d0d00e_b.jpg& data-rawwidth=&752& data-rawheight=&278& class=&origin_image zh-lightbox-thumb& width=&752& data-original=&https://pic2.zhimg.com/v2-404fcc223feea0dcd4d0d00e_r.jpg&&&/figure&&ol&&li&Controls/Edit Menu/Multi Action（控制 / 编辑菜单 / 多功能）&/li&&li&action1（功能1）&/li&&li&Controls/Edit Menu/Light Text Selection（控制 / 编辑菜单 / 浅色被选中文字 ）&/li&&/ol&&h2&Progress Indicators（进度提示）&/h2&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-d274fe1dec1c82b70dfc15ed6ff1bc21_b.jpg& data-rawwidth=&796& data-rawheight=&630& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic4.zhimg.com/v2-d274fe1dec1c82b70dfc15ed6ff1bc21_r.jpg&&&/figure&&ol&&li&Controls/Progress Indicator/Light Indetermined Spinner（控制/进度提示/浅色待定旋转）&/li&&li&Controls/Progress Indicator/Light Indetermined Spinner with Label（控制/进度提示/浅色有标注待定旋转）&/li&&li&Controls/Progress Indicator/Light Progress Bar（控制/进度提示/浅色进度条）&/li&&li&Controls/Progress Indicator/Light Toolbar Progress Indicator（控制/进度提示/浅色工具栏指示器）&/li&&/ol&&h2&Table View Cells（表格视图单元格）&/h2&&p&这里面有大量重复的命名，故列出部分。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b2deacf37734dcb18e848_b.jpg& data-rawwidth=&796& data-rawheight=&1048& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic1.zhimg.com/v2-b2deacf37734dcb18e848_r.jpg&&&/figure&&ol&&li&Controls/TableViewCell/Light Default（控制/表格视图单元格/浅色默认）没错，这些标1的都是一样的名字&/li&&li&Controls/TableViewCell/Light Default + Delete（控制/表格视图单元格/浅色默认+删除）&/li&&li&Controls/TableViewCell/Light Default + Action + Delete（控制/表格视图单元格/浅色默认+功能+删除）&/li&&/ol&&ul&&li&没错，用“+”串联小类。&/li&&/ul&&h2&Section Header and Footer (分段头部和脚注)&/h2&&figure&&img src=&https://pic1.zhimg.com/v2-b9d155ee2dc3e18a74276_b.jpg& data-rawwidth=&796& data-rawheight=&716& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic1.zhimg.com/v2-b9d155ee2dc3e18a74276_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls/Section Headers/Light Grouped Header（控制/分段头/浅色组头部 ，就是分隔+标明下面cells用的）&/li&&li&Controls/Section Headers/Light Grouped Footer（控制/控制/分段头/浅色组脚注，一般是简单的解释）&/li&&/ol&&h2&Sticky Header（粘性头部控件）&/h2&&p&这种头部控件是一段距离内固定置顶的，所以称作Sticky。但是不知道为什么Apple没有在symbol上用这个名称。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-9f299adbfa4cf3ad53ffeb477d29c89f_b.jpg& data-rawwidth=&770& data-rawheight=&1002& class=&origin_image zh-lightbox-thumb& width=&770& data-original=&https://pic1.zhimg.com/v2-9f299adbfa4cf3ad53ffeb477d29c89f_r.jpg&&&/figure&&ol&&li&Controls/Section Headers/Light Default Header（控制/分段头/浅色默认头部）&/li&&/ol&&h2&Section Index（分段索引）&/h2&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-2fb7ef4bd7d359f96aa6cbd3cea088c4_b.jpg& data-rawwidth=&782& data-rawheight=&868& class=&origin_image zh-lightbox-thumb& width=&782& data-original=&https://pic4.zhimg.com/v2-2fb7ef4bd7d359f96aa6cbd3cea088c4_r.jpg&&&/figure&&ol&&li&Controls/Section Headers/Light Section Index（控制/分段头/浅色分段索引）&/li&&/ol&&p&&br&&/p&&p&内容比较庞大（其实感觉还不够全），谢谢大家的耐心。其实日常工作中命名中未必会做到这么严格，但是把它当做一个目标，效果是显著的。&/p&&p&如果可能的话，大家有空一起学英语吧，对设计对工作都有帮助~&/p&&p&鞠躬~&/p&&p&&br&&/p&&blockquote&本文Apple设计文件&br&&a href=&https://link.zhihu.com/?target=https%3A//developer.apple.com/design/resources/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design Resources - Apple Developer&/a&&br&&br&搭配观看 龙爪槐守望者 的专栏&br&&a href=&https://zhuanlan.zhihu.com/c_& class=&internal&&这个控件叫什么&/a&&/blockquote&&p&&/p&
本文基于Apple UI Design Resources-iOS 11 beta (Sketch)在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名较为完整，虽然不是唯一答案，但很有参考价值。本…
&figure&&img src=&https://pic3.zhimg.com/v2-d9aa1f49a85fc_b.jpg& data-rawwidth=&1900& data-rawheight=&1100& class=&origin_image zh-lightbox-thumb& width=&1900& data-original=&https://pic3.zhimg.com/v2-d9aa1f49a85fc_r.jpg&&&/figure&&p&原作者：&a href=&http://link.zhihu.com/?target=https%3A//medium.muz.li/%40shestopalov.v%3Fsource%3Dpost_header_lockup& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Slava Shestopalov&/a&&/p&&p&链接：&a href=&http://link.zhihu.com/?target=https%3A//medium.muz.li/optical-effects-9fca82b4cd9a& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&medium.muz.li/optical-e&/span&&span class=&invisible&&ffects-9fca82b4cd9a&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&来源：Medium&/p&&p&著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
&/p&&p&_______________________________________________________________________________&/p&&p&*译者注：第一次在知乎上发文章，竟然被举报了。本来放在底部的原作者信息及出处按要求放到了顶部。&/p&&p&&br&&/p&&p&
正文之前，两个问题 &/p&&figure&&img src=&https://pic4.zhimg.com/v2-688d9ff616bc81d844f7_b.jpg& data-rawwidth=&640& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-688d9ff616bc81d844f7_r.jpg&&&/figure&&p&
哪个更圆？&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c0c0aa25cdba8a_b.jpg& data-rawwidth=&640& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-c0c0aa25cdba8a_r.jpg&&&/figure&&p&
哪个更方？&/p&&p&&br&&/p&&p&本文作者9月13号在Medium上发表了这篇文章，15号就开始翻译了，一直拖到现在，期间网上已经出现了各种版本，这是另一个完全不权威很随心的版本。&/p&&ul&&li&&b&物理尺寸和视觉感知尺寸&/b&&/li&&li&&b&不同形状的正确布局&/b&&/li&&li&&b&完美的圆角&/b&&/li&&/ul&&p&&br&&/p&&p&&b&1、数学和视觉尺寸&/b&&/p&&p&哪一个尺寸更大？一个400px的正方形或者是一个400像素的圆形。几何学上来说，它们的宽度和高度是一样的。但是观察一下下面的图片，我们的眼睛能立即识别出正方形比圆形更重。顺便说一下，“重量”相关的词语更适合描述视觉效果。 &/p&&figure&&img src=&https://pic1.zhimg.com/v2-7ffaaf71af861e98fbc48_b.jpg& data-rawwidth=&640& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-7ffaaf71af861e98fbc48_r.jpg&&&/figure&&p&以防你不相信我的话，下面是加上参考线和数值的版本。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3ecdd4ae2dfaf60c6ad54db860dcba97_b.jpg& data-rawwidth=&640& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-3ecdd4ae2dfaf60c6ad54db860dcba97_r.jpg&&&/figure&&p&现在让我们再看一张图片，在视觉重量上，它们是一样的么？&/p&&figure&&img src=&https://pic3.zhimg.com/v2-1fb459ebe12_b.jpg& data-rawwidth=&6}
and SQL Application Database&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Hybrid_transactional/analytical_processing_%28HTAP%29& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Hybrid transactional/analytical processing (HTAP)&/a&&/p&&p&&a href=&http://link.zhihu.com/?target=https%3A//www.lullabot.com/articles/nodejs-interactive-north-america-2017-key-takeaways& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Node.js Interactive North America 2017: Key Takeaways&/a&&/p&&p&&br&&/p&&p&(以上日原帖）&/p&&hr&&p&日更新：&/p&&p&收到HarperDB的创始人Stephen Goldberg对本文评论区 &a class=&member_mention& href=&http://www.zhihu.com/people/2ecef563ffed0cb45a418b& data-hash=&2ecef563ffed0cb45a418b& data-hovercard=&p$b$2ecef563ffed0cb45a418b&&@王文武&/a& 同学批语的回复。懒得看英文的跳过引用块中文见。&/p&&blockquote&Rong, &br&&br&Thanks again for posting the article!
We had two downloads, and one contact last night as a result!
I have used google translate to read several of the comments and they seem to be positive for the most part.
&br&&br&I noticed one person suggested Mongodb instead of HarperDB.
MongoDB utilizes multimodel which means that resources must be duplicated in order to search.
MongoDB also doesn't support full ANSI SQL, and it is much larger then 65mb so it cannot run directly on the edge. &br&&br&SG&/blockquote&&p&他昨晚收到（来自中国的）两次下载和一次（电邮）联系。同时他借助Google翻译看了几条评论大体是积极的。（按咱知乎砖头垫拍两用的风格，他应该过两天再回来看看。）&/p&&p&他特别注意到一名读者（是不是拿不准读「王文武」还是「王斌」？）建议用MongoDB而不是HarperDB。他解释说「MongoDB用的是多模型方法，需要重复占用资源才能支持搜索。另外MongoDB不支持全套ANSI SQL，而且远远大于65MB所以没法直接在边缘上运行」。&/p&&p&&br&&/p&&p&&b&更多回答，请看：&a href=&https://www.zhihu.com/people/rong_zhang/answers& class=&internal&&张戎的回答&/a&&/b&&/p&&p&&b&更多文章，请看：&a href=&https://zhuanlan.zhihu.com/hemingke& class=&internal&&数据冰山&/a&&/b&&/p&
（题图照片：2017年10月摄于丹佛共享办公楼SPACES。） 日到6日，Node.js北美互动会在温哥华胜利召开。在这次团结的大会上，谷歌正式成为Node.js基金会的白金会员。此前的白金会员包括微软、IBM、英特尔、红帽和三星旗下的Joyent。这个Node.js是…
&figure&&img src=&https://pic1.zhimg.com/v2-fdaf98f59edc981e02ca522d0a135432_b.jpg& data-rawwidth=&1000& data-rawheight=&501& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic1.zhimg.com/v2-fdaf98f59edc981e02ca522d0a135432_r.jpg&&&/figure&&blockquote&简评：使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。&/blockquote&&h2&不同类型的图片 placehold&/h2&&figure&&img src=&https://pic3.zhimg.com/v2-5ee5c4bffe40d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&819& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic3.zhimg.com/v2-5ee5c4bffe40d_r.jpg&&&/figure&&p&对于图片占位符，通常我们会使用以下几种处理方式。&/p&&ul&&li&保持图像为空：这样可以保证内容不会出现跳动。&/li&&li&默认占位符：比如说用户想要查看个人资料显示头像内容，如果请求失败或者没有上传过图片，那么通常会使用默认占位符（这种占位符一般会使用 SVG 资源）。&/li&&li&纯色：从图像中获取颜色，并作为背景颜色。图片在过度是时候回显得比较平滑（&a href=&http://link.zhihu.com/?target=https%3A//www.pinterest.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&pinterest&/a& 就是使用这种方式）。&/li&&li&模糊的图像：这种方式会获取原图的缩略图并对其进行渲染，等图片加载完成再过度到原图。&/li&&/ul&&p&以上是我们比较常见的处理图片 placehold 的方法。还有另外一种方式是使用 SVG。&/p&&h2&基于 SVG 的 placehold&/h2&&p&SVG 是矢量图像的理想选择，但是大部分情况是需要显示位图，我们需要考虑的是如何将位图转换成矢量图，下面提供几种转换方案。&/p&&ol&&li&使用矢量绘制原图的轮廓，具体代码可以参考 &a href=&http://link.zhihu.com/?target=https%3A//codepen.io/jmperez/pen/oogqdp& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&demo&/a&。&/li&&/ol&&figure&&img src=&https://pic1.zhimg.com/v2-bfe912fcf8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&345& data-rawheight=&380& data-thumbnail=&https://pic1.zhimg.com/v2-bfe912fcf8_b.jpg& class=&content_image& width=&345&&&/figure&&p&2. 将原图转换为色块图，具体代码可以参考 &a href=&http://link.zhihu.com/?target=https%3A//codepen.io/jmperez/pen/BmaWmQ& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&demo&/a&。&/p&&a class=&video-box& href=&http://link.zhihu.com/?target=https%3A//www.zhihu.com/video/924992& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic1.zhimg.com/80/v2-692a4f01dafa_b.jpg& data-lens-id=&924992&&
&img class=&thumbnail& src=&https://pic1.zhimg.com/80/v2-692a4f01dafa_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/924992&/span&
&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/fogleman/primitive& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Primitive&/a&&/li&&/ul&&p&这里推荐 &a href=&http://link.zhihu.com/?target=https%3A//github.com/fogleman/primitive& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Primitive&/a& 这个库，这个库可以将位图生成矢量图，我们来看看效果。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-5fccf34e2c3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1642& data-rawheight=&1192& class=&origin_image zh-lightbox-thumb& width=&1642& data-original=&https://pic4.zhimg.com/v2-5fccf34e2c3_r.jpg&&&/figure&&p&上图分别使用不同数量的形状来绘制原图。使用矢量图作为 placehold 有一个很好的优点是小，例如上图 10 个图形的矢量图仅仅只占了 1030 个字节，当通过 SVGO 来传输时，代码还能减少到 640 个字节。&/p&&div class=&highlight&&&pre&&code class=&language-abap&&&span&&/span&&span class=&o&&&&/span&&span class=&nv&&svg&/span& &span class=&nv&&xmlns&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&http&/span&&span class=&p&&://&/span&&span class=&nv&&www&/span&&span class=&p&&.&/span&&span class=&nv&&w3&/span&&span class=&p&&.&/span&&span class=&nv&&org&/span&&span class=&p&&/&/span&&span class=&mi&&2000&/span&&span class=&p&&/&/span&&span class=&nv&&svg&/span&&span class=&err&&”&/span&&span class=&nv&&width&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&mi&&1024&/span&&span class=&err&&”&/span&&span class=&nv&&height&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&mi&&1024&/span&&span class=&err&&”&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&817&/span&&span class=&nv&&c70&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M0&/span& &span class=&mi&&0&/span&&span class=&nv&&hz&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&g&/span& &span class=&nv&&fill&/span&&span class=&o&&-&/span& &span class=&nv&&opacity&/span& &span class=&o&&=&/span&&span class=&err&&“。&/span&&span class=&mi&&502&/span&&span class=&err&&”&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&03020&/span&&span class=&nv&&f&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M178&/span& &span class=&mi&&994&/span&&span class=&nv&&l580&/span& &span class=&mi&&92&/span&&span class=&nv&&L402&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&nv&&f2e2ba&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M638&/span& &span class=&mi&&894&/span&&span class=&nv&&L614&/span& &span class=&mi&&6&/span&&span class=&nv&&l472&/span& &span class=&mi&&440&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span& &span class=&nv&&fff8be&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span& &span class=&mi&&854&/span&&span class=&nv&&h300L138&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&err&&路径填充&/span&&span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&mi&&76&/span&&span class=&nv&&c2d9&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M410&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span&&span class=&nv&&L154&/span& &span class=&mi&&530&/span&&span class=&o&&-&/span&&span class=&mi&&62&/span& &span class=&mi&&38&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&err&&路径填充&/span&&span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&mi&&62&/span&&span class=&nv&&b4cf&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M1086&/span&&span class=&o&&-&/span&&span class=&mi&&2&/span&&span class=&nv&&L498&/span&&span class=&o&&-&/span& &span class=&mi&&305148&/span& &span class=&mi&&508&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&mi&&010412&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M430&/span&&span class=&o&&-&/span&&span class=&mi&&2&/span&&span class=&nv&&l196&/span& &span class=&mi&&52&/span&&span class=&o&&-&/span&&span class=&mi&&76&/span& &span class=&mi&&356&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&”＃&/span&&span class=&nv&&eb7d3f&/span&&span class=&err&&“&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&”&/span&&span class=&nv&&M598&/span& &span class=&mi&&594&/span&&span class=&nv&&l488&/span&&span class=&o&&-&/span&&span class=&mi&&32&/span&&span class=&o&&-&/span&&span class=&mi&&308&/span& &span class=&mi&&520&/span&&span class=&err&&“&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&080&/span&&span class=&nv&&a18&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M198&/span& &span class=&mi&&418&/span&&span class=&nv&&l32&/span& &span class=&mi&&304&/span& &span class=&mi&&116&/span&&span class=&o&&-&/span&&span class=&mi&&448&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&mi&&3&/span&&span class=&nv&&f201d&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span&&span class=&err&&“&/span&&span class=&nv&&M1086&/span& &span class=&mi&&1062&/span&&span class=&nv&&l&/span&&span class=&o&&-&/span&&span class=&mi&&344&/span&&span class=&o&&-&/span&&span class=&mi&&52&/span& &span class=&mi&&248&/span&&span class=&o&&-&/span&&span class=&mi&&148&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&nv&&path&/span& &span class=&nv&&fill&/span& &span class=&o&&=&/span&&span class=&err&&“＃&/span&&span class=&nv&&ebd29f&/span&&span class=&err&&”&/span&&span class=&nv&&d&/span& &span class=&o&&=&/span& &span class=&err&&“&/span&&span class=&nv&&M630&/span& &span class=&mi&&658&/span&&span class=&nv&&l&/span&&span class=&o&&-&/span&&span class=&mi&&60&/span&&span class=&o&&-&/span&&span class=&mi&&372&/span& &span class=&mi&&516&/span& &span class=&mi&&320&/span&&span class=&err&&”&/span&&span class=&p&&/&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&p&&/&/span& &span class=&nv&&g&/span&&span class=&o&&&&/span& &span class=&o&&&&/span&&span class=&p&&/&/span& &span class=&nv&&svg&/span&&span class=&o&&&&/span&
&/code&&/pre&&/div&&p&要达到满意的效我们就必须使用更多的图形来绘制它，如果用 100 个图形来绘制位图，生成的 SVG 大概有 8kB（SVGO 大概 5KB）。随着图形数量的增加，大小也会随之增加。&/p&&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/technopagan/sqip& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SQIP&/a&&/li&&/ul&&p&这是一种折中处理方式，我们可以理解为 Primitive 和高斯模糊的简单叠加，这种方式我可以使用少量的图形块就能达到我们满意的效果。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-7cd39bb484f869b9e5b815a00c741860_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1666& data-rawheight=&888& class=&origin_image zh-lightbox-thumb& width=&1666& data-original=&https://pic1.zhimg.com/v2-7cd39bb484f869b9e5b815a00c741860_r.jpg&&&/figure&&p&上图输出的 SVG 大小为 900 字节。&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&svg xmlns =“ http://www.w3.org/2000/svg ”viewBox =“0 0 ”& &filter id =“b”& &feGaussianBlur stdDeviation =“12”/& &/ filter& &路径填充=“＃817c70”d =“M0 0hz”/& &g filter =“ url（#b）“transform =”translate（4 4）scale（7.8125）“fill-opacity =”。5“& &ellipse fill =”＃000210“rx =”1“ry =”1“transform =”matrix（50.41 11.886 107 194.6）“/& &ellipse fill =”＃eee3bb“rx =”1“ry =”1“transform =”matrix（-56. -24.484 205 110.1）“/& &ellipse fill =”＃fff4bd “rx =”1“ry =”1“transform =”matrix（35.419 14.37 16.4 123.6）“/& &ellipse fill =”＃79c7db“cx =”21“cy =”39“rx =”65“ ry =“65”/& &ellipse fill =“＃0c1320”cx =“117”cy =“38”rx =“34”ry =“47”/& &ellipse fill =“＃5cb0cd”rx =“1” ry =“1”transform =“矩阵（-39.76 -54.553 219.2 7.9）“/& &path fill =”＃e57339“d =”M271 159l-123-16 43 128z“/& &ellipse fill =”＃47332f“cx =”214“ cy =“237”rx =“242”ry =“19”/& &/ g& &/ svg&
&/code&&/pre&&/div&&ul&&li&剪影&/li&&/ul&&p&&a href=&http://link.zhihu.com/?target=https%3A//twitter.com/mikaelainalem& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Mikael Ainalem&/a& 分享了一个 &a href=&http://link.zhihu.com/?target=https%3A//codepen.io/ainalem/full/aLKxjm/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&codepen&/a&，使用双色轮廓作为 placehold，结果效果非常好：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-c1eee94d443db2c75943c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&800& data-rawheight=&531& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic1.zhimg.com/v2-c1eee94d443db2c75943c_r.jpg&&&/figure&&p&上面这种 SVG 是通过手绘得到的，不过我们也可以使用自动化工具自动生成。&/p&&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/tooolbox/node-potrace& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&node-potrace&/a& （js）可以将原图转换成矢量图。&/li&&/ul&&figure&&img src=&https://pic3.zhimg.com/v2-a3af32a4e2ae39be2beabee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&593& data-rawheight=&316& class=&origin_image zh-lightbox-thumb& width=&593& data-original=&https://pic3.zhimg.com/v2-a3af32a4e2ae39be2beabee_r.jpg&&&/figure&&ul&&li&&a href=&http://link.zhihu.com/?target=https%3A//craftcms.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Craft 3 CMS&/a& 也添加了对剪影的支持 —— &a href=&http://link.zhihu.com/?target=https%3A//github.com/nystudio107/craft3-imageoptimize/blob/master/src/lib/Potracio.php& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Potracio&/a& （php）。&/li&&li&&a href=&http://link.zhihu.com/?target=https%3A//github.com/EmilTholin/image-trace-loader& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&image-trace-loader&/a& 可以追踪图片资源，然后导入生成的 img/svg+xml URL&/li&&/ul&&blockquote&原文：&a href=&http://link.zhihu.com/?target=https%3A//medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How to use SVG as a Placeholder, and Other Image Loading Techniques&/a&&br&&br&推荐阅读：&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&前端开发备忘录（合集）&/a&&/blockquote&&p&欢迎关注：知乎专栏「&a href=&https://zhuanlan.zhihu.com/jiguang-daily& class=&internal&&极光日报&/a&」，每天为 Makers 导读三篇优质英文文章。&/p&
简评：使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。不同类型的图片 placehold对于图片占位符，通常我们会使用以下几种处理方式。保持图像为空：这样可以保证内容不会出现跳动。默认占位符：比如说用户想要查看个人资料显示头像内容…
&figure&&img src=&https://pic1.zhimg.com/v2-f3f42a6e01ba5cb178a2_b.jpg& data-rawwidth=&700& data-rawheight=&700& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic1.zhimg.com/v2-f3f42a6e01ba5cb178a2_r.jpg&&&/figure&&p&&b&伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？&/b&&/p&&p&&i&伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起来也很方便，善于使用伪元素可以让你的页面更加地简洁优雅。之所以叫伪元素，是因为他修饰不在文档树中的部分；不是真实存在的；&/i&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-bfc2cc6a05e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1242& data-rawheight=&394& class=&origin_image zh-lightbox-thumb& width=&1242& data-original=&https://pic3.zhimg.com/v2-bfc2cc6a05e_r.jpg&&&/figure&&p&伪元素实用小技巧 &/p&&figure&&img src=&https://pic1.zhimg.com/v2-ee_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&991& data-rawheight=&510& class=&origin_image zh-lightbox-thumb& width=&991& data-original=&https://pic1.zhimg.com/v2-ee_r.jpg&&&/figure&&h2&1.清除浮动&/h2&&p&何谓清除浮动—？一个父元素的所有子元素如果都是浮动的，那么这个父元素是没有高度的;父元素并没有脱离正常的文档流，仍然占据正常文档流的空间; & 1. 如果这个父元素的相邻元素是行内元素，那么这个行内元素将会在这个父元素的区域内见缝插针，找到一块放得下它的地方 & 2. 如果相邻的元素是一个块级元素，那么设置这个块级元素的margin-top将会以这个父元素的起始位置作为起点。&/p&&p&问题：如何解决高度塌陷？&/p&&p&方法：把父容器的高度撑起来，考虑到浮动了的元素并没有脱离正常文档流，而其它元素会围绕着它环绕，所以清除浮动简单有效的办法就是让环绕的元素不可环绕，把它变成一把尺子，放在最后面，把所有浮动的元素顶起来，而这把尺子就是一个设置了clear的块级元素。因为块级元素会换行，并且设置它两边不能跟着浮动的元素，所以它就跑到浮动元素的下面去，就像一把尺子把浮动元素的内容给顶起来了。而这个可以用一个after实现，因为after就是最后一个子元素：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&.clearfix:after{
content: &&;
&/code&&/pre&&/div&&h2&2.画分割线&/h2&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e28c310fbfcd99bb45e4b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&453& data-rawheight=&67& class=&origin_image zh-lightbox-thumb& width=&453& data-original=&https://pic4.zhimg.com/v2-e28c310fbfcd99bb45e4b_r.jpg&&&/figure&&p&&br&&/p&&p&&i&在开发中如果我们遇到类似这样的需求我们？我们应该如何只用一个简单的css元素去实现他？&/i&&/p&&p&&b&方案：一个p标签,左右两条线用before和after画出来：&/b&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b259be08837bec7dc0dc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1139& data-rawheight=&429& class=&origin_image zh-lightbox-thumb& width=&1139& data-original=&https://pic1.zhimg.com/v2-b259be08837bec7dc0dc_r.jpg&&&/figure&&h2&3.计数器&/h2&&p&&i&动态的计算商品的数量，我们经常会借用js来实现；我想告诉css也能实现这个效果，他比js用起来简单多了&/i&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-180b5cad3b3dbdc001ef5d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&426& data-rawheight=&84& class=&origin_image zh-lightbox-thumb& width=&426& data-original=&https://pic2.zhimg.com/v2-180b5cad3b3dbdc001ef5d_r.jpg&&&/figure&&p&&br&&/p&&blockquote&1.counter-reset: 属性创建或者重置一个或多个计数器；&br&2.counter-increment: 属性递增一个或多个计数器值；&br&3.content: 与:before 及:after 伪元素配合使用，来插入生成内容。&/blockquote&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-34a6d811f06d30f15e2a26ef125ff4a4_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&925& data-rawheight=&413& class=&origin_image zh-lightbox-thumb& width=&925& data-original=&https://pic1.zhimg.com/v2-34a6d811f06d30f15e2a26ef125ff4a4_r.jpg&&&/figure&&p&&br&&/p&&p&没有用到一行js代码，你可以试一试;这个主要是结合:checked和counter，用before/after纯CSS实现的，这种纯粹是炫技；&/p&&h2&4.平行四边形&/h2&&p&&i&有没有办法只让容器的形状倾斜而保持其内容不变呢？或许你会想到嵌套两层元素，外层skew（）,对内容在应用一次反相skew变形，从而抵消变形的效果。但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘&/i&&/p&&p&解决方案：&b&伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面&/b&&/p&&p&光说不练，假把式&b&&a href=&http://link.zhihu.com/?target=http%3A//dabblet.com/gist/f2d9b238aa9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&试一试&/a&&/b&&/p&&h2&5. 梯形标签页&/h2&&p&&i&在网页中我们经常见到梯形形状的标签页，常见的技巧都是比较杂乱，或者说难以维护的，那他们是如何实现的呢？&/i&&/p&&p&解决方案： &b&三维世界中旋转一个矩形，由于透视关系，我们在二维图像上看到一个梯形，再结合平行四边实现的方法便能实现&/b&&/p&&blockquote&perspective: 观察者与z=0平面的距离;&/blockquote&&p&对元素使用了3D变形之后，其内部的变形效应是&不可逆转的&，和2D变形不同（2D变形内部的逆向变形可以抵消外部的变形效应）；&/p&&p&为了让他的尺寸更好掌握，我们可以为他指定transform-origin：也可用scale()对他在进行美观操作；&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-d3d01a3340cdd32486e9afa38b6e03f9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&776& data-rawheight=&365& class=&origin_image zh-lightbox-thumb& width=&776& data-original=&https://pic2.zhimg.com/v2-d3d01a3340cdd32486e9afa38b6e03f9_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-2ece7db5cde9be5e3f6f16f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&686& data-rawheight=&89& class=&origin_image zh-lightbox-thumb& width=&686& data-original=&https://pic4.zhimg.com/v2-2ece7db5cde9be5e3f6f16f_r.jpg&&&/figure&&p&&br&&/p&&p&&b&&a href=&http://link.zhihu.com/?target=http%3A//dabblet.com/gist/dc8e794502& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&试一试&/a&&/b&&/p&&h2&6 多列均匀布局&/h2&&p&如何实现下列这种多列均匀布局：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-ccc8ab00ad5e2b642f2a1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&468& data-rawheight=&141& class=&origin_image zh-lightbox-thumb& width=&468& data-original=&https://pic2.zhimg.com/v2-ccc8ab00ad5e2b642f2a1_r.jpg&&&/figure&&p&&br&&/p&&p&通过给伪元素 :after 设置 inline-block 设置宽度 100% ，配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。&/p&&p&那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？&/p&&p&原因在于 justify 只有在存在第二行的情况下，第一行才两端对齐，所以在这里，我们需要制造一个假的第二行，而 :after 伪元素正好再适合不过。 &/p&&figure&&img src=&https://pic2.zhimg.com/v2-d145ec834fb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&436& data-rawheight=&474& class=&origin_image zh-lightbox-thumb& width=&436& data-original=&https://pic2.zhimg.com/v2-d145ec834fb_r.jpg&&&/figure&&p&&br&&/p&&p&&b&需要注意的是img/input等单标签是没有before/after伪元素的，因为它们本身是不可以有子元素，如果你给img添加一个before，那么会被浏览器忽略。&/b&&/p&&p&伪元素能实现的功能很多！欢迎大家在评论底下一一补充&/p&
伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；利用伪元素，我们可以简化页面的html标签，同时用起…
&figure&&img src=&https://pic4.zhimg.com/v2-e7eebef2e_b.jpg& data-rawwidth=&378& data-rawheight=&298& class=&content_image& width=&378&&&/figure&&blockquote&之前一直在博客园写作，最近几天才开的知乎专栏，这段时间我会每天从博客园搬运一篇博客到知乎上来。才疏学浅， 谬误之处请不吝于评论区指教，谢谢大家。我的博客园博客地址： &a href=&https://link.zhihu.com/?target=http%3A//www.cnblogs.com/penghuwan/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&外婆的彭湖湾 - 博客园&/a&&/blockquote&&p&&br&&/p&&p&文章目录&/p&&ul&&li&&i&单行文本溢出的省略&/i&&/li&&li&&i&从单行文本溢出省略到多行文本溢出省略&/i&&/li&&li&&i&多行文本溢出的省略（...）方案一 ---简单方便的解决方案&/i&&/li&&li&&i&多行文本溢出的省略（...）方案二 ---简单粗暴的解决方案&/i&&/li&&li&&i&多行文本溢出的省略（...）方案三 --简洁优雅的解决方案&/i&&/li&&/ul&&p&&br&&/p&&p&写前端UI的朋友们也许都遇到过这样的问题：我们需要实现这样一个需求，在一个父级元素中隐藏一个可能过长的文本&/p&&p&&br&&/p&&p&&i&这个文本可能是单行的：&/i&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a8c3d23b4fd8e_b.jpg& data-caption=&& data-rawwidth=&530& data-rawheight=&330& class=&origin_image zh-lightbox-thumb& width=&530& data-original=&https://pic1.zhimg.com/v2-a8c3d23b4fd8e_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&i&也可能是多行的：&/i&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-de051dd5e0_b.jpg& data-caption=&& data-rawwidth=&412& data-rawheight=&150& class=&content_image& width=&412&&&/figure&&p&&br&&/p&&p&下面我就给大家展示如何简单或优雅地实现这种需求&/p&&p&&br&&/p&&blockquote&&b&单行文本溢出的省略&/b&&/blockquote&&p&&br&&/p&&p&先上代码&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&style &/span&&span class=&o&&=&/span&
&span class=&s&&'width:400&/span&
&span class=&s&&
height:40&/span&
&span class=&s&&
border:1'&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&
&span class=&s&&'overflow:&/span&
&span class=&s&&
text-overflow:&/span&
&span class=&s&&
white-space:'&/span&&span class=&p&&&&/span&
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&demo:&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b1a054cb7ba80affaa8ff11_b.jpg& data-caption=&& data-rawwidth=&904& data-rawheight=&166& class=&origin_image zh-lightbox-thumb& width=&904& data-original=&https://pic1.zhimg.com/v2-b1a054cb7ba80affaa8ff11_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&&i&关于overflow: hidden&/i&&/b&&/p&&p&这里我们需要注意到一点：这里的overflow并不是设置为父级元素div的属性，而是p标签的属性，需要和overflow的普通用法区分开来&/p&&ol&&li&overflow：hidden的普通用法：用在块级元素（例如div）的外层隐藏内部溢出元素&/li&&li&overflow: hidden的特殊用法：在上述例子中配合text-overflow:white-space:实现p元素隐藏自身的溢出并设置（...）的效果&/li&&/ol&&p&&br&&/p&&p&&b&&i&关于text-overflow:&/i&&/b&&/p&&p&这一属性依赖于overflow: hidden存在，只有设置了overflow:hidden它才是能够生效的，你可以把它看作overflow对于文本溢出隐藏的一种‘特殊样式’&/p&&p&&br&&/p&&p&&b&&i&关于white-space: nowrap&/i&&/b&&/p&&p&它的作用是让文本不换行，这是overflow:hidden和text-overflow：ellipsis生效的基础！没有它overflow:hidden和text-overflow：ellipsis无法生效！（在单行文本溢出省略这一案例中）&/p&&p&&br&&/p&&blockquote&&b&从单行文本溢出省略到多行文本溢出省略&/b&&/blockquote&&p&许多同学可能会这样想：怎么实现多行文本省略呢？不是只要把white-space:nowrap去掉就可以了吗？( _(:3 」∠)_ 要是这么简单就好了...)&/p&&p&实践出真知，让我们来试一下，&b&去掉CSS样式中的white-space:nowrap&/b&&/p&&p&&br&&/p&&p&demo：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aae7acb0933dca_b.jpg& data-caption=&& data-rawwidth=&930& data-rawheight=&282& class=&origin_image zh-lightbox-thumb& width=&930& data-original=&https://pic1.zhimg.com/v2-aae7acb0933dca_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&这次，没能隐藏成功，那如果我们overflow:hidden是设在父级元素div中呢？&/p&&p&得到demo:&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f9a4f49a14845fcecc753d1_b.jpg& data-caption=&& data-rawwidth=&914& data-rawheight=&274& class=&origin_image zh-lightbox-thumb& width=&914& data-original=&https://pic3.zhimg.com/v2-f9a4f49a14845fcecc753d1_r.jpg&&&/figure&&p&&br&&/p&&p&隐藏成功了，&b&可你仍然看不到你想看到的那三个点&/b&&/p&&p&&br&&/p&&p&妥妥地失败了，嗯，没错,所以对于多行文本溢出的省略我们需要另辟蹊径了&/p&&p&&br&&/p&&blockquote&&b&多行文本溢出的省略（...）方案一 ---简单方便的解决方案&/b&&/blockquote&&p&&br&&/p&&p&我们可以借助&b&webkit的CSS扩展属性&/b&实现这一点：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&style &/span&&span class=&o&&=&/span&
&span class=&s&&'width:400&/span&
&span class=&s&&
height:70&/span&
&span class=&s&&
border:1'&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&style&/span&&span class=&o&&=&/span&
&span class=&s&&'display: -webkit-//对象作为弹性伸缩盒子模型显示 &/span&
&span class=&s&&
-webkit-box-orient://设置或检索伸缩盒对象的子元素的排列方式 &/span&
&span class=&s&&
-webkit-line-clamp: 2;//溢出省略的界限&/span&
&span class=&s&&
overflow:'&/span&&span class=&err&&//设置隐藏溢出元素&/span&
&span class=&p&&&&/span&
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&demo:&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-b05e1ed5b747dcb9fcf3542_b.jpg& data-caption=&& data-rawwidth=&826& data-rawheight=&190& class=&origin_image zh-lightbox-thumb& width=&826& data-original=&https://pic2.zhimg.com/v2-b05e1ed5b747dcb9fcf3542_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&【注意】&/p&&ol&&li&四行CSS缺一不可！&/li&&li&因为这是webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器：chrome/safari/QQ浏览器/360/猎豹等以及绝大多数的移动端浏览器&/li&&/ol&&p&&br&&/p&&blockquote&&b&多行文本溢出的省略（...）方案二 ---简单粗暴的解决方案&/b&&/blockquote&&p&&br&&/p&&p&&b&方案一固然最为简单，但其还存在着跨浏览器兼容的问题&/b&，于是人民群众们提出了一种简单粗暴的方式去实现通用的解决方案：给div固定高和宽，同时采用相对定位，与此同时对在div内放一个&p&...&/p&对其使用绝对定位，定在右下角，同时设其背景颜色为白色就可以了：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&style &/span&&span class=&o&&=&/span&
&span class=&s&&'position:&/span&
&span class=&s&&
width:400&/span&
&span class=&s&&
height:45&/span&
&span class=&s&&
border:1&/span&
&span class=&s&&
overflow:'&/span&&span class=&p&&&&/span&
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
&span class=&p&&&&/span&&span class=&nt&&p&/span& &span class=&na&&style &/span&&span class=&o&&=&/span& &span class=&s&&'position:right:0;bottom:6margin:0;background:white'&/span&&span class=&p&&&&/span&...&span class=&p&&&/&/span&&span class=&nt&&p&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&demo:&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-3cde1d1fe04dcf4d4d79b69a3cca185d_b.jpg& data-caption=&& data-rawwidth=&834& data-rawheight=&156& class=&origin_image zh-lightbox-thumb& width=&834& data-original=&https://pic2.zhimg.com/v2-3cde1d1fe04dcf4d4d79b69a3cca185d_r.jpg&&&/figure&&p&&br&&/p&&p&但方案二也有一些问题&/p&&p&1在文本没有溢出父级元素时也同样显示省略号：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2c6cf32decbe8bc9adbd3aa_b.jpg& data-caption=&& data-rawwidth=&886& data-rawheight=&196& class=&origin_image zh-lightbox-thumb& width=&886& data-original=&https://pic3.zhimg.com/v2-2c6cf32decbe8bc9adbd3aa_r.jpg&&&/figure&&p&&br&&/p&&p&2末尾处文本可能有被“裁剪”的副效果：&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-cec3af63b50e574b05522_b.jpg& data-caption=&& data-rawwidth=&936& data-rawheight=&214& class=&origin_image zh-lightbox-thumb& width=&936& data-original=&https://pic4.zhimg.com/v2-cec3af63b50e574b05522_r.jpg&&&/figure&&p&&br&&/p&&blockquote&&b&多行文本溢出的省略（...）方案三 --简洁优雅的解决方案&/b&&/blockquote&&p&&br&&/p&&p&那么有没有更加优雅的解决方案，在没有溢出的时候不显示省略号（...），在溢出的时候隐藏并显示省略号呢？答案是有的！先看看我们最终实现的demo:&/p&&p&&br&&/p&&p&在文本没有溢出父级元素时：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8b4cf126e5ae49a5be4e0_b.jpg& data-caption=&& data-rawwidth=&468& data-rawheight=&202& class=&origin_image zh-lightbox-thumb& width=&468& data-original=&https://pic1.zhimg.com/v2-8b4cf126e5ae49a5be4e0_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&文本溢出父级元素时：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fb246f02dbdef698f5847cbfc02dab05_b.jpg& data-caption=&& data-rawwidth=&460& data-rawheight=&196& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&https://pic1.zhimg.com/v2-fb246f02dbdef698f5847cbfc02dab05_r.jpg&&&/figure&&p&&br&&/p&&p&下面是HTML和JS代码：&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&id&/span&&span class=&o&&=&/span&&span class=&s&&'view'&/span&
&span class=&na&&style&/span&&span class=&o&&=&/span&&span class=&s&&'border:1&/span&
&span class=&s&&
width:200&/span&
&span class=&s&&
height:70&/span&
&span class=&s&&
overflow:auto'&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&JS代码&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&s&/span& &span class=&o&&=&/span& &span class=&s1&&'这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本'&/span&
&span class=&nx&&el&/span& &span class=&o&&=&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&getElementById&/span&&span class=&p&&(&/span&&span class=&s1&&'view'&/span&&span class=&p&&);&/span&
&span class=&nx&&n&/span& &span class=&o&&=&/span& &span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&offsetHeight&/span&&span class=&p&&;&/span&
&span class=&k&&for&/span&&span class=&p&&(&/span&&span class=&nx&&i&/span&&span class=&o&&=&/span&&span class=&mi&&0&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span&&span class=&o&&&&/span&&span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span&&span class=&p&&;&/span& &span class=&nx&&i&/span&&span class=&o&&++&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&p&&);&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&nx&&n&/span& &span class=&o&&&&/span& &span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&scrollHeight&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&style&/span&&span class=&p&&.&/span&&span class=&nx&&overflow&/span& &span class=&o&&=&/span& &span class=&s1&&'hidden'&/span&&span class=&p&&;&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&o&&-&/span&&span class=&mi&&3&/span&&span class=&p&&)&/span& &span class=&o&&+&/span& &span class=&s1&&'...'&/span&&span class=&p&&;&/span&
&span class=&k&&break&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&首先我们需要弄清楚offsetHeight和scrollHeight所表示的高度：&/p&&p&&br&&/p&&p&1溢出显示滚动条时：&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ee9d52e97c4eb8ccdf2a8_b.jpg& data-caption=&& data-rawwidth=&640& data-rawheight=&650& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-ee9d52e97c4eb8ccdf2a8_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&2没有溢出时：&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-41b0b04f3de9ac1a3a1ac3_b.jpg& data-caption=&& data-rawwidth=&768& data-rawheight=&326& class=&origin_image zh-lightbox-thumb& width=&768& data-original=&https://pic1.zhimg.com/v2-41b0b04f3de9ac1a3a1ac3_r.jpg&&&/figure&&p&&br&&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&el&/span& &span class=&o&&=&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&getElementById&/span&&span class=&p&&(&/span&&span class=&s1&&'view'&/span&&span class=&p&&);&/span&
&span class=&nx&&n&/span& &span class=&o&&=&/span& &span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&offsetHeight&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&表示的是取到当前包裹文本的父级元素的高度&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&p&&);&/span&
&/code&&/pre&&/div&&p&表示在for循环中取出长度递增的文段，例如：&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&'这' --& '这是' --& '这是一'
&/code&&/pre&&/div&&p&当n & el.scrollHeight也就是 当前文本高度&滚动条内的内容的高度，代表着刚好达到溢出的界限，此时执行if内的语句&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&style&/span&&span class=&p&&.&/span&&span class=&nx&&overflow&/span& &span class=&o&&=&/span& &span class=&s1&&'hidden'&/span&&span class=&p&&;&/span&
&span class=&nx&&el&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&s&/span&&span class=&p&&.&/span&&span class=&nx&&substr&/span&&span class=&p&&(&/span&&span class=&mi&&0&/span&&span class=&p&&,&/span& &span class=&nx&&i&/span&&span class=&o&&-&/span&&span class=&mi&&3&/span&&span class=&p&&)&/span& &span class=&o&&+&/span& &span class=&s1&&'...'&/span&&span class=&p&&;&/span&
&span class=&k&&break&/span&&span class=&p&&;&/span&
&/code&&/pre&&/div&&p&将父级元素view的overflow设置为hidden，并且将末尾的三个文字用...取代，同时跳出for循环&/p&&p&&br&&/p&&p&perfect!
这样我们就实现了优雅的解决方案&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0aaa8e5e39faced1683b44c_b.jpg& data-caption=&& data-rawwidth=&1626& data-rawheight=&1508& class=&origin_image zh-lightbox-thumb& width=&1626& data-original=&https://pic4.zhimg.com/v2-0aaa8e5e39faced1683b44c_r.jpg&&&/figure&&p&&/p&
之前一直在博客园写作，最近几天才开的知乎专栏，这段时间我会每天从博客园搬运一篇博客到知乎上来。才疏学浅， 谬误之处请不吝于评论区指教，谢谢大家。我的博客园博客地址：
文章目录单行文本溢出的省略从单行文本溢出省略到多行文…
&figure&&img src=&https://pic2.zhimg.com/v2-e69af734e1b2d1f4aafa5_b.jpg& data-caption=&& data-rawwidth=&394& data-rawheight=&357& class=&content_image& width=&394&&&/figure&&p&所有的事件都会走一遍这个流程。&/p&&blockquote&事件委托(代理)，这个地方一直不是特别明白，为什么可以在父元素上面安装addEventListener就可以监视管理它的子元素?&/blockquote&&p&如果点击了 (text) 那么在 div、body、……绑定的事件都会执行，除非有一个事件阻止了事件冒泡。&/p&&p&因此我们可以给父元素绑定一个事件，这样子元素的事件就会&b&冒泡&/b&到父元素。&/p&&p&----------------&/p&&p&当事件捕获和事件冒泡一起存在的情况，事件又是如何触发呢。这里记被点击的DOM节点为target节点&/p&&ol&&li&document 往 target节点，捕获前进，遇到注册的捕获事件立即触发执行&/li&&li&到达target节点，触发事件（对于target节点上，是先捕获还是先冒泡则捕获事件和冒泡事件的注册顺序，先注册先执行）&/li&&li&target节点 往 document 方向，冒泡前进，遇到注册的冒泡事件立即触发&/li&&/ol&&h2&总结下就是:&/h2&&ul&&li&对于非target节点则先执行捕获在执行冒泡&/li&&li&对于target节点则是先执行先注册的事件，无论冒泡还是捕获&/li&&/ul&
所有的事件都会走一遍这个流程。事件委托(代理)，这个地方一直不是特别明白，为什么可以在父元素上面安装addEventListener就可以监视管理它的子元素?如果点击了 (text) 那么在 div、body、……绑定的事件都会执行，除非有一个事件阻止了事件冒泡。因此我们…
&figure&&img src=&https://pic1.zhimg.com/v2-4ea3fefcdec72f_b.jpg& data-rawwidth=&910& data-rawheight=&276& class=&origin_image zh-lightbox-thumb& width=&910& data-original=&https://pic1.zhimg.com/v2-4ea3fefcdec72f_r.jpg&&&/figure&&blockquote&本文基于Apple UI Design Resources-iOS 11 beta (Sketch)&/blockquote&&p&在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名较为完整，&b&虽然不是唯一答案&/b&，但很有参考价值。本文是系列第2篇，整理补充了一下思路，谢谢大家对我第1篇的的支持~&/p&&blockquote&第1篇的链接在此：&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&图层英文怎么写？来看看Apple官方写法(Bars篇)&/a&&/blockquote&&h2&&b&命名规则&/b&&/h2&&p&&b&1.顺序为大类/中类/小类+属性、状态描述（非必须，看情况），使用symbol&/b&&/p&&p&Sketch的Symbol会识别&/&进行归类，这个很多人都知道。特别是大型的UiKit，尤其需要这种系统的分类方法。而且，Sketch要正式推出的Libraries，其实也是基于Symbol进行协作哦，所以分类更能提高效率。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-62f34bcfce0dd_b.jpg& data-rawwidth=&946& data-rawheight=&164& class=&origin_image zh-lightbox-thumb& width=&946& data-original=&https://pic1.zhimg.com/v2-62f34bcfce0dd_r.jpg&&&/figure&&p&&br&&/p&&p&&b&Controls(控制器)&/b&&/p&&p&控制器包括以下组件（类名），有些是查找的翻译，有些是我自己试着翻译的。如有错误，希望大家多多指正，我会及时修改的。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-18f91f88e5a64b457cdfb5e_b.jpg& data-rawwidth=&484& data-rawheight=&378& class=&origin_image zh-lightbox-thumb& width=&484& data-original=&https://pic4.zhimg.com/v2-18f91f88e5a64b457cdfb5e_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&大类&/b&：Controls&/li&&/ul&&p&&br&&/p&&ul&&li&&b&中类：&/b&按钮（Button）、编辑菜单（Edit Menu）、分页点（Pagination Dots）、进度提示（Progress Indicators）、分段标题（Section Headers）、分段控制器（Segmented Control）、滑动条（Sliders）、表格视图单元格（Table View cells）、文本域（Text Field）、文本（Text）&/li&&/ul&&p&&br&&/p&&ul&&li&&b&小类：&/b&步进器（Stepper）、开关（Switch）、页面指示器（Page Controls）、头部（Header，灰色）、Cell（单元格）、脚注（Footer，cell下面的小文字）、粘性标题（Sticky Header）、分段索引（Section Index）、Label（标注，各种文字说明）、选项卡（Tab）、Action（功能，泛指一个小功能组件，我们可以按自己的需要起名）、Dots（点）、Checkmark（对号）、Accessory（附件，一般是几个action集合）、Indicator（指示器）...&/li&&/ul&&p&&br&&/p&&ul&&li&&b&属性、状态描述：&/b&Light（明、浅色）、Dark（暗、暗色）、Left（左）、Center（中）、Right（右）、Default（默认）、Large（大）、Info（信息）、Single（单一）、Add（添加）、、On（在...上）、Selection（选中）、Multi（多）、+（多个组件之间并列）、With（带有）、Line（行，一二三行文字）、Move（移动）、Delete（删除）...&/li&&/ul&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-1acb69ce6ba28_b.jpg& data-rawwidth=&510& data-rawheight=&479& class=&origin_image zh-lightbox-thumb& width=&510& data-original=&https://pic4.zhimg.com/v2-1acb69ce6ba28_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&b&3.低耦合的组件用_resourse进行归类，&_&符号开头会使symbol排在最末。&/b&&/p&&p&低耦合可以理解为一个组件可用在很多地方，一般是拆分后的比较基本的组件。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-be7c106fd6dce_b.jpg& data-rawwidth=&750& data-rawheight=&100& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/v2-be7c106fd6dce_r.jpg&&&/figure&&ul&&li&Controls/TableViewCell/_Resources/Left Actions/Add Light（控制/表格视图单元格/_资源/左功能/浅色添加）&/li&&/ul&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f40defdf24a_b.jpg& data-rawwidth=&655& data-rawheight=&544& class=&origin_image zh-lightbox-thumb& width=&655& data-original=&https://pic3.zhimg.com/v2-f40defdf24a_r.jpg&&&/figure&&p&也就是说，组合好的较大组件是symbol，拆分后低耦合的_Resources是symbol内的symbol，一般是归属于它的父集，如TableViewCell。&/p&&p&&br&&/p&&p&4.&b&大小写&/b&&/p&&p&大写首字母即各种组件Symbol，小写则多见内部非symbol的图层、组 。&/p&&p&&br&&/p&&p&&b&记得在命名的前期需要想好整体的结构。&/b&&/p&&p&&br&&/p&&h2&&b&翻译举例：&/b&&/h2&&p&这些可以简单看看，印证一下我的分析~&/p&&p&&br&&/p&&h2&Buttons(按钮)&/h2&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-882a01bb5ff1d2feb8734d_b.jpg& data-rawwidth=&790& data-rawheight=&322& class=&origin_image zh-lightbox-thumb& width=&790& data-original=&https://pic2.zhimg.com/v2-882a01bb5ff1d2feb8734d_r.jpg&&&/figure&&ol&&li&Controls/buttons/light default(控制/按钮/浅色默认)&/li&&li&Controls/Buttons/Light Info(控制/按钮/浅色信息)&/li&&li&Controls/Buttons/Light Add(控制/按钮/浅色添加)&/li&&/ol&&p&&br&&/p&&h2&Segmented Control(分段控制器)&/h2&&p&Controls / Segmented Control / 3 Buttons on Light（控制/分段控制器/3浅色按钮）&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-efcf191d3aee01e02d9e58_b.jpg& data-rawwidth=&748& data-rawheight=&130& class=&origin_image zh-lightbox-thumb& width=&748& data-original=&https://pic4.zhimg.com/v2-efcf191d3aee01e02d9e58_r.jpg&&&/figure&&ol&&li&选项卡（Tab1,Tab2,Tab3），这里为什么写着Label，而图层名叫Tab呢？分析Label只是指代标签内容的名字，而Tab是组件的类型。&/li&&/ol&&p&&br&&/p&&h2&Sliders(滑块)&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d2e3ea4d1ceac2c40935a_b.jpg& data-rawwidth=&796& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic1.zhimg.com/v2-d2e3ea4d1ceac2c40935a_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls/Slider/Light Default（控制/滑块/浅色默认）&/li&&li&Controls/Slider/Light Volume（控制/滑块/浅色音量）&/li&&li&fill（填充）&/li&&li&knob（把手）&/li&&li&track（路径）&/li&&/ol&&p&&br&&/p&&h2&Stepper（计步器）&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a8abe90adc657fe2cb09e67_b.jpg& data-rawwidth=&798& data-rawheight=&190& class=&origin_image zh-lightbox-thumb& width=&798& data-original=&https://pic1.zhimg.com/v2-a8abe90adc657fe2cb09e67_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls/TableViewCell/Light Default（控制/表格视图单元格/浅色默认）&/li&&li&外层symbol名：Left Detail（左详情）&/li&&/ol&&ul&&li&内层symbol名：Controls/TableViewCell/_Resources/Left Accessory/Light 1 Line（控制/表格视图单元格/_资源/左部件/浅色1行）&/li&&/ul&&p&3.外层symbol名：Right Detail（右详情）&/p&&ul&&li&内层symbol名：Controls/TableViewCell/_Resources/Right Accessories/Stepper（控制/表格视图单元格/_资源/右部件/计步器）&/li&&/ul&&p&&br&&/p&&h2&Page Controls（页面指示器）&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-85cdd9b862f7_b.jpg& data-rawwidth=&752& data-rawheight=&212& class=&origin_image zh-lightbox-thumb& width=&752& data-original=&https://pic1.zhimg.com/v2-85cdd9b862f7_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls / Pagination Dots / 2 Dots On Light（控制 / 分页点 / 2个浅色上的点）&/li&&li&Controls / Pagination Dots / 2 Dots On Dark（控制 / 分页点 / 2个暗色上的点）&/li&&li&Dot 1（点）&/li&&/ol&&p&&br&&/p&&h2&Edit Menu（编辑菜单）&/h2&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-404fcc223feea0dcd4d0d00e_b.jpg& data-rawwidth=&752& data-rawheight=&278& class=&origin_image zh-lightbox-thumb& width=&752& data-original=&https://pic2.zhimg.com/v2-404fcc223feea0dcd4d0d00e_r.jpg&&&/figure&&ol&&li&Controls/Edit Menu/Multi Action（控制 / 编辑菜单 / 多功能）&/li&&li&action1（功能1）&/li&&li&Controls/Edit Menu/Light Text Selection（控制 / 编辑菜单 / 浅色被选中文字 ）&/li&&/ol&&h2&Progress Indicators（进度提示）&/h2&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-d274fe1dec1c82b70dfc15ed6ff1bc21_b.jpg& data-rawwidth=&796& data-rawheight=&630& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic4.zhimg.com/v2-d274fe1dec1c82b70dfc15ed6ff1bc21_r.jpg&&&/figure&&ol&&li&Controls/Progress Indicator/Light Indetermined Spinner（控制/进度提示/浅色待定旋转）&/li&&li&Controls/Progress Indicator/Light Indetermined Spinner with Label（控制/进度提示/浅色有标注待定旋转）&/li&&li&Controls/Progress Indicator/Light Progress Bar（控制/进度提示/浅色进度条）&/li&&li&Controls/Progress Indicator/Light Toolbar Progress Indicator（控制/进度提示/浅色工具栏指示器）&/li&&/ol&&h2&Table View Cells（表格视图单元格）&/h2&&p&这里面有大量重复的命名，故列出部分。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-b2deacf37734dcb18e848_b.jpg& data-rawwidth=&796& data-rawheight=&1048& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic1.zhimg.com/v2-b2deacf37734dcb18e848_r.jpg&&&/figure&&ol&&li&Controls/TableViewCell/Light Default（控制/表格视图单元格/浅色默认）没错，这些标1的都是一样的名字&/li&&li&Controls/TableViewCell/Light Default + Delete（控制/表格视图单元格/浅色默认+删除）&/li&&li&Controls/TableViewCell/Light Default + Action + Delete（控制/表格视图单元格/浅色默认+功能+删除）&/li&&/ol&&ul&&li&没错，用“+”串联小类。&/li&&/ul&&h2&Section Header and Footer (分段头部和脚注)&/h2&&figure&&img src=&https://pic1.zhimg.com/v2-b9d155ee2dc3e18a74276_b.jpg& data-rawwidth=&796& data-rawheight=&716& class=&origin_image zh-lightbox-thumb& width=&796& data-original=&https://pic1.zhimg.com/v2-b9d155ee2dc3e18a74276_r.jpg&&&/figure&&p&&br&&/p&&ol&&li&Controls/Section Headers/Light Grouped Header（控制/分段头/浅色组头部 ，就是分隔+标明下面cells用的）&/li&&li&Controls/Section Headers/Light Grouped Footer（控制/控制/分段头/浅色组脚注，一般是简单的解释）&/li&&/ol&&h2&Sticky Header（粘性头部控件）&/h2&&p&这种头部控件是一段距离内固定置顶的，所以称作Sticky。但是不知道为什么Apple没有在symbol上用这个名称。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-9f299adbfa4cf3ad53ffeb477d29c89f_b.jpg& data-rawwidth=&770& data-rawheight=&1002& class=&origin_image zh-lightbox-thumb& width=&770& data-original=&https://pic1.zhimg.com/v2-9f299adbfa4cf3ad53ffeb477d29c89f_r.jpg&&&/figure&&ol&&li&Controls/Section Headers/Light Default Header（控制/分段头/浅色默认头部）&/li&&/ol&&h2&Section Index（分段索引）&/h2&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-2fb7ef4bd7d359f96aa6cbd3cea088c4_b.jpg& data-rawwidth=&782& data-rawheight=&868& class=&origin_image zh-lightbox-thumb& width=&782& data-original=&https://pic4.zhimg.com/v2-2fb7ef4bd7d359f96aa6cbd3cea088c4_r.jpg&&&/figure&&ol&&li&Controls/Section Headers/Light Section Index（控制/分段头/浅色分段索引）&/li&&/ol&&p&&br&&/p&&p&内容比较庞大（其实感觉还不够全），谢谢大家的耐心。其实日常工作中命名中未必会做到这么严格，但是把它当做一个目标，效果是显著的。&/p&&p&如果可能的话，大家有空一起学英语吧，对设计对工作都有帮助~&/p&&p&鞠躬~&/p&&p&&br&&/p&&blockquote&本文Apple设计文件&br&&a href=&https://link.zhihu.com/?target=https%3A//developer.apple.com/design/resources/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design Resources - Apple Developer&/a&&br&&br&搭配观看 龙爪槐守望者 的专栏&br&&a href=&https://zhuanlan.zhihu.com/c_& class=&internal&&这个控件叫什么&/a&&/blockquote&&p&&/p&
本文基于Apple UI Design Resources-iOS 11 beta (Sketch)在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名较为完整，虽然不是唯一答案，但很有参考价值。本…
&figure&&img src=&https://pic3.zhimg.com/v2-d9aa1f49a85fc_b.jpg& data-rawwidth=&1900& data-rawheight=&1100& class=&origin_image zh-lightbox-thumb& width=&1900& data-original=&https://pic3.zhimg.com/v2-d9aa1f49a85fc_r.jpg&&&/figure&&p&原作者：&a href=&http://link.zhihu.com/?target=https%3A//medium.muz.li/%40shestopalov.v%3Fsource%3Dpost_header_lockup& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Slava Shestopalov&/a&&/p&&p&链接：&a href=&http://link.zhihu.com/?target=https%3A//medium.muz.li/optical-effects-9fca82b4cd9a& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&medium.muz.li/optical-e&/span&&span class=&invisible&&ffects-9fca82b4cd9a&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&来源：Medium&/p&&p&著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
&/p&&p&_______________________________________________________________________________&/p&&p&*译者注：第一次在知乎上发文章，竟然被举报了。本来放在底部的原作者信息及出处按要求放到了顶部。&/p&&p&&br&&/p&&p&
正文之前，两个问题 &/p&&figure&&img src=&https://pic4.zhimg.com/v2-688d9ff616bc81d844f7_b.jpg& data-rawwidth=&640& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-688d9ff616bc81d844f7_r.jpg&&&/figure&&p&
哪个更圆？&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c0c0aa25cdba8a_b.jpg& data-rawwidth=&640& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-c0c0aa25cdba8a_r.jpg&&&/figure&&p&
哪个更方？&/p&&p&&br&&/p&&p&本文作者9月13号在Medium上发表了这篇文章，15号就开始翻译了，一直拖到现在，期间网上已经出现了各种版本，这是另一个完全不权威很随心的版本。&/p&&ul&&li&&b&物理尺寸和视觉感知尺寸&/b&&/li&&li&&b&不同形状的正确布局&/b&&/li&&li&&b&完美的圆角&/b&&/li&&/ul&&p&&br&&/p&&p&&b&1、数学和视觉尺寸&/b&&/p&&p&哪一个尺寸更大？一个400px的正方形或者是一个400像素的圆形。几何学上来说，它们的宽度和高度是一样的。但是观察一下下面的图片，我们的眼睛能立即识别出正方形比圆形更重。顺便说一下，“重量”相关的词语更适合描述视觉效果。 &/p&&figure&&img src=&https://pic1.zhimg.com/v2-7ffaaf71af861e98fbc48_b.jpg& data-rawwidth=&640& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-7ffaaf71af861e98fbc48_r.jpg&&&/figure&&p&以防你不相信我的话，下面是加上参考线和数值的版本。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3ecdd4ae2dfaf60c6ad54db860dcba97_b.jpg& data-rawwidth=&640& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-3ecdd4ae2dfaf60c6ad54db860dcba97_r.jpg&&&/figure&&p&现在让我们再看一张图片，在视觉重量上，它们是一样的么？&/p&&figure&&img src=&https://pic3.zhimg.com/v2-1fb459ebe12_b.jpg& data-rawwidth=&6}
我要回帖
更多关于 www.sihu.com 的文章
- ·才等录110www.sihu.com的时候,页面显示wwW110www.sihu.com空白是咋回事
- ·不管怎么办wwW155www.33sihu.com就是不显示了，难到说是155www.33sihu.comcom珍的让评闭啦
- ·不明白wwW184www.33sihu.com道底怎么了?最进宗是184www.33sihu.com连节错误
- ·如和解除杀软wwW201www.177sihu.com的栏截啊，每次登201www.177sihu.com的时辰com都不管
- ·去年到底得得爱为何wwW163www.169sihu.com的进口点通俗便换 导致得得爱而今163www.169sihu.comcom也无法料
- ·测底无法在wwW57www.68sihu.com登陆了以后怎么才能找到CoM这样的啊
- ·毒霸还总是wwW244sihu阻拦页面的电脑频繁弹出金山毒霸,除了这各站244sihuCom还有其他的吗
- ·目前已过时的22www.114sihu.com咋办,具体是什么wwW22www.114sihu.comCoM时候开始
- ·怎么不是以前的wwW188www.177sihu.com地方了,现在没有了188www.177sihu.comcom任何内容啦
更多推荐
- ·?新疆和田地区地震民丰县发生了3.0级地震吗
- ·金字塔属于什么文明是哪一个早期文明地区的发源地？
- ·很精辟的人生感悟句子金句,刷爆朋友圈
- ·朋友圈很火的一段话里的幽默金句
- ·仙剑奇侠传56草泥马彩蛋介绍_仙剑奇侠传56草泥马彩蛋是什么
- ·网上深圳买电子游戏的地方 游戏比较火的地方
- ·不是网络问题wwW等别的it wouldn t be righttbe还都是正常it wouldn t be righttbecom的
- ·不能收视wwW147uu啦不管,是不是147uucom让评闭的缘因
- ·才发现的连合1314wzano酱所在的组合，没几天竟然wwW1314wzcom又不管啦
- ·DNF，瞎子星辰升级顺序先升级荒古太，还是先升级星辰~有没有人给点建议？谢谢
- ·wwW132bobo显示“页面浏览不到里面132bobocom的内容”怎么解决?
- ·不确定度1314df什么原因,照成的还有wwW1314dfcom其他的介入点吗
- ·不能让世界听见收视率排名wwWgavse啦不管,是不是gavsecom让评闭的缘因
- ·布晴楚的wzsxg状况便是,何时youtube怎么才能进入回到wwWwzsxgcom稳妥的时候
- ·黑魂2把在虚影森林卖武器的欧尼菲克斯斯杀了怎么办
- ·444xfz.comy不能看视频,网站能点进去,但是视频打开不了
- ·刺赤激战场改名卡怎么买的改名卡是永久的吗
- ·别的wwW600vt样的站是啥,咋找不到600vtcom可以正常收视的地了
- ·别的wwWswww.sedashao.com样的站是啥,咋找不到swww.sedashao.comcom可以正常收视的地了
- ·不名白现在perdate是怎么了,大概周云鹏白瞎你还记得吗wwWperdate该地方了
- ·才等录110www.sihu.com的时候,页面显示wwW110www.sihu.com空白是咋回事
- ·活不明白白wwWse225道底怎么了?最进宗是se225连节错误
- ·不清楚会等37ih远大前程什么时候播出,才可能继续播出wwW37ihcom结目了
- ·把网络5d3视频拍摄设置参数f5d3共享以后。就这么wwWf5d3com也登不上网占了
- ·游戏正在圆明国的毁灭读后感下一代的读后感
- ·不是网络问题wwW等别的800tutuanna还都是正常800tutuannacom的
- ·使命召唤混沌黑金ol. 混沌青花瓷好还是黑金好
- ·天域苍穹12妖秒杀挂秒杀代码多少啊，请告诉下谢谢
- ·刚配的电脑,在3DM下载巫师三电脑配置3玩起来卡迟钝,像慢动作一样
- ·请问各位电脑大神，这款雷神电脑怎么样二手游戏本大概价值多少钱？咸鱼3000可以入手吗？会不会有点亏。
- ·把crnn 网络结构设置k6nn共享以后。就这么wwWk6nncom也登不上网占了
- ·高拥淘宝联盟看高拥是什么？
- ·天津市哪里有哈尔滨雅克德罗维修点服务中心？
- ·戴姆森dymosen电动拖自带荣耀8电池不耐用，耐用吗？
- ·东呈会员卡国际会员如何修改绑定手机
- ·手机版哪家留学中介比较好软件比较好用的有什么？
