CSS深入理解学习笔记之vertical-align
1、vertical-align基本认识
支持的属性值:
①线类:baseline(默认),top,middle,bottom
②文本类:text-top,text-bottom
③上标下标类:sub,super
④数值百分比类:
数值和百分比的共性:ⅰ都带数字;ⅱ都支持负值;ⅲ行为表现一致(都是在baseline基础上上下偏移数值大小,百分比类以line-height计算,IE6/IE7下vertical-align百分比值不支持小数line-height)。
2、vertical-align起作用的前提
应用于inline水平以及“table-cell“元素。
默认状态下支持vertical-align的元素:图片、按钮、文字和单元格。
table-cell的vertical-align只会作用在自身,对子元素设置vertical-align是没有意义的:
3、vertical-align与line-height
流式布局多余的空白处理:
4、vertical-align底线、顶线、中线的行为表现
vertical-align:bottom
定义:①inline/inline-block元素:元素底部和整行的底部对齐;②table-cell元素:单元格padding边缘和表格行的底部对齐
vertical-align:top
定义:①inline/inline-block元素:元素顶部和整行的顶部对齐;②table-cell元素:单元格顶padding边缘和表格行的顶部对齐。
vertical-align:middle
定义:①inline/inline-block元素:元素的垂直中心点和父元素基线往上1/2x-height处对齐;②table-cell元素:单元格填充盒子相对于外面的表格行居中对齐。
inline/inline-block元素如果单纯的设置middle,由于文字的下沉特性,图片只能够近似垂直居中,如果想要完全垂直居中,font-size需要设置为0。
5、说说vertical-align:text-top/text-bottom
定义:盒子的顶部/底部和父级content area的顶部/底部对齐。
注:vertical-align仅与父级的font-size有关。
应用环境:
6、深入理解vertical-align:sub/super
html中<sup>和<sub>功效相同,同时字体也会略微缩小,是原字号的75%大小。
定义:提高/降低盒子的基线到父级合适的上/下标基线位置。
7、vertical-align前后不一的行为机制
应用:
注:关注当前元素和父级,前后并没有直接影响。
8、vertical-align糟糕的兼容性
chrome和IE7下就有明显的不同。
原因:①IE7下图文一体;②middle的解释有问题
解决方案:
使用inline-block破坏图文一体;
9、vertical-align的实际应用
⑴小图标和文字的对齐
使用vertical-align负值没有兼容性差异。
⑵不定尺寸图片或多行文字的垂直居中:①主体元素inline-block化;②0宽度100%高度辅助元素;③vertical-align:middle
CSS深入理解学习笔记之vertical-align的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解学习笔记之float
1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- CSS深入理解学习笔记之margin
1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...
- CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
- CSS深入理解学习笔记之line-height
1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...
- CSS深入理解学习笔记之relative
1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...
- CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
- CSS深入理解学习笔记之padding
1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...
- CSS深入理解学习笔记之border
1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...
随机推荐
- 2018年手机应用UI设计趋势预测
用户需求瞬息万变,而手机软件UI设计为适应变化的用户需求,也相应的发生着变化.但是,这并不意味着用户需求和UI设计趋势就是无迹可寻的.事实上,根据前几年的手机app界面设计变化的特点,尤其是2017年 ...
- Redis 部署主从哨兵 C#使用,实现自动获取redis缓存 实例1
源码示例下载链接: https://pan.baidu.com/s/1eTA63T4 密码: un96 实现目标:windows 下安装 一台master服务 一台salve redis服务器 并且哨 ...
- 【转载】Linux下的IO监控与分析
近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performance and Tuning G ...
- windows第四层负载均衡--基于NLB负载均衡
上面有一篇文章说windows第七层负载均衡,这次讲讲第四层负载均衡 TCP/IP协议族,第七层是应用层,第四层是传输层.第四层负载均衡主要通过IP进行转化. 一些优秀的第四层负载均衡软件,速度可以接 ...
- lodash源码分析之List缓存
昨日我沿着河岸/漫步到/芦苇弯腰喝水的地方 顺便请烟囱/在天空为我写一封长长的信 潦是潦草了些/而我的心意/则明亮亦如你窗前的烛光/稍有暧昧之处/势所难免/因为风的缘故 --洛夫<因为风的缘故& ...
- [转]Python 资源大全中文版
摘自:https://github.com/jobbole/awesome-python-cn 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesom ...
- C# 实现邮件发送
要实现邮件发送功能首先需要准备两三个邮箱测试,在这里呢准备了2个QQ邮箱和一个微软邮箱,详细请看代码. 我这里是使用QQ邮箱向另外两个邮箱发送邮件的,在开始写代码之前你需要登录你QQ邮箱进行以下几个操 ...
- 同时安装python2和python3
Windows 10 上已经安装了Anaconda2 和 python2.7 [工作需要] 想安装Anaconda3 和 python3 [学习需要] 以 Anaconda2 为主,3为辅. 要点: ...
- c/s与b/s 动态网站与静态网站 (网站编码统一“UTF-8”)
1.c/s和b/s 第一张图是b/s 可以随时随地的浏览 (在服务器增加网页就能增加功能,只要改变网页就能使用户同步更新,共享性也强,开发也简单,在广域网和局域网都能建造b/s结构,然后通过int ...
- UEP-下拉
uep建立下拉 静态下拉: ①private Map<String,String> beanMap = new HashMap<String,String>(); //gett ...