HTML结构与CSS表现分离：留言卡片布局三种实现对

脚本专家

为什么先写HTML再写CSS

网页中HTML负责结构和语义，CSS负责表现，JavaScript负责行为。结构表现分离不是把文件拆开引用这么简单，而是在制作顺序上先按内容模块关系写出简洁、语义化的HTML，再通过CSS完成视觉样式。这样能减少HTML对CSS的依赖，后期维护、换肤和排查样式问题都更容易。文中以留言卡片为例，展示初级、中级、高级三种写法，从div层层嵌套到直接子元素布局，说明如何在不改变HTML结构的前提下完成设计图效果。

实现步骤与常用属性
1. 拿到设计图先看文字内容和模块关系，不急于套样式。
2. 按结构和语义编写HTML。
3. 再设置CSS样式。
4. 尽量降低HTML与CSS的耦合度。
常用手段包括：
overflow用于控制内容溢出：visible默认不修剪；hidden修剪且其余不可见；scroll修剪但显示滚动条；auto仅当内容被修剪时显示滚动条；inherit继承父元素。
text-indent可把文本缩进到目标位置，不必再给文本外套标签，减少冗余代码。
margin可以为负值，通过负margin让元素向四个方向移动，从而在不增加结构标签的情况下完成排版。
网页换肤的基础是相同HTML结构对应不同CSS样式，所以HTML越少依赖具体样式，换肤越容易。

示例结构：留言卡片三个单元
一个卡片包含头像、时间、昵称和正文。原文用三个demo表示三种结构：

2. <div class="demo1">
3.   <div class="fl">
4.     <img src="../../images/head02.jpg" alt="">
5.   </div>
6.   <div class="fr">
7.     <span>10分钟前</span>
8.     <h6>渐行渐远渐无书</h6>
9.     <p>你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙，仔细想想又不知道自己真正地在忙些什么，而养成良好的习惯，照顾好自己，追随自己的梦想，才能提高生产力，这也意味着改善你与家人和朋友的关系，因为当你改变时，你周围的一切都改变了，高效能的人有哪些习惯值得我们学习？</p>
10.   </div>
11. </div>
13. <div class="demo2">
14.   <img src="../../images/head02.jpg" alt="">
15.   <div class="fr">
16.     <span>10分钟前</span>
17.     <h6>渐行渐远渐无书</h6>
18.     <p>你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙，仔细想想又不知道自己真正地在忙些什么，而养成良好的习惯，照顾好自己，追随自己的梦想，才能提高生产力，这也意味着改善你与家人和朋友的关系，因为当你改变时，你周围的一切都改变了，高效能的人有哪些习惯值得我们学习？</p>
19.   </div>
20. </div>
22. <div class="demo3">
23.   <img src="../../images/head02.jpg" alt="">
24.   <span class="time">10分钟前</span>
25.   <h6>渐行渐远渐无书</h6>
26.   <p>你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙，仔细想想又不知道自己真正地在忙些什么，而养成良好的习惯，照顾好自己，追随自己的梦想，才能提高生产力，这也意味着改善你与家人和朋友的关系，因为当你改变时，你周围的一切都改变了，高效能的人有哪些习惯值得我们学习？</p>
27. </div>

复制代码

公共重置和文本样式如下，三个demo共用：

2. /* reset */
3. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
4.   margin:0;padding:0;list-style:none;
5.   font:12px/1.5 "Arial","sans-serif","微软雅黑","宋体","Tahoma";
6. }
7. /* 公共样式 */
8. .demo1,.demo2{
9.   width:600px;margin-top:20px;overflow:hidden;margin-bottom:20px;
10. }
11. p{
12.   text-align:justify;text-indent:2em;line-height:24px;
13. }

复制代码

初级：额外div包住头像和文本
初级写法按视觉方框划分结构，大div里包含左右两个小div，左侧放img，右侧放span、h6、p，时间用绝对定位。这样能做出效果，但结构层级多，CSS选择器强依赖.fl、.fr等类名。

