悟了，html2canvas截图原理，看看它是如何截图的？

问题复现

之前在做 html 内容导出为 pdf、图片时，先是用 html2canvas 生成截屏，再进一步转换为 pdf 文件，感兴趣的同学可以看下这篇一文搞定前端 html 内容转图片、pdf 和 word 等文件，截图得到的图片内容、质量都没有什么问题。

不过最近有个同事反应，他导出的图片有 bug，这我倒挺好奇的，因为这个导出功能已经用了很久，并没有人反馈过有问题（除了那个 pdf 翻页内容被截断的问题，求助 jym ：前端有好的解决方法吗？），于是我要了他的文档，果不其然，出现了下面红框所示的问题。

html2canvas-export-png.png

检查一下它的 DOM 结构，发现是下面这样，猜测是就是这个原因导致的。

html2canvas-mark-bug.png

为了验证自己的猜想，浅浅调试一下 html2canvas 的源码，看下 html2canvas 是怎样一个流程，它是如何将 html内转成 canvas 的。

调试开始

在 html2canvas 执行的地方打个断点，开始调试代码：

html2canvas-point.png

进入 html2canvas 内部，可以看到内部执行的是 renderElement 方法：

html2canvas-renderElement.png

咱们直接进入到 renderElement 方法内部，看下它的执行流程：

renderElement 执行流程判断传入节点是否有效

html2canvas-validate-element.png

这里主要判断节点，快速跳过，继续执行 。

合并配置项

将用户传入的 options 与默认的 options 合并

html2canvas-merge-options.png

构建配置项，将传入的 opts 与默认配置合并，同时初始化一个 context 上下文对象（缓存、日志等）：

html2canvas-context.png缓存对象 cache

其中 cache 为缓存对象，主要是避免资源重复加载的问题。

原理如下：

如果遇到图片链接为 blob，在加载完成后，会添加到缓存 _cache 中：

html2canvas-cache.png

下次使用直接通过 this._cache[src] 从缓存中获取，不用再发送请求：

同时，cache 中控制图片的加载和处理，包括使用 proxy 代理和使用 cors 跨域资源共享这两种情况资源的处理。

继续往下执行

克隆原始 DOM

使用 DocumentCloner 方法克隆原始 DOM，避免修改原始 DOM。

html2canvas-generate-iframe.png

使用 clonedReferenceElement 将原始 DOM 进行克隆，并调用 toIFrame 将克隆到的 DOM 绘制到 iframe 中进行渲染，此时在 DOM 树中会出现 class 为 html2canvas-container 的 iframe 节点，通过 window.getComputedStyle 就可以拿到要克隆的目标节点上所有的样式了。

html2canvas-toIFrame.png绘制 canvas

前面几步很简单，主要是对传入的 DOM 元素进行解析，获取目标节点的样式和内容。重点是 toCanvas 即将 DOM 渲染为 canvas 的过程，html2canvas 提供了两种绘制 canvas 的方式：

使用 foreignObject 方式绘制 canvas

使用纯 canvas 方法绘制

咱们接着执行，当代码执行到这里时判断是否使用 foreignObject 的方式生成 canvas：

html2canvas-foreignObjectRendering.png使用 foreignObject 方式绘制 canvas

首先了解下 foreignObject 是什么？

svg 中的xmlns 全称是“XML Namespaces”，即 XML 命名空间，正是它的存在，在浏览器中 svg 才能正常渲染（下面这段代码是在 iconfont 上随便复制的一个 icon svg 代码）；

foreignObject 允许包含来自不同的 XML 命名空间的元素，借助 标签，我们可以直接将 DOM 节点作为 foreignObject 插入 SVG 节点中进行渲染，如下：

可以看到 标签里面有一个设置了 xmlns="http://www.w3.org/1999/xhtml" 命名空间的 标签，此时 标签及其子标签都会按照 XHTML 标准渲染，实现了 SVG 和 XHTML 的混合使用。

这样只需要指定对应的命名空间，就可以把它嵌套到 foreignObject 中，然后结合 SVG，直接渲染。

