MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » vertical-align 跟 img属性 和 鼠标样式

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

www.MyException.Cn  网友分享于:2013-08-09  浏览:0次
vertical-align 和 img属性 和 鼠标样式

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

 

文章评论

每天工作4小时的程序员
每天工作4小时的程序员
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员必看的十大电影
程序员必看的十大电影
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
总结2014中国互联网十大段子
总结2014中国互联网十大段子
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
代码女神横空出世
代码女神横空出世
Java程序员必看电影
Java程序员必看电影
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
我是如何打败拖延症的
我是如何打败拖延症的
老程序员的下场
老程序员的下场
中美印日四国程序员比较
中美印日四国程序员比较
编程语言是女人
编程语言是女人
程序员都该阅读的书
程序员都该阅读的书
旅行,写作,编程
旅行,写作,编程
程序员的鄙视链
程序员的鄙视链
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
漫画:程序员的工作
漫画:程序员的工作
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
那些争议最大的编程观点
那些争议最大的编程观点
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
如何成为一名黑客
如何成为一名黑客
鲜为人知的编程真相
鲜为人知的编程真相
10个调试和排错的小建议
10个调试和排错的小建议
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员应该关注的一些事儿
程序员应该关注的一些事儿
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
我的丈夫是个程序员
我的丈夫是个程序员
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
一个程序员的时间管理
一个程序员的时间管理
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有