第11页
padding-box：padding计算入width内。
overflow
溢出控制。其常用值有visible、hidden、scroll和auto。其中scroll是微信图文中经常应用的滚动效果，包括模拟手机页面滚动、关注小卡片设计等都和它有关，它的使用我们会在后续展示。
阅读与书写
高水平的运营者要能够顺利阅读并准确对照页面中的内容，而且有能力改写或书写一段HTML5增加想要的效果。你不必像前端工程师那样能从零开始逐行写出一个页面（何况大多数前端工程师也并非逐行写页面），但一定要保持阅读和书写的训练。
一个合理的阅读环境
在Sublime Text中的阅读，和在txt文本编辑器中的阅读的效率截然不同。在一个合理的阅读环境内，代码的展开更井然有序，通过系统的语法高亮能更快理解代码的意义。
编辑器阅读
同一段代码在一个普通纯文本中如下（如图2-17所示）。
图2-17 普通纯文本中的代码
它在135编辑器的HTML5模式下是这样的（如图2-18所示）。
图2-18 135编辑器中的代码
它在Sublime Text中是这样的（如图2-19所示）。
图2-19 Sublime Text中的代码
这三种阅读环境产生的效率是显然易见的。即便你现在还可能不清楚这些代码意味着什么，但是按格式塔原理来理解，你能通过相似性原则了解同色高亮之间一定存在某种相关性；通过完整和闭合倾向原则，你能判断基于对齐的代码整体性……（高亮代码方式请通过View-Syntax菜单选择HTML）
所以，硬核运营不仅需要产出优质的运营内容，更要在制作优质内容时，部署优质的设计、开发、调试环境。
开发者模式阅读
编辑器阅读是一种线性阅读。由于CSS本质上是盒模型，导致线性阅读时，开发者无法快速理解复杂的盒子堆叠状态，同时也难以搞清楚代码和页面内容的关联。此时，可以使用另一种阅读模式，尤其在“不需要看细节，只需要看结构”的情况下更合适用这种模式。
开发者模式的阅读工具也有很多，笔者主要推荐直接使用Chrome的开发者模式或者微信开发助手。后者的内核也是Chrome开发者模式。
在开发者模式中，一方面你能够快速切换页面的电脑视图布局和手机页面布局，另一方面能够审查元素并高亮展开对应代码（如图2-20所示）。
图2-20 高亮展开对应代码
其中红框处按钮，可用于切换终端自适应情况。左侧选定元素后，会在右侧展开对应代码。这一功能可以通过快捷键调用：Windows系统用户在Chrome内按Ctrl+Shift+C快捷键，Mac OS系统用户在Chrome内按Command+Shift+C快捷键。
亲自上手试一试，你就会发现这种阅读方法的便捷性。加之开发者模式右侧的代码也有缩进和折叠功能，因此除了字符稍小以外，相对来说易读性很强。
书写与调试
在编辑器中查看完毕并确定要修改后，书写的方式和调试的方式也有差别。首先要注意的是，无论在哪类编辑器中书写，HTML5语言都要用闭合代码，有头有尾。例如，一个的存在，必定意味着还有一个
结束这个盒子。除了
换行符这类自我产生封闭的元素，其他元素基本都必须确保前后闭合。而且在135等初级编辑器中书写时，不可以使用/>缩略闭合，例如在图2-15中，椭圆代码的在135中必须写全，但如Sublime Text、开发者模式等高阶工具允许其缩略为形式。
135编辑器
在135编辑器中，你只需要点按右上方的HTML按钮即可来回切换效果。但是注意，135编辑器的错误提示为红色，如果你忽略错误直接点HTML按钮，那么切换回代码书写模式时很可能会发生代码错乱等情况。当然此时不必紧张，只须返回非代码可视化编辑模式，按ctrl+Z撤销即可。135编辑器就是通过HTML按钮完成调试的，来回切换就是调试的具体过程。
但135编辑器最大的书写问题在于非智能化，必须几乎一个一个字母地键入，耗费时间长。相比Sublime Text或者Dreamweaver等效率低很多。另外，对于复杂的CSS设计，我们往往通过id标注某些关键代码。在135编辑器中，你需要通过Chrome自带的查找功能搜索，快捷键为Ctrl+F。
Sublime Text
在Sublime Text中，书写更流畅。一方面，当你输入元素时，会提供符合的联想元素列表菜单供你快速选择；另一方面，如前引号、前书名号等键入时会自动生成后引号和后书名号，这样既节约时间又可以有效杜绝疏漏导致的前端BUG。
Sublime Text可以书写多种语言，所以调试需要进行对应的配置衔接。如果手动调试，那么可以把Sublime Text正在书写的.html文档在Chrome中打开。每次修改完只需要保存，就可以在Chrome内刷新并查看。当然，Sublime Text经过配置可以让Chrome自动刷新，请参看Sublime Text的官方教程学习具体方法。
开发者模式
开发者模式中的编辑方式比较多样，可以编辑整段的HTML，也可以仅编辑Attribute参数。具体方法是将鼠标移动到对应代码上，单击右键进行选择。
在开发者模式中，一旦编辑好一段代码，只需轻点页面内空白部分，代码就会生效并载入。但是相对令人头疼的是，由于微信公众平台的图文编辑器具备缓存功能，有时候在开发者模式中辛辛苦苦写好的新代码，单击空白区域后会闪退回原先的状态。
对于硬核运营而言，其实编辑图文的策略往往是这样的——通过Sublime Text或Dreamweaver等先完成本地.html的编辑和调试，然后通过开发者模式一次性注入图文草稿并保存。
Debug思路
大多数新媒体富文本完全不允许Java Script的使用，这就意味着大多数时候CSS的BUG主要在于预期的样式没有产生。一般来说，通过检查（1）代码是否闭合；（2）英文单词拼写是否错误；（3）代码先后顺序是否有问题（在没有申明z-index的情况下，后写的代码在视觉上可以覆盖原先写的代码）；（4）px/em/rem等单位引用是否得当……来排除CSS代码没有产生预期效果的BUG。我们接下来就讲解第4点。
px/em/rem
对于硬核运营，正确认知px/em/rem的意义至关重要。尤其是当我们进行CSS布局、开发H5、设计交互图文时，它将直接关乎不同机型的自适应结果笔者接下来为读者讲解当我们在书写前端代码时，这三者的意义和应用场景。
px像素
px（Pixel）对显示器而言是相对长度单位，对于设计师而言则是绝对长度单位。其原因在于像素本质上是由显示器分辨率决定的。而当下，各种品牌的手机分辨率千奇百怪，因此px的设计虽然方便，但是在实际适配时往往有很多问题。
当然，它仍是最容易被普通人和运营新手理解的长度单位。因而，微信公众平台等图文编辑器依然采用px的字号制度。对于任何浏览器，包括微信的内置TBS浏览器，16px都是默认的标准长度单位。
可是现在运营者慢慢发现，当排版过程中各类块级元素彼此交错时，基于px的尺寸调整在各手机终端表现不一致。当然从适配原则看，通常我们要优先保障以下适配顺序：
· i Phone X；