对于不同的命名空间，浏览器解析的方式也不一样，所以在 SVG 中嵌套 HTML，解析 SVG 的时候遇到 转化 SVG 的解析方式，当遇到了 就使用 HTML 的解析方式。

这是为什么 SVG 中可以嵌套 HTML，并且浏览器能够正常渲染。

foreignObject 已经支持除 IE 外的主流浏览器

can-i-use-foreignObject.png

弄懂 foreignObject 后，我们尝试将 foreignObjectRendering 设置为 true，看看它是如何生成 canvas 的：

Html2canvas(warp, {  useCORS: true,  foreignObjectRendering: true,})

在此处打个断点：

html2canvas-use-foreignObjectRendering.png

进入 ForeignObjectRenderer 类中

html2canvas-ForeignObjectRenderer.png

这里通过 ForeignObjectRenderer 实例化一个 renderer 渲染器实例，在 ForeignObjectRenderer 构造方法中初始化 this.canvas 对象及其上下文 this.ctx

html2canvas-ForeignObjectRenderer-render.png

调用 render 生成 canvas，进入到 render 方法：

html2canvas-ForeignObjectRenderer-render1.png

render 方法执行很简单，首先通过 createForeignObjectSVG 将 DOM 内容包装到中生成 svg:

html2canvas-foreignObject-createForeignObjectSVG.png

生成的 svg 如下所示：

接着通过。loadSerializedSVG 将上面的 SVG 序列化成 img 的 src（SVG 直接内联），调用this.ctx.drawImage(img, ...); 将图片绘制到 this.canvas 上，返回生成好的 canvas 即可。

接着点击下一步，直到回到最开始的断点处，将生成好的 canvas 挂在到 DOM 上，如下：

document.body.appendChild(canvas)

html2canvas-foreignObject-canvas.png

这就解决了？？？收工！！！

NoNoNo，为什么使用纯 canvas 绘制就有问题呢？ 作为 bug 终结者，问题必须找出来，干就完了 。

而且使用 foreignObject 渲染还有其他问题，我们后面再说。

foreignObject 绘制 canvas 的流程

html2canvas-foreignObject-flow.png

首先克隆原始 DOM，并将所有样式都转为行内样式，避免修改到页面；

构建 ForeignObjectRenderer 渲染器实例，调用 renderer 方法；

将 DOM 内容通过 createForeignObjectSVG 转为 svg 元素；

通过 loadSerializedSVG 将上面的 svg 序列化成 img 的 src；

通过 drawImage 绘制图片到 canvas 上。

使用纯 canvas 绘制

要想使用纯 canvas 方式绘制，那么就需要将 DOM 树转换为 canvas 可以识别的数据类型，html2canvas 使用 parseTree 方法来实现转换，我们来看下它的执行过程。

直接在调用 parseTree 方法处打断点，进入到 parseTree 方法内：

html2canvas-canvas-pasteTree.png

parseTree 的作用是将克隆 DOM 转换为 ElementContainer 树。

首先将根节点转换为 ElementContainer 对象，接着再调用 parseNodeTree 遍历根节点下的每一个节点，转换为 ElementContainer 对象。

html2canvas-canvas-pasteNodeTree.png

ElementContainer 对象主要包含 DOM 元素的信息：

