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的更多相关文章

  1. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  2. CSS深入理解学习笔记之float

    1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. CSS深入理解学习笔记之margin

    1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...

  4. CSS深入理解学习笔记之overflow

    1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...

  5. CSS深入理解学习笔记之line-height

    1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...

  6. CSS深入理解学习笔记之relative

    1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...

  7. CSS深入理解学习笔记之z-index

    1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...

  8. CSS深入理解学习笔记之padding

    1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...

  9. CSS深入理解学习笔记之border

    1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...

随机推荐

  1. 2018年手机应用UI设计趋势预测

    用户需求瞬息万变,而手机软件UI设计为适应变化的用户需求,也相应的发生着变化.但是,这并不意味着用户需求和UI设计趋势就是无迹可寻的.事实上,根据前几年的手机app界面设计变化的特点,尤其是2017年 ...

  2. Redis 部署主从哨兵 C#使用,实现自动获取redis缓存 实例1

    源码示例下载链接: https://pan.baidu.com/s/1eTA63T4 密码: un96 实现目标:windows 下安装 一台master服务 一台salve redis服务器 并且哨 ...

  3. 【转载】Linux下的IO监控与分析

    近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performance and Tuning G ...

  4. windows第四层负载均衡--基于NLB负载均衡

    上面有一篇文章说windows第七层负载均衡,这次讲讲第四层负载均衡 TCP/IP协议族,第七层是应用层,第四层是传输层.第四层负载均衡主要通过IP进行转化. 一些优秀的第四层负载均衡软件,速度可以接 ...

  5. lodash源码分析之List缓存

    昨日我沿着河岸/漫步到/芦苇弯腰喝水的地方 顺便请烟囱/在天空为我写一封长长的信 潦是潦草了些/而我的心意/则明亮亦如你窗前的烛光/稍有暧昧之处/势所难免/因为风的缘故 --洛夫<因为风的缘故& ...

  6. [转]Python 资源大全中文版

    摘自:https://github.com/jobbole/awesome-python-cn 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesom ...

  7. C# 实现邮件发送

    要实现邮件发送功能首先需要准备两三个邮箱测试,在这里呢准备了2个QQ邮箱和一个微软邮箱,详细请看代码. 我这里是使用QQ邮箱向另外两个邮箱发送邮件的,在开始写代码之前你需要登录你QQ邮箱进行以下几个操 ...

  8. 同时安装python2和python3

    Windows 10 上已经安装了Anaconda2 和 python2.7 [工作需要] 想安装Anaconda3 和 python3 [学习需要] 以 Anaconda2 为主,3为辅. 要点: ...

  9. c/s与b/s 动态网站与静态网站 (网站编码统一“UTF-8”)

    1.c/s和b/s 第一张图是b/s  可以随时随地的浏览  (在服务器增加网页就能增加功能,只要改变网页就能使用户同步更新,共享性也强,开发也简单,在广域网和局域网都能建造b/s结构,然后通过int ...

  10. UEP-下拉

    uep建立下拉 静态下拉: ①private Map<String,String> beanMap = new HashMap<String,String>(); //gett ...