要把微信公众号排得美美的，全靠CSS在后面撑腰。CSS说白了就是给网页装修的一张“图纸”，告诉你该挑什么字体、定多大字号、字间距咋调，或者给那块区域铺个什么背景、画个什么框。你在编辑器里随手点了个“字号加大”，其实浏览器正忙着执行一条font-size: 20px;的指令呢，代码一变，效果立马就能看出来。 把整个页面看成是由一个个小盒子组成的就行了，内容稳稳当当地放在盒子中间，周围的空地叫内边距，盒子和盒子之间的空隙就是外边距。想让某段文字往左挪点？直接给它的margin-left加个值就行；想给图片留个白边？那就把padding给填满。只要这盒子动一动，旁边的布局就跟着变化。 那个标签就像个移动的大抽屉，能把文章、图片还有按钮全往里塞，然后统一排个号。只要你动了的顺序，里面的小盒子都会跟着一起挪位置，省得你再挨个去拖动了。 要是有两个并列的盒子摆在那儿，它们就是各自独立的；可要是一个盒子把另一个盒子“抱”在怀里了，那就是嵌套关系。这时候爸爸的样式会自动传给儿子，但儿子如果自己写了新规则，就会把爸爸的规则给顶掉——这就是CSS的“就近原则”。学会这招，就能精准控制哪些地方该继承样式，哪些地方该盖个新章。 公众号这种流式布局很神奇，组件之间靠的是相对定位。上层组件只知道离下层组件多远就行，没什么绝对坐标。所以你在两段文字中间再塞一段新内容，后面的文字就会自动往下沉，排版就像玩积木一样能一直往上长。根本不用你手动去拖动每一行，系统自动帮你搞定顺延。 像135这种编辑器确实挺好用，随便点几下鼠标就能搞定80%的普通排版活儿。可要是遇上那种非标准尺寸的海报、全屏滚动的图或者有交互效果的按钮这种难搞的任务，就只能亲自动手写CSS了：改个position: relative;就能让元素精准悬浮；加句transform: translateY(-50%);就能让图片垂直居中。掌握了这一手，排版就不受模板限制了，“我想怎样就怎样”。