整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
德經第二十二章中有一句是說“少則得，多則惑”，這句話的意思是：少取則真得，貪多則反而導致自身的混亂。結合我親身經歷，更容易理解這句話的意思。
有一段時間，我們天都學習10個小時，這種情況一直持續了大半個月。可是效果卻幾乎等于沒有，這段時間內每天都會有大量的信息涌入你的腦袋，在學的那一刻，你感覺你已經完全會了。但是過個一兩天，你卻完全不記得你到底學過些什么，像失憶了似的。
艾賓浩斯記憶曲線也告訴我們，大腦的記憶是一個緩慢的過程，想要對某一知識記憶深刻，就需要不斷地重復練習。直到隨時隨地拿來就用的地步，你就再也不會忘記了。
為什么說少則得，多則惑呢？每天只學一點，練習好幾遍，把這個知識點刻到腦子里面去，這樣日積月累你會發現你已經學會了很多。每天學習很多知識點，很少時間去練習，過段時間你會發現你什么都沒有記住，到用的時候根本想不起來，還得返回頭再去學習一遍。徒增學習成本，也就是多則惑的道理。
好了言歸正傳，今天我們來學習html中的表格和表單，這兩個可不是一個東西哦。
表格：excel表格知道吧，橫行豎起列的那種表格。看圖：
上面是一個9行2列的表格，在html里面也有這種表格，我們來使用html的table表格標簽來實現一個5行3列的表格。
上圖中table標簽表示這是一個表格，tr表示一行，圖中我寫了五行，都用紅圈標注了出來，每個tr里面又包含著td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。
在瀏覽器中的效果：
和我們想象中的樣子好像有點不一樣，沒有格子，這是因為我們沒有設置的緣故，table標簽允許你通過border屬性來設置邊框（也就是格子），那我們來給它設置一個邊框吧。
通過給table標簽添加border="1"，就可以讓表格有邊框了，來看看瀏覽器中的效果：
還是有點別扭，我腦海里面的表格應該是和艾賓浩斯記憶曲線的那張表格一樣才對啊，現在的這個表格有點鏤空的感覺，第1行的第1列和第1行的第2列，也就是“關羽”、“男”之前有距離，如何把這個距離去掉呢？我們可以通過table標簽的cellspacing屬性把距離去掉，試一下：
加了cellspacing="0" 屬性后，瀏覽器中的效果如下：
當然了， table標簽的cellspacing屬性的不光可以等于0，還可以等于其他值，比如我們就是希望有距離，那么我們設置成20試一下：
瀏覽器中的效果：
cellspacing屬性的值應該取多少，按照你的需求來設置就好了。
現在還有一個問題，我覺得每個單元格的太小了，也就是“關羽”這個格子的邊框和“關羽”這兩個字貼得太緊了，一點都不好看，我們可以讓他稍微有點距離，那樣看起來應該比較美觀一點。這個需求可以通過table標簽的cellpadding屬性來設置，其實也就是設置內邊距，關于內邊距的概念我們在《踏上編程之路的必經之路之html篇三》中講解過，如果忘記的同學可以返回去看一下。
我們將cellpadding設置為10，在瀏覽器中的效果如下：
現在整個表格感覺是豎起來的，能不能讓他感覺是橫著呢？table標簽允許你調整它的寬度，只要寬度夠了，感覺起來自然就是橫的了。我們通過table標簽的width屬性來調整表格的寬度：
調整表格的寬度為600，瀏覽器中的效果如下：
表格中的文字現在是左對齊，也就是靠近單元格的左邊，我們可以讓它居中，或者靠右對齊（右對齊），文字的對齊方式可以通過tr標簽的align屬性來控制：
注意文字對齊方式，是給tr標簽（也就是table的行標簽）設置了align屬性，不是給table，不要寫錯地方了。align="center"就是讓文字居中，align="right"就是讓文字右對齊，如果不寫，默認是左對齊。
設置了文字對齊方式后，瀏覽器中的效果如下：
最我們整體調整一下，我需要有邊框（border="1"，設置為0就是沒有邊框），單元格之間不要距離（cellspacing="0"，設置成其它值就是有距離），內邊距需要5（cellpadding="5"），表格寬度需要400（width="400"），文字統一都是居中對齊（table標簽的tr標簽上面設置align="center"）,整體設置后的代碼如下：
瀏覽器中的效果如下：
其實table標簽也有一個align屬性，它可以讓整表格在瀏覽器中的居中、靠左或者靠右對齊，有興趣的同學可以自己嘗試一下。
最后提醒一句，代碼中的各種標簽和標簽的屬性還有單雙引號，都必須是英文的，如果你寫成中文的，是不正確的。
舉個例子：
良好的行動力，是成功的一半，動手練起來。
格對齊
使用Bootstrap的柵格對齊樣式,輕松實現垂直方向和水平方向的各種對齊效果，只需要引入Bootstrap的樣式，并在頁面中指定相應的Class名稱即可。
2.各列中可指定如下樣式
示例
下面示例的柵格布局,只有一行,在該行中指定列居中方式為垂直居中。該行總共有三列，各列也可以分別指定垂直對齊方式。第一列指定向上對齊，第二列遵循行指定的對齊方式，第三列指定向下對齊。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" > </head> <body> <div class="container"> <div class="row bg-info align-items-center" style="height: 100vh;"> <div class="col bg-primary align-self-start" style="height: 20vh;"> 向上對齊 </div> <div class="col bg-secondary" style="height: 20vh;"> 遵循行指定的對齊方式 </div> <div class="col bg-success align-self-end" style="height: 20vh;"> 向下對齊 </div> </div> </div> </body> </html>
柵格對齊之垂直對齊示例
示例
示例的柵格為一行，三列，每列占六分之一的行寬
<!DOCTYPE html> <html> <head> <link rel="stylesheet" > </head> <body> <div class="container"> <div class="row bg-info justify-content-start" style="height: 100vh;"> <div class="col-2 bg-success" style="height: 20vh;"> </div> <div class="col-2 bg-danger" style="height: 20vh;"> </div> <div class="col-2 bg-dark" style="height: 20vh;"> </div> </div> </div> </body> </html>
水平對齊之靠左對齊
水平對齊之居中對齊
水平對齊之靠右對齊
水平對齊之均勻排列
水平對齊之分散排列
技術等級】初級
【承接文章】《CSS段落行高，竟然能夠實現垂直居中功能，神奇的CSS技術》
本文重點講解CSS技術中文本樣式的 vertical-align 屬性的詳細用法。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。
vertical-align屬性的用法較為復雜，該屬性的取值較多，不了解這個屬性用法的學習者，一定要堅持把這篇文章讀完。
一、設置垂直方向的對齊方式：
CSS技術利用 vertical-align 屬性來設置內聯元素的垂直對齊方式
該屬性的功能是：設置內聯元素或內聯塊元素相對于所在行其他元素的垂直對齊方式。這里在對齊時，都是考慮基線的對齊，即內聯元素的基線相對于所在行其他元素的基線的垂直對齊方式。
這里需要注意的一定要是“內聯元素”或“內聯塊元素”。
【有關“內聯元素”的知識，可以參考小海老師前面寫的《CSS段落對齊方式，系統認識塊級元素與內聯元素，CSS前端進階篇》一文】
該屬性的取值可以有以下幾種：
帶有單位的數值，可以取負值，在基線對齊的基礎上，內聯元素向下移動一定的距離（正值）或者向上移動一定的距離（負值）。
%，可以取負值，在基線對齊的基礎上，內聯元素向下移動line-height屬性的百分比的距離（正百分比）或者向上移動line-height屬性的百分比的距離。
baseline，【默認值】基線對齊，內聯元素的基線與所在行的其他元素的基線對齊。
sub，上標。
super，下標。
top，頂部對齊，內聯元素的頂部與所在行的其他元素中最高的元素的頂部對齊。
text-top，文本頂部對齊，內聯元素的頂部與所在行的文字頂部對齊。
middle，中部對齊，內聯元素的中部與所在行其他元素的中部對齊。
bottom，底部對齊，內聯元素的底部與所在行的其他元素中最低的元素的底部對齊。
text-bottom，文本底部對齊，內聯元素的底部與所在行的文字底部對齊。
二、基線垂直對齊：
要想深入了解vertical-align屬性各項取值的含義，首先，讓我們先看一看什么是基線對齊。
例1：在段落標記<p></p>內部，放置一個圖片和一行文字。HTML代碼如下。
<p>
<img src="images/a.jpg" /> 小海前端
</p>
得到的效果如下圖所示，仔細觀察下圖：圖片底部和文字底部是對齊的嗎？
例1的最終效果
仔細觀察，其實它們底部并沒有完全對齊。如果將文字的字號放大，可以看得更加明顯。
將例1中的文字放大后的效果
上圖中，由于文字字號的變大，在圖片中只呈現了一個“小”字，但是我們完全可以看出，圖片的底部并沒有和文字的底部對齊。而對齊文字的這個位置實際上是文字的“基線”。
【有關“基線”的知識，可以參考小海老師前面寫的《CSS段落行高，竟然能夠實現垂直居中功能，神奇的CSS技術》一文】
原來，圖片本身屬于內聯元素，而 內聯元素的vertical-align屬性的默認取值為baseline，即基線對齊，也就是圖片的基線（底部）默認和文字的基線對齊了。
三、取值為“帶有單位的數值”：
如果vertical-align屬性的取值為帶有單位的數值，則也是在基線對齊的基礎上開始上下移動一定的距離。
如果圖片的vertical-align屬性取值為0px，則依然為基線對齊的位置。
如果圖片的vertical-align屬性取值為5px，則在基線對齊位置的基礎上向下移動5px的距離。
如果圖片的vertical-align屬性取值為-5px，則在基線對齊位置的基礎上向上移動5px的距離。
四、取值為“百分比 ”：
如果vertical-align屬性的取值為百分比，則也是在基線對齊的基礎上開始上下移動一定的距離。
那么，問題來了。
百分比意味著移動多少像素的距離呢？
百分比又是以什么距離為基準的呢，即誰的百分比呢？
我們前端開發工程師一定要記住：vertical-align屬性的百分比取值不是父元素高度的百分比，而是 line-height 屬性取值的百分比。
即：vertical-align屬性的百分比取值是以line-height屬性的取值為基準的，及移動距離為vertical-align屬性的絕對值乘以line-height屬性取值的距離數。
假設：容器的line-height屬性取值為20px，則：
如果圖片的vertical-align屬性取值為0%，則依然為基線對齊的位置。
如果圖片的vertical-align屬性取值為50%，則在基線對齊位置的基礎上向下移動(20px*50%)的距離，即向下移動10px。
如果圖片的vertical-align屬性取值為-50%，則在基線對齊位置的基礎上向上移動(20px*50%)的距離，即向上移動10px。
五、取值為top和text-top：
例2：我們在例1的基礎上在段落<p></p>中再添加一個圖片，并設置圖片的高度大于文本。
仔細閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
從代碼中可以看出，文字“小海前端”左側的圖片設置了vertical-align屬性，并取值為top。根據文字“小海前端”左右的兩張圖片的width屬性可知，右側圖片的高度肯定比較高。
效果如下圖所示。
例2的最終效果
原因是：vertical-align屬性取值為top是指讓設置了該屬性的元素頂部和同行周圍元素中最高元素的頂部對齊。從圖中可知，顯然最高的元素是右側的圖片，因此就呈現為上圖中的外觀了。
而右面的圖片沒有設置vertical-align屬性，因此依然為“基線對齊”，即右側圖片的底部對齊文字的基線。
例3：在例2的基礎上，我們將右側圖片的高度縮小至比文字還小的程度，那可想而知，左側圖片就應該與文字頂部對齊了。
仔細閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />
</p>
從代碼中可以看出，右側圖片的寬度由500改為了100，同時高度也會隨之等比縮小。
最終效果如下圖所示：
例3的最終效果
例4：在例2的基礎上，我們調整左側圖片vertical-align屬性的取值為text-top，則HTML代碼如下。
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
則最終的顯示效果如下圖所示。
例4的最終效果
原因是：text-top屬性是要求內聯元素與同行內文本的頂部對齊。因此，就出現了上圖中的效果。
而右面的圖片沒有設置vertical-align屬性，因此依然為“基線對齊”，即右側圖片的底部對齊文字的基線。
vertical-align屬性還具備bottom和text-bottom取值，和這兩個頂部對齊（top和text-top）的含義是類似的，希望同學們自己在電腦上嘗試一下。
下一篇文章中，小海老師會為大家講解一個vertical-align屬性和line-height屬性的應用，用于去掉圖片在容器中放置時，底部產生的小距離。這是前端開發中非常經典的bug解決方案，對于希望深入了解前端開發的學習者真的是非常重要。
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上所寫的這些文章都是從前端開發的基礎開始一步一步講起的。小海老師非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我精心整理和系統歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
