整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
德经第二十二章中有一句是说“少则得，多则惑”，这句话的意思是：少取则真得，贪多则反而导致自身的混乱。结合我亲身经历，更容易理解这句话的意思。
有一段时间，我们天都学习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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </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小时内与您取得联系。
