一、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;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有