用 CSS 進行繪圖和布局時，除了借助瀏覽器開發(fā)工具之外，還經常需要繪制一些輔助線，以便定位參考。今天就以第 170 號作品中使用的網(wǎng)格線為例，詳細講解一下輔助線的原理和畫法。

為了使輔助線明顯可見，把線的顏色設置為和背景對比強烈的白色，并且線也粗一些，在實際使用時，你應該降低輔助線與背景的對比并且使用細線。

分步圖解

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%);
}

網(wǎng)格線是一條一條線條組成的，所以要先畫出一條線，它的95%都是透明的，只有5%是白色的：

3、一條有尺寸的橫線

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

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

請把繪制網(wǎng)格線想象成是鋪地磚，首先要定義地磚的尺寸，這里用 1em 1em 定義了一塊方磚，同時讓磚塊不重復，所以只顯示出了孤單的一塊磚：

4、橫向平鋪地磚

div {
    background-repeat: repeat-x;
}

如果把地磚橫向平鋪，就能組合成一條水平線：

5、縱向平鋪地磚

div {
    background-repeat: repeat-y;
}

如果把地磚縱向平鋪，就能組合成一條垂直線。
錯！
縱向平鋪是像階梯一樣的效果：

6、橫向和縱向同時平鋪地磚

div {
    background-repeat: repeat;
}

橫向和縱向同時平鋪，就是像作業(yè)本一樣的多條橫線效果。注意，這時最頂端是沒有線的：

7、豎線平鋪效果

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

假如把地磚換成向右的豎線，即只把 to bottom 改為 to right ，其他不變，繪制出的就是一排一排的豎線。同樣注意，這時最左邊是沒有線的：

8、不完美的網(wǎng)格線

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步合并起來，網(wǎng)格線基本成型了，不過頂端和左端還缺少線條：

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 函數(shù)的第 1 個參數(shù)改成 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步不完美的網(wǎng)格線、頂端線、左端線都合起來，就是完美的網(wǎng)格線了，注意 background-repeart 的寫法，它有 4 個參數(shù)，分別對應 background-image 里的 4 條線：

干得漂亮！收工。

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

作者：comehope

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

Web標準并不排除表格的使用，但使用表格排版是不明智的，因為表格歸根結底只是一種顯示“數(shù)據(jù)”的方式。大家應該知道，在 Excel 中，表格就是用來放置數(shù)據(jù)信息的。使用表格顯示信息能讓瀏覽者閱讀起來更輕松，表達也更清楚。

XHTML 中的元素可分為三大類，下面分別介紹。

輔助布局設計元素:主要指div、span等，這類元素的主要功能是布局整個頁面。靈活使用這些元素，能讓網(wǎng)頁豐富多彩。

結構化元素或信息元素:主要指table、ul、pre、code等元素，是一種信息顯示與整理方式，如 table 是用來顯示表格信息的，ul是用來顯示列表信息的，當需要用表格或列表的時候，用這兩種方式來顯示是合理的。

為實現(xiàn)某些功能而添加的元素:如添加關鍵字的meta keyword，設置鏈接的a等。由上面的分析可知，符合Web標準的設計思路是，使用div等布局元素來制作頁面的布局、定位、色塊、圖像等，使用table、ul等元素來顯示頁面中需要展示的數(shù)據(jù)。這實際上是一個信息合理化整合的過程，什么地方該用什么元素還是照用不誤。

二、初學 Web 標準的幾個誤區(qū)

初次接觸 Web標準的用戶可能會受表格布局或其他一些問題的影響，常見問題及解決建議如下:

1.不要用傳統(tǒng)的表格思維來套div

用慣了表格的用戶可能會覺得，CSS 布局就是將原來用table的地方用div來代替，原來是 table 嵌套，現(xiàn)在是 div嵌套。這種觀點是錯誤的。

應該跳出表格布局的禁錮，拋棄一個td接一個td放置內容的思維方式。按前文所述，Web標準的目的是將內容和表現(xiàn)完全分離。即在加入表現(xiàn)之前，頁面里有的僅僅是內容，在沒有修飾的情況下，它就是一張有一些文字和圖像(圖像是指內容中的圖像，是有真正意義的圖像，而非修飾性的圖像)的簡單頁面，這些文字和圖像僅僅是依次羅列下來，只有結構，沒有任何樣式。當加人表現(xiàn)，將所有修飾的圖像作為背景，用CSS 來定義每一塊內容的位置、字體、顏色等時，才構成了一個完整的頁面。

這樣制作的頁面才是內容與表現(xiàn)完全分離的，即抽掉 CSS 文件，剩下的就只是干凈的內容。

2.不必為每塊內容都創(chuàng)建一個id

內容都是有結構的，相同結構的內容可以用同一個樣式來定義，如相同級別的標題、正文、圖像等。對干多次引用的樣式可以用cass 來定義，不需要全部用id:另外也不是說只能用 div 布局，在需要的時候，完全可以用p來代替。

至于僅僅為了行高、間距，或者一個修飾性圖像而增加的div，隨著大家對 CSS應用的熟練和理解，很快就會知道這是沒有必要的。希望大家多研究 CSS，做出最簡練、最有效的樣式表。