2. /* 初级 */
3. .demo1{width:600px;margin-top:20px;overflow:hidden;}
4. .demo1 .fl{width:100px;float:left;}
5. .demo1 .fl img{margin-left:20px;padding:10px;border:1px solid #ccc;}
6. .demo1 .fr{width:488px;float:right;border:1px solid #ccc;position:relative;padding:5px;}
7. .demo1 .fr span{position:absolute;right:18px;top:5px;}

复制代码

中级：去掉左侧多余div
中级写法去掉左侧包img的div，让img直接作为.demo2的子元素，右侧仍保留.fr作为文本容器。结构少了一层，但文本区仍依赖额外包裹层和右浮动，HTML与CSS的绑定仍然较紧。

2. /* 中级 */
3. .demo2 .fr{width:488px;float:right;border:1px solid #ccc;position:relative;padding:5px;}
4. .demo2 .fr span{position:absolute;right:18px;top:5px;}
5. .demo2 img{margin-left:20px;padding:10px;border:1px solid #ccc;}

复制代码

高级：结构最小化，用负margin和定位完成视觉
高级写法先把内容按语义写成img、span.time、h6、p并列，不再为左右布局增加包裹div。CSS里给.demo3设置宽度、左外边距、内边距、边框和相对定位；img左浮动，并用负margin向左上移动；时间span绝对定位到右上角。这样HTML结构更简洁，样式改动不轻易牵动结构，符合先结构后表现、降低HTML与CSS契合度的思路。

2. /* 高级 */
3. .demo3{
4.   border:1px solid #ccc;width:488px;margin-left:100px;padding:5px;position:relative;
5. }
6. .demo3 img{
7.   float:left;margin:-6px 0 0 -86px;padding:10px;border:1px solid #ccc;
8. }
9. .demo3 span{
10.   position:absolute;top:10px;right:20px;
11. }

复制代码

排查与适用场景
如果高级写法中头像位置偏移，先核对.demo3的margin-left、img的负margin以及padding、border是否与示例一致；时间位置异常时，检查父容器是否设置了position:relative，因为span的absolute定位以它为参照。初级和中级通过overflow:hidden处理浮动影响，高级结构直接并列元素，调整样式时要关注浮动和绝对定位对后续内容的影响。
这种“先语义结构、后CSS表现”的方式适合留言列表、评论卡片、内容块等需要复用和换肤的页面。相同HTML结构配不同CSS即可换肤，JavaScript行为也可独立添加，后期维护比层层div嵌套更清晰。

小结
原文用三个demo说明：初级靠div嵌套和左右浮动，中级去掉左侧div，高级把HTML简化到img、span、h6、p并列，再用负margin、浮动和绝对定位实现设计图效果。核心不是少写几个标签，而是先关注文字内容和模块关系，写出语义化结构，再在不改变现有结构的基础上完成视觉样式。

热心网友7

楼主的思路说得很清楚，先结构后样式这个顺序确实容易被忽略。很多人习惯边写HTML边调样式，最后结构里塞满了一堆只为视觉效果服务的div和class，换肤或者改版时基本等于重写。 三种demo的递进也很直观：demo1按视觉方块划分，左右各包一层，语义上其实"左侧区域"并不是内容的一部分；demo2去掉了包img的div，层级少一层，但文本区还得靠.fr托着；demo3把img、span、h6、p直接作为.demo3的子元素，用直接子元素选择器布局，结构最干净，基本做到了HTML只表达"这是头像、时间、昵称、正文"。 不过有个小地方想探讨下：demo3里给span加了class="time"，某种程度上又让HTML承担了样式钩子。如果布局上能用.demo3 > span或:nth-of-type定位到它，是不是连这个class都可以省掉，让HTML更纯粹？当然直接子元素选择器也有代价，以后结构稍微一变选择器就失效，得看项目更看重哪边。 另外正文里提到的overflow、text-indent和负margin这几个手段很实用，尤其text-indent:2em省掉了首行缩进专用的span，这类"用CSS解决表现问题"的例子多一些会更有说服力。想问下demo3的完整CSS方便补全吗，想对照着跑一遍看看三种写法在实际渲染上的差异。

热心网友7

先按内容结构写HTML、再交给CSS做表现，这个顺序确实是很多初学者容易忽略的点。大家往往一边搭标签一边调样式，最后HTML里塞满了只对当前视觉有效的类名和包裹层，换肤或改版时只能推倒重来。楼主用留言卡片做对比很直观，三种demo的差异一眼能看出结构耦合度在降低：初级用左右两个div划分视觉区域，中级让img直接成为子元素，demo3则连文本容器都不要了，直接靠直接子元素来布局，HTML明显更干净。 几个常用属性里，text-indent替代额外标签做缩进、负margin微调位置这两个思路很实用，属于用CSS解决排版问题而不是靠加节点。不过实际项目里也得权衡，负margin用多了布局会变得难读，最好配合注释；overflow:hidden能清浮动，但也要注意别误裁掉需要露出的内容。 另外有个小提醒：楼主首帖好像没贴完，demo2的img样式只写到“margin-”就断了，demo3的完整CSS和高级写法的说明也没看到，方便的话可以补一下，尤其是demo3里时间和正文这种同级元素怎么控制间距和换行，这块挺想看看具体实现。

热心网友7

这篇思路很清晰，先结构后样式这个顺序确实值得强调。很多人做页面时习惯边写标签边套样式，最后HTML里塞满各种类名和额外包裹层，后面换肤或者改版就很痛苦。文中用留言卡片做三种对比很直观：初级按视觉方框拆结构，层级多、依赖fl和fr这类类名；中级去掉头像外层div，少了一层但文本区还是靠包裹层和浮动；到demo3让img、span、h6、p直接作为卡片的子元素，再配合直接子元素选择器、text-indent和负margin完成排版，确实说明了不少视觉效果并不需要靠增加标签来实现。 overflow、text-indent、负margin这几个点也讲得实用，尤其是text-indent缩进首行和负margin微调位置，能减少很多无意义的span。整体看，这篇更适合帮初学者建立“HTML尽量少依赖具体样式”的意识，而不是只记几个属性。 如果后面还要展开，建议补充两点：一是直接子元素选择器和负margin在老浏览器里的兼容与可读性问题，团队协作时最好约定使用边界；二是demo3里时间可以考虑用time标签，头像的alt也别留空，语义化会更完整。另外文中示例的CSS似乎到demo2的img就截断了，demo3的完整样式如果补上，对比会更完整。