一、vertical-align
一）定义：定义行内元素的基线相对于该所在基线的垂直对齐。（只针对行类块inline/inline-block/<img>，块级不适用！）
二）语法：
三）某些数值：
四）何为基线呢？？关于基线 有这样的说法：
像不像我们小时候写的英文字母的线，实在是太TMD像了，对，这就是，而我们经常对准线来写的称为基线baseline。。。
五）那么，我的vertical-align为什么打死都不起作用呢？？此时 心中有句mmp不知当不当讲？
这就要说到vertical-align特性了，这得认识到 vertical-align 是依赖于 inline 或者是 inline-block （table-cell也可以理解为inline-block水平）属性的元素。
所谓inline-block水平的元素，就是既可以与inline水平元素混排，又能设置高宽属性的元素。例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
六）说到重点了，我的vertical-align怎样才起作用呢？
1.当只有一个元素的时候：
大致地说下：我弄了个大的盒子，然后往里面放了个红色的小盒子，为了好看点，我先让红色的小盒子 {text-align:center;} 水平居中了，于是我的样式和body部分如下：
<div> <span></span> </div>
1 div{width:800px; height:800px; border:4px solid blue;text-lign:center;} 2 span{display:inline-block;width:200px;height:200px;background:red;}
正所谓，除了vertical-align还可以想想其他方法嘛，所以，我想到了用line-height（因为 inline-block 可以用line-height属性），于是，我给 <div>
加了个 {line-height:800px;} ，于是就成了这样。
此时心中我有一万只草泥马奔腾而过。。。
然后，我发现， line-height 与 vertical-align 缺一不可。。于是我为 <span> 加了个蓝buff，呵呵，王天不负有心人哇，更何况我有心又有肺。它终于成功了。
div{width:800px; height:800px;border:4px solid blue;text-align:center; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:middle;}
2.当有两个元素的时候相互碰撞。。。（额。。。貌似。。。）
别废话，直接例子：首先嘛，继续用上面的例子，在上面例子的基础上我在 <div> 中加了一行文字： <a>Fuck</a> ，为了好看，我给了样式： a{color:green;} div{font-size:100px;} 于是就有了这样。。
<div> <span></span> <a>Fuck</a> </div>
div{width:800px; height:800px; border:4px solid blue;text-lign:center;font-size:100px; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:middle;}
a{color:green;}
实例一：Middle 当我发现我的浏览器下的红色盒子 <span> 原来还有 {vertical-align:middle;} 的时候，我决定假装没看见，于是，红色的盒子的基部基于文字的基线对齐。。就是我们说的居中。
实例二：Bottom 抱着好奇的心，我改成了 {vertical-align: bottom;} 时，于是，它变成了
div{width:800px; height:800px; border:4px solid blue;text-lign:center;font-size:100px; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align: bottom;}
a{color:green;}
实例三：Text-bottom 在选项中见到了与文本相关的字眼text，于是我再次尝试了下，改成了 {vertical-align:text-bottom;} ，它就这样了
div{width:800px; height:800px; border:4px solid blue;text-lign:center;font-size:100px; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:text-bottom;}
a{color:green;}
等等，what？？？突然发现了不得了的事情了，妖兽了，我发现了新大陆了。
—————对齐方式为 {text-align:top;} {text-align:middle;} {text-align:bottom;}受父级 line-height 的影响。。。
为了很好的解释原因，我只给了父级 div{line-height: 500px}，你会发现红色盒子和Fuck的位置变了,看到没有，它们都上移了
div{width:800px; height:800px;border:4px solid blue;text-align:center;font-size:100px; line-height:500px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:middle;}
—————凡是与文字对齐 {text-align:text-top;} {text-align:text-bottom;} 受父级font-size的影响。。。。
为了验证，我只增大了父级的字体大小到200px于是，它就成这样了，看到了吗，看到红色盒子位置还有Fuck的位置的变化了吗？？
div{width:800px; height:800px;border:4px solid blue;text-align:center;line-height:800px; font-size:200px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:text-bottom;}
a{color:green;}
mmp。。突然发现其实我可以直接给Fuck一个背景色就可以一眼看出底线了。。。mmp。。。
预知下回如何，请听下回小晴哥前端小白的前端日记。。。未完待续。。还得继续补补
二、<img>
一）定义：<img> 标签创建的是被引用图像的占位空间。<img> 标签并不会在网页中插入图像，而是从网页上链接图像。
二）属性：
别看那么多了，有些不要，就不要了吧，let it go~
三）特性：
0.属于行内块元素inline-block；
1.支持宽高；
2.支持横排显示；
3.支持 margin ，但不支持 {margin:auto；} 来居中；
4.支持 {text-align:center;} ,给父级；
5.支持line-height；
6.中间的空格被解析，可以用 {font-size：0；} 也可以用 {vertical-align：middle;} 来解决这个空格buggy。
<img>就复习到这了吧。对img熟悉到鼻孔都闻出味道了。。
——有需要再补补
三、cursor
本宝宝觉得，cursor真心不用多看了。。。。。。。。。。但只写一点。。。。。 {cursor: url('mouse.cur'),pointer;} 要想用系统以外的 （ 鼠标.cur ） 样式，后面一定要一定要一定要带上系统有的充当备胎，不然会GG的！！
cursor: url('mouse.cur'),pointer;
- 还没有人评论，欢迎说说您的想法！
客服
