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;
转载于:https://www.cnblogs.com/supersswhite/p/7282938.html
vertical-align 和 img属性 和 鼠标样式相关推荐
- WEB代码:CSS字体样式、文本属性、背景样式、边框属性、鼠标样式、列表样式
1.字体样式: 1.字体样式 font-family 2.字体大小 font-size 3.字体类型 font-style 4.字体粗细 font-weight span{font-family: 微 ...
- html实现游戏鼠标样式,巧妙运用CSS立刻改变鼠标的样式
巧妙运用CSS立刻改变鼠标的样式 互联网 发布时间:2008-10-17 19:27:05 作者:佚名 我要评论 用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同 ...
- 鼠标样式:cursor属性值(含自定义光标图案) - 代码篇
文章目录 鼠标样式:cursor属性值(含自定义光标图案) - 代码篇 1. 常用取值 · 举例: 2. 更多取值 · 截图参考 `(部分图标显示,因电脑系统而异)`: 3. 自定义cursor图片: ...
- html鼠标样式怎么去掉,CSS鼠标样式cursor属性怎么设置
CSS鼠标样式可以通过设置cursorg属性,从而达到鼠标在对象上移动的鼠标样式. 一般在网页中一些特殊版块布局时,会遇到这类需求,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cur ...
- html中怎么改变鼠标形状,css鼠标样式语法及20种可选值(属性)
我们对Windows各种各样的鼠标样式都不陌生,当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化.而在网页上往往只有当鼠标在超级链接上时才出现一个手形 ...
- web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- 13 【精灵图 图标字体 CSS三角 鼠标样式 溢出省略号】
20.精灵图 20.1为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送 请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- CSS3新的鼠标样式介绍
在Web开发的早期,随着新技术的不断涌现,一切都让人兴奋.但是我们在过去十年里经历了一个技术的停滞期,直到由于HTML5的出现,Web开发再次让人着迷.特别是CSS3正在迅速发展,你会在其规范里发现许 ...
最新文章
- tasklist命令参数应用详细图解
- endnote教程:参考文献出现{zhang,2020,#365} 修改方法
- 使用c++制作微服务计算服务
- myeclipse-common 找不到
- linux硬盘分区PPT,linux下的硬盘分区详解.doc
- node js npm grunt安装,elasticsearch-head 5.X安装
- 【java】本地客户端内嵌浏览器1 - Swing、SWT、DJNativeSwing、javaFX
- 复盘:pearson皮尔森相关系数和spearman斯皮尔曼相关系数的区别
- 求解函数优化问题的改进布谷鸟搜索算法
- 谷歌金山词霸CBSText.dll文件丢失解决方法
- 常用网络测试的命令的实验报告计算机网络,实验一常用网络命令的使用实验报告-20210409133504.docx-原创力文档...
- 【游戏安利】 益智休闲类游戏安利
- 修改yum源带来的问题 curl: (35) Cannot communicate securely with peer: no common encryption algorithm(s).
- oracle-12801,ORA-12801
- FortiGate常用命令
- android 6g 有必要吗,手机6g运存有必要吗
- mysql快速建表工具_我所知道的MYSQL快速建表的3种方法
- 下载频道2013下半年超人气精华资源汇总网址
- ds310服务器运行灯不亮,【群晖 DS218+ 2盘位 NAS网络存储服务器外观设计】按键|usb2.0口|电源键|指示灯|风扇_摘要频道_什么值得买...
- 使用TRA命令进行磁带备份的命令汇总(转)
热门文章
- MySQL日期函数的用法几则
- SQL 数据完整性 基础知识
- 【Python自学笔记】10个爬虫入门实例,附源码与注释
- Python入门系列之字符编码
- 学会Python后能找到什么工作,待遇如何?
- Python人脸识别+手机推送,老板来了你就会收到短信提示
- 接收服务器显示帧控制错误,Websocket连接关闭,出现错误“接收到意外的继续帧”...
- visualstudio发布网站到服务器,发布到网站 - Visual Studio (Windows) | Microsoft Docs
- 管理数百个Kubernetes集群需要什么?
- 详解Redis分布式锁