当前位置: 代码迷 >> 综合 >> vertical-align 和 img属性 和 鼠标样式
  详细解决方案

vertical-align 和 img属性 和 鼠标样式

热度:27   发布时间:2023-11-19 09:30:18.0

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

 

  相关解决方案