用 CSS 进行绘图和布局时，除了借助浏览器开发工具之外，还经常需要绘制一些辅助线，以便定位参考。今天就以第 170 号作品中使用的网格线为例，详细讲解一下辅助线的原理和画法。

为了使辅助线明显可见，把线的颜色设置为和背景对比强烈的白色，并且线也粗一些，在实际使用时，你应该降低辅助线与背景的对比并且使用细线。

分步图解

1、定义容器

div {
    font-size: 50px;
    width: 6em;
    height: 4em;
    background-color: teal;
}

假设你有一个 <div> 容器，容器里是否有元素都可以，当前演示为了突显辅助线，暂时让容器里空空如也：

2、一条基本的横线

div {
    background-image: linear-gradient(to bottom, transparent 95%, white 95%);
}

网格线是一条一条线条组成的，所以要先画出一条线，它的95%都是透明的，只有5%是白色的：

3、一条有尺寸的横线

div {
    background-size: 1em 1em;
    background-repeat: no-repeat;
}

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

请把绘制网格线想象成是铺地砖，首先要定义地砖的尺寸，这里用 1em 1em 定义了一块方砖，同时让砖块不重复，所以只显示出了孤单的一块砖：

4、横向平铺地砖

div {
    background-repeat: repeat-x;
}

如果把地砖横向平铺，就能组合成一条水平线：

5、纵向平铺地砖

div {
    background-repeat: repeat-y;
}

如果把地砖纵向平铺，就能组合成一条垂直线。
错！
纵向平铺是像阶梯一样的效果：

6、横向和纵向同时平铺地砖

div {
    background-repeat: repeat;
}

横向和纵向同时平铺，就是像作业本一样的多条横线效果。注意，这时最顶端是没有线的：

7、竖线平铺效果

div {
    background-image: linear-gradient(to right, transparent 95%, white 95%);
    background-size: 1em 1em;
    background-repeat: repeat;
}

假如把地砖换成向右的竖线，即只把 to bottom 改为 to right ，其他不变，绘制出的就是一排一排的竖线。同样注意，这时最左边是没有线的：

8、不完美的网格线

div {
    background-image:
        linear-gradient(to bottom, transparent 95%, white 95%),
        linear-gradient(to right, transparent 95%, white 95%);
    background-size: 1em 1em;
    background-repeat: repeat;
}

把第6步和第7步合并起来，网格线基本成型了，不过顶端和左端还缺少线条：

9、一段顶端线

div {
    background-image: 
        linear-gradient(to top, transparent 95%, white 95%);
    background-size: 1em 1em;
    background-repeat: no-repeat;
}

来解决顶端线的问题，先画出一段顶端线。这段代码和第3步极相似，仅仅是 to bottom 改成了 to top：

10、一条顶端线

div {
    background-repeat: repeat-x;
}

把这一段顶端线水平平铺，就是一条定位在顶部的水平线：

11、一段左端线

div {
    background-image: 
        linear-gradient(to left, transparent 95%, white 95%);
    background-size: 1em 1em;
    background-repeat: no-repeat;
}

用类似的办法解决左端线问题，先定义一段左端线，注意 linear-gradient 函数的第 1 个参数改成 to left 了：

12、一条左端线

div {
    background-repeat: repeat-y;
}

平铺这段左端线，就得到了一条紧挨容器左侧的竖线：

13、All in one 的完美效果

div:nth-child(13) {
    background-image: 
        linear-gradient(to bottom, transparent 95%, white 95%),
        linear-gradient(to right, transparent 95%, white 95%),
        linear-gradient(to top, transparent 95%, w hite 95%),
        linear-gradient(to left, transparent 95%, white 95%);
    background-size: 1em 1em;
    background-repeat: repeat, repeat, repeat-x, repeat-y;

好了，我们把第8步不完美的网格线、顶端线、左端线都合起来，就是完美的网格线了，注意 background-repeart 的写法，它有 4 个参数，分别对应 background-image 里的 4 条线：

干得漂亮！收工。

原文链接：https://segmentfault.com/a/1190000021507641

作者：comehope

、使用 div 后，什么时候使用 table

Web标准并不排除表格的使用，但使用表格排版是不明智的，因为表格归根结底只是一种显示“数据”的方式。大家应该知道，在 Excel 中，表格就是用来放置数据信息的。使用表格显示信息能让浏览者阅读起来更轻松，表达也更清楚。

XHTML 中的元素可分为三大类，下面分别介绍。

辅助布局设计元素:主要指div、span等，这类元素的主要功能是布局整个页面。灵活使用这些元素，能让网页丰富多彩。

结构化元素或信息元素:主要指table、ul、pre、code等元素，是一种信息显示与整理方式，如 table 是用来显示表格信息的，ul是用来显示列表信息的，当需要用表格或列表的时候，用这两种方式来显示是合理的。

为实现某些功能而添加的元素:如添加关键字的meta keyword，设置链接的a等。由上面的分析可知，符合Web标准的设计思路是，使用div等布局元素来制作页面的布局、定位、色块、图像等，使用table、ul等元素来显示页面中需要展示的数据。这实际上是一个信息合理化整合的过程，什么地方该用什么元素还是照用不误。

二、初学 Web 标准的几个误区

初次接触 Web标准的用户可能会受表格布局或其他一些问题的影响，常见问题及解决建议如下:

1.不要用传统的表格思维来套div

用惯了表格的用户可能会觉得，CSS 布局就是将原来用table的地方用div来代替，原来是 table 嵌套，现在是 div嵌套。这种观点是错误的。

应该跳出表格布局的禁锢，抛弃一个td接一个td放置内容的思维方式。按前文所述，Web标准的目的是将内容和表现完全分离。即在加入表现之前，页面里有的仅仅是内容，在没有修饰的情况下，它就是一张有一些文字和图像(图像是指内容中的图像，是有真正意义的图像，而非修饰性的图像)的简单页面，这些文字和图像仅仅是依次罗列下来，只有结构，没有任何样式。当加人表现，将所有修饰的图像作为背景，用CSS 来定义每一块内容的位置、字体、颜色等时，才构成了一个完整的页面。

这样制作的页面才是内容与表现完全分离的，即抽掉 CSS 文件，剩下的就只是干净的内容。

2.不必为每块内容都创建一个id

内容都是有结构的，相同结构的内容可以用同一个样式来定义，如相同级别的标题、正文、图像等。对干多次引用的样式可以用cass 来定义，不需要全部用id:另外也不是说只能用 div 布局，在需要的时候，完全可以用p来代替。

至于仅仅为了行高、间距，或者一个修饰性图像而增加的div，随着大家对 CSS应用的熟练和理解，很快就会知道这是没有必要的。希望大家多研究 CSS，做出最简练、最有效的样式表。