type TextContainer = {  // 文本内容  text: string;  // 位置和大小信息  textBounds: TextBounds[];}
export class ElementContainer {  // 样式数据  readonly styles: CSSParsedDeclaration;  // 当前节点下的文本节点  readonly textNodes: TextContainer[] = [];  //  除文本节点外的子元素  readonly elements: ElementContainer[] = [];  // 位置大小信息（宽/高、横/纵坐标）  bounds: Bounds;  // 标志位，用来决定如何渲染的标志  flags = 0;  ...}

ElementContainer 对象是一颗树状结构，层层递归，每个节点都包含以上字段，形成一颗 ElementContainer 树，如下：

html2canvas-canvas-ElementContainer.png

继续下一步

通过 CanvasRenderer 创建一个渲染器 renderer，创建 this.canvas和this.ctx上下文对象与 ForeignObjectRenderer 类似

得到渲染器后，调用 render 方法将 parseTree 生成的 ElementContainer 树渲染成 canvas，在这里就与 ForeignObjectRenderer 的 render 方法产生差别了。

层叠上下文

概念不懂就看 MDN：层叠上下文

首先我们都知道 CSS 是流式布局，也就是在没有浮动（float）和定位（position）的影响下，是不会发生重叠的，从上到下、由外到内按照 DOM 树去布局。

而浮动和定位的元素会脱离文档流，形成一个层叠上下文，所以如果想正常渲染，就需要得到它们的层叠信息。

可以想象一下：在我们的视线与网页之间有一条看不见的 z 轴，层叠上下文就是一块块薄层，而这些薄层中有很多 DOM 元素，这些薄层根据层叠信息在这个 z 轴上排列，最终形成了我们看到的绚丽多彩的页面。

画个图好像更形象些：

白色为正常元素，黄色为 float 元素，蓝色为 position 元素

stacking-contex.png

更多详细资料请阅读：深入理解 CSS 中的层叠上下文和层叠顺序

canvas 在绘制节点时需要先计算出整个目标节点里子节点渲染时所展现的不同层级，因为 Canvas 绘图需要根据样式计算哪些元素应该绘制在上层，哪些在下层。元素在浏览器中渲染时，根据 W3C 的标准，所有的节点层级布局，需要遵循层叠上下文和层叠顺序的标准。

调用 parseStackingContexts 方法将 parseTree 生成的 ElementContainer 树转为层叠上下文。

ElementContainer 树中的每一个 ElementContainer 节点都会产生一个 ElementPaint 对象，最终生成层叠上下文的 StackingContext 如下：

html2canvas-canvas-StackingContext.png

数据结构如下：

// ElementPaint 数据结构如下ElementPaint: {  // 当前元素的container  container: ElementContainer  // 当前元素的border信息  curves: BoundCurves}
// StackingContext 数据结构如下{  element: ElementPaint;  // z-index为负的元素行测会给你的层叠上下文  negativeZIndex: StackingContext[];  // z-index为零或auto、transform或者opacity元素形成的层叠上下文  zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];  // 定位或z-index大于等于1的元素形成的层叠上下文  positiveZIndex: StackingContext[];  // 非定位的浮动元素形成的层叠上下文  nonPositionedFloats: StackingContext[];  // 内联的非定位元素形成的层叠上下文  nonPositionedInlineLevel: StackingContext[];  // 内联元素  inlineLevel: ElementPaint[];  // 非内联元素  nonInlineLevel: ElementPaint[];}

渲染层叠内容时会根据 StackingContext 来决定渲染的顺序。

继续下一步，调用 renderStack 方法，renderStack 执行 renderStackContent 方法，咱们直接进入 renderStackContent 内：

html2canvas-canvas-renderStackContent.png

canvas 绘制时遵循 w3c 规定的渲染规则 painting-order，renderStackContent 方法就是对此规则的一个代码实现，步骤如下：

此处的步骤 1-7 对应上图代码中的 1-7:

渲染当前层叠上下文的元素的背景和边框；

渲染具有负 z-index 级别的子层叠上下文（最负的第一个）；

对于流式布局、非定位的子元素调用 renderNodeContent 和 renderNode 进行渲染：

渲染所有未定位的浮动子元素，对于其中每一个，将该元素视为创建了一个新的堆栈上下文；

渲染正常流式布局、内联元素、非定位的子元素；

渲染 z-index 为 0 或 auto，或者 transform、opacity 等属性的子元素；

渲染由 z-index 大于或等于 1 的子元素形成的层叠上下文，按 z-index 顺序（最小的在前）。

可以看到遍历时会对形成层叠上下文的子元素递归调用 renderStack，最终达到对整个层叠上下文树进行递归的目的：

而对于未形成层叠上下文的子元素，就直接调用 renderNode 或 renderNodeContent 这两个方法，两者对比，renderNode 多了一层渲染节点的背景色和边框的方法（renderNode 函数内部调用 renderNodeBackgroundAndBorders 和 renderNodeContent 方法）。

renderNodeContent 用于渲染一个元素节点里面的内容，分为八种类型：纯文本、图片、canvas、svg、iframe、checkbox 和 radio、input、li 和 ol。

html2canvas-canvas-renderNode.png

除了 iframe 的绘制比较特殊：重新生成渲染器实例，调用 render 方法重新绘制，其他的绘制都是调用 canvas 的一些 API 来实现，比如绘制文字主要用 fillText 方法、绘制图片、canvas、svg 都是调用 drawImage 方法进行绘制。

所有可能用到的 API

最终绘制到 this.canvas 上返回，至此，html2canvas 的调试就结束了。

纯 canvas 绘制流程

html2canvas-foreignObject-flow.png

首先克隆原始 DOM，避免修改到页面；

使用 parseTree 递归遍历 html，生成 ElementContainer 树（与原始 DOM 层级结构类似）；

构建 CanvasRenderer 渲染器实例，调用 renderer 方法；

遍历上一步生成的 ElementContainer，根据层叠规则生成层叠上下文StackingContext（与原始 DOM 层级结构区别较大）；

遍历层叠上下文，递归地对层叠上下文各层中的节点和子层叠上下文进行解析并按顺序绘制在 Canvas 上，针对要绘制的每个节点，主要有以下两个过程：

创建画布，根据上一步生成的层叠对象递归渲染，最终将 html 内容绘制到画布 canvas 上。

针对最初的 Bug 分析

ok，当调试了一遍 html2canvas 的流程之后，再回到我们的问题上，很显然就是 canvas 渲染的时候的问题，也就是 renderNodeContent 方法，那我们直接在这里打个断点进行调试（为了方便我只输入一行文字进行调试），只有当是文本节点时会进入到此断点，等到 mark 标签中对应的元素进入断点时，查看：

html2canvas-renderNodeContent.png

可以看到此时 width 和 height 已经是父节点的宽高，果真如此 。

解决方案

既然已经知道了问题所在，那么我们开始解决问题，有以下两种解决方案可供参考：

foreignObjectRendering

在 html2canvas 配置中设置 foreignObjectRendering 为 true，此问题就可以解决吗？

然而现实并没有这么简单，这样又会引出新的问题：导出的图片内容丢失

这是为什么呢？

通过 W3C 对SVG 的介绍可知：SVG 不允许连接外部的资源，比如 HTML 中图片链接、CSS link 方式的资源链接等，在 SVG 中都会有限制。

解决方法：需要将图片资源转为 base64，然后再去生成截图，foreighnObject 这种方法更适合截取内容为文字内容居多的场景。

对包含背景色的内联标签截断处理

在对内联元素进行截断前，如何确定 p 标签中的 mark 标签有没有换行？ 因为我们没必要对所有内联标签做处理。

如果 mark 标签的高度超过 p 标签的一半时，就说明已经换行了，然后将 要求一 替换为 要求一 即可，代码如下：

const handleMarkTag = (ele: HTMLElement) => {  const markElements = ele.querySelectorAll('mark')  for (let sel of markElements) {    const { height } = sel.getBoundingClientRect()    let parentElement = sel.parentElement    while (parentElement?.tagName !== 'P') {      parentElement = parentElement?.parentElement!    }    const { height: parentHeight } = (      parentElement as unknown as HTMLElement    ).getBoundingClientRect()    // mark的高度没有超过p标签的一半时 则没有换行    if (height < parentHeight / 2) continue    // 超过一半时说明换行了    const innerText = sel.innerText    const outHtml = sel.outerHTML    let newHtml = ''    innerText.split('')?.forEach((text) => {      newHtml += outHtml.replace(innerText, text)    })    sel.outerHTML = newHtml  }}

ok，再次尝试一下，完美解决，这下可以收工了。

总结

通过对一个不是 bug 的 bug 的分析，尝试调试了一遍 html2canvas 的代码，弄懂了浏览器截图的原理及 html2canvas 的核心流程，并从中学到了几点新知识：

svg xmnls 作用以及渲染 HTML 内容的 foreignObject 标签；

使用 foreignObject 实现快速截图的方法；

CSS 层叠上下文的概念；

canvas 绘图的一些方法。。。

发现 canvas 真是一个有趣的东西，什么都能画，像我现在用于画图的工具excalidraw、图表库g6、g2、echarts都是用的 canvas 搞的，看来得抽时间学习一下 canvas，不要等到“书到用时方恨少“。

以上就是本文的全部内容，希望这篇文章对你有所帮助，欢迎点赞和收藏 ，如果发现有什么错误或者更好的解决方案及建议，欢迎随时联系。

点击小卡片，参与粉丝专属福利

如果文章对你有帮助的话欢迎

UI 设计师要会编程吗？HTML/CSS案例演示

写了那么多 HTML CSS 的学习，终于，要在这篇迎来具体的案例应用了。下面，就是本节课要演示的案例图，我们要通过 HTML 和 CSS 将它实现出来：

不过用图文的方式是没法完整的讲解一遍这个页面的实现过程的，只能尽可能包含我们编写的顺序和重点，需要大家参考视频教程，以及下载我们的案例源文件进行研究，才能更好的掌握有关知识。

案例源文件，在公众号回复 ”前端“ 即可获取。

在完成设计稿以后，我们着手项目的前端界面布局，首先要先建立项目有关的文件夹，然后在这个文件夹根目录中创建 ”index.html“ 文档，再创建 img、css 两个文件夹，用来存放对应文件。

然后，通过编辑器打开 index.html，优先完成页面的标签结构创建，即预判页面中包含哪些标签，以及相应的层级结构（即文档对象模型 DOM），将它们码下来。

那么什么是 HTML 的代码结构呢，前面我们有略微提及，下面用一个树状图来理解 HTML 文档中的结构：

这么做的目的，是为了先集中精力建立一个清晰的 HTML 文档，帮助我们后续在进行样式调整的时候可以更便捷，而不用一边写 HTML 又同时调整 CSS，这样效率会非常低下。

所以，下面就可以开始动手了，优先将我们前文所说的 HTML 文档标准结构填充进去，同时在 head 中添加引用外部 CSS 文件的链接。

<html>
  <head>    <meta charset = "utf-8">    <title>超人的电话亭官网title>    <link rel="stylesheet" type="text/css" href="css/style.css">  head>
  <body>    实际内容区域  body>
html>

然后我们就要在 body 标签内，添加有关的内容框架的 div 标签了，为了展示直观，下方的标签处于 body 标签内，标准文档信息我就不展示出来了。

<div class="page_top">     <div class="nav_bar">div>    <div class="banner">div>div>
<div class="page_main">     <div class="feature">div>    <div class="own_share">div>div>
<div class="page_footer">    <div class="site_info">div>    <div class="site_icp">div>div>

简单描述一下上面的结构，就是我们将页面分为三个大的模块，并在每个大模块又拆分成两个子模块，用文字解释起来如下：

在这个过程中，为了比较好的区分代码内容，我们可以通过在开头或结尾添加 注释代码，提升之后的浏览效率。

并且，在通过 div 创建框架的同时，我们可以为它增加有关的 class 命名，命名的方法大家可以根据自己的习惯定，用拼音也可以，只要没有在不相关的 div 中应用到相同名称即可。下面，开始具体演示几个模块 HTML 标签的编写方式。

首先看顶部模块，对它具体的内部模块做一次拆解，然后再开始动手：

<div class="page_top">     <div class="nav_bar">div>    <div class="banner">div>div>
<div class="page_main">     <div class="feature">div>    <div class="own_share">div>div>
<div class="page_footer">    <div class="site_info">div>    <div class="site_icp">div>div>

然后，我们再开始定义下一个模块特点介绍：

<div class="mod_tit">    <h2>我们有哪些内容h2>div>
<div class="fea_list">
        <div class="fea_card">
        <div class="fea_icon"><img src="img/fea1.png"> div>        <div class="fea_info">            <h3>系列干货h3>            <p>通过一系列的干货，帮助大家更有效的学习p>            <a>点击查看 →a>        div>
    div>
div>

然后，我们再讲讲在干货分享模块中，单个卡片定义的方式：

<li>        <a href="#">
        <img src="img/share1.png">        <h3>史上最全的图标设计教学1——图标设计详解h3>        <span>            <b>酸梅干超人b>            <i>37.8wi>        span>
    a>li>

相信通过上面几个模块的演示，大家应该能了解如何制定 HTML 标签的结构了吧，节省篇幅，页脚模块的样式我就不添加了。

我会将基础的文件框架放在素材文件夹中，大家在公众号回复 ”前端“ 即可获取。

完成了 HTML 的结构，我们就要开始创建 CSS 文档了，创建一个 style.css 样式表文件存储到 CSS 文件夹中，然后就可以在编辑器中开始添加样式了。

通常，我们在 CSS 中添加的第一个选择器，是一个特殊的选择器 ” * “ 符号，它代表了所有元素，使用这个选择器，就等于对所有元素进行了样式声明。我们会再 CSS 头部添加这个选择器，对标签的自带默认样式进行 ”格式化“，常见的设置如下：

* {     margin:0;    padding:0;    list-style:none;    display:block;    text-align:left;    width:100%;    height:auto;    text-decoration: none;}

在这个全局预设中，我们分别清除了 margin、padding、list-style 三个属性的默认数值，将所有元素设置成 block 块化，可以进行长宽的定义，以及实现整体元素左对齐，宽高自适应。

全局预设的并不代表所有参数的元素被定死了，只是我们给它们先预设了一个默认数值，只要在后续其它选择器中声明新的参数，那么浏览器最会按最后设置的声明作为标准。

比如title标签，理论上这个标签是不会出现在画布中的，但在新的特性中有些浏览器在它 block 了以后就会看见，所以我们还要添加一条隐藏声明：

title { display:none;}

然后，我们还可以对 body 标签进行定义，我们通常会将对页面文字定义的基本属性放在 body 上而不是全选择器上，比如：

body {    font-family:Helvetica Neue,PingFang SC,Microsoft YaHei;    font-size:14px;    line-height:1.6;    color:black;    background:white;    width:100%;    min-width:960px;}

这里面，我们定义了字体依次显示 helvetica （英文）、苹方、雅黑，字号使用14像素，行高默认为字号的 1.6 倍，字色为黑，整个内容区域背景色为白色，宽度和浏览器区域一致，以及最小宽度。

全局基本样式的制定，和我们的经验有关，预判这个项目中哪些需要提前设置，哪些是可以不用强调的，初期大家可以使用和我一样的设置，下面，就要展开模块样式的具体制定了。

接着，我们来完成顶部样式的制定。我们可以发现，顶部的导航栏背景实际区域的尺寸宽是 960px，高是 60px，并在画布中居中显示，那么它们的样式：

.nav_bar {    witdh:960px;    height:60px;    margin：0 auto;}

然后，我们就要定义导航栏内的元素了，包含两个部分内容，LOGO 和导航按钮文字，所以我们可以使用 float 属性来表现它们，并使用 margin 属性来增加模块间距。

.logo {    float:left;    margin:5px 30px 0 0;    height:55px;    width:60px;}
.site_bar {    float:left;    height:60px;}

然后，为导航内的列表文字链接做具体的设置。其中 ul 没啥可以做调整的，我们直接从 li 标签开始定义，将 li 设置成左浮动，并将内部的 a 标签设置成 100px*60px，等于 li 的长宽也是 100px*60px：

.site_bar li {  float: left;}
.site_bar li a {    width: 100px;    height: 60px;    line-height: 60px;    text-decoration: none;    color: black;    text-align: center;}
.site_bar li a:hover {    background-color:red;    color: white;}

在 a 标签的样式中，可以注意到 line-height 这个属性，只要将它设置成模块一样的高度，就可以实现上下居中的效果，而不用使用顶部 margin 或 padding。

同时，因为 a 标签呈一个矩形模块的完整尺寸，我们就可以通过 hover 属性修改它的选中效果为背景深灰色，文字白色。

接着，看看 banner 的样式，它是一个会撑满全屏的图片，而我们完成这类效果，就一定要考虑到图片在浏览器进行伸缩时的效果。最常见的做法，就是保持图片大小不变，高度不变，左右的内容根据局浏览宽度的变动而隐藏、显示。

那么我们可以这么定义它们的样式：

.banner {    width: 100%;    height: 320px;    background: grey;    clear: both;}
.banner img {    margin:0 auto;}

这样，保持图片居中的位置，并因为上级 div 中 overflow 的值为隐藏，所以无论我们怎么拖动浏览器，图片的尺寸和位置都会居中。

但因为，我们导出的1280的宽，在分辨率 1920 宽的情况下两侧就有缺口，所以为了解决这样的问题我们通常会再添加一个背景色，保证显示的效果的合理，下方是实际显示效果。

在这里，页面上方的布局也就基本实现。

然后，我们再来实现内容区域的样式，标题这些我就不说了，我们先重点讲讲卡片模块。

卡片内部实际上有内边距的存在，所以我们可以使用 padding 属性，同时因为一行有四个卡片，每个卡片间有间距，所以也要使用 float 和 margin 属性。

.fea_card {    width: 176px;    height: 248px;    background: white;    margin: 0 11px 0 0;    float: left;    border-radius: 4px;    padding: 28px;}

要记住在这个定义下，我们使用了 padding，那就等于我们设置的长宽要减去四周的 28px，如果原来是 232px 宽，就要减左右总共 56px 的尺寸，得到 176px。

当这个标签的宽为 176px ，那么下方的其它 div 设置 100% 宽度时，它们的总宽也就只能是 176px。

还要注意的是，中间的卡片总共有4个，如果我们统一制定它们占用的空间是”宽“+”右边距“，那么就会有4个卡片宽和4个右边距，但实际显示效果中只有3个间距。

所以这种情况就可以使用行内样式的方法将第四个卡片的右边距清零，保证显示的合理性：

class="fea_card" style="margin-right: 0;">

在下方的多文本排列中，一定要重点关注原设计稿中的数值字体定义数值，包括行高、字号、字重，只要数据一致，我们就完全可以使用设计稿中的间距来定义 magin 数值。

.fea_card h3 {    margin: 20px 0 0;    line-height: 26px;    font-size: 20px;}
.fea_card p {    line-height: 26px;    font-size: 16px;    color: #8E9194;    margin: 12px 0 0;}

往下的独家分享模块同理，我们要实现 3*2 的矩阵排列，就要为卡片标签设置浮动和右边距、下边距，而每一行的最后一个，我们都要清除它的右边距，才能保证的显示的正常。

在这个模块中，底部用了一个 span 标签做父标签，b、i 分别表示作者和阅读量。

<span>      <b>酸梅干超人b>      <i>38.7wi>span>

这里要注意的是，b 和 i 作为调整文本样式的标签，并不是一定要遵守它原先的样式的，我们可以将它的加粗和倾斜去掉，作为不同字段标识用的标签。

并且，在阅读量上，有一个眼睛图标，我们也并不需要使用 img 标签去实现，只要在 CSS 中增加一个 padding-left，留出空白区域，然后用 background 的图片填充这个区域即可。

.own_share li b {    font-weight: normal;    font-size: 14px;    line-height: 20px;    color: #8E9194;    float: left;    padding: 0 0 0 16px;}
.own_share li i {    font-style: normal;    float: right;    line-height: 20px;    color: #C5C8CC;    padding: 0 16px 0 30px;    background: url(../img/eye.png) left center no-repeat;}

讲完这个模块，页脚我就也不再啰嗦下去了，大家可以自己在我们提供的源文件中查看对应的设置和属性即可。

HTML 和 CSS 的教学到这里就告一段落了，大家最后的任务，就是根据所学的内容，将本节课的案例完整的实现出来即可。

相信在实现的过程里大家肯定会碰到不少问题，所以一定要一边做一边思考，一边查看 CSS 手册或百度解决问题。相关的素材和已经完整实现好的案例在公众号中回复 ”前端“ 即可获取。

只要能把这节课案例完整实现出来，那么大家就已经掌握了前端的初级水平，没有特殊的情况也就不再需要深入学习下去了。

再提一次，学习这两门语言，并不是真的需要我们工作中写代码，而是通过了解前端样式的实现过程和思考逻辑，提升在团队中和前端工程师的协作效率，降低沟通成本，从而具备更强的职业竞争力。

写真正有用的干货不容易，如果觉得对你有帮助，那别忘记点下方的 ”在看“ 和分享！