一些属性解释。

几个自己认为常用到的属性

baseline:默认

数值，px 百分比等是元素相对于基线偏移值，负数为向下偏移，正数为向上；

text-top:把用vertical属性元素的顶端与父元素中的文字顶端对齐；

text-bottom：把用vertical属性元素的底端与父元素中的文字底端对齐；

这里说的父元素中的文字底\顶端也包含了在父元素中的其他同级子元素的文字，比如parent 这个DIV中包含了A--采用vertical-align的元素和B，B元素中有段文字。

那么text-bottom、text-top就是对齐的这段文字

top：把用vertical属性元素的顶端与父元素中的line-box顶端对齐；

bottom：把用vertical属性元素的底端与父元素中的line-box底端对齐；

line-box指的是这个元素的content。content高度为其内容撑起来的高度或则是直接设定其值的高度。

换言之,top的意思就是把元素的顶端与最高的同级子元素的顶端对齐

bottom就是content的底端对齐；

vertical-align 笔记的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  3. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. HighCharts学习笔记（一）HighCharts入门

    一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...

  7. 转 HighCharts笔记之: Bar Chart

    最近需要做一些Web图标,研究了几个开源的第三方工具后,最后决定使用HighCharts开发: Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是 ...

  8. [笔记]学习HighCharts的使用（不错的web图表插件）

    最近有一个小项目需要用到折线图.到处请教了一下,有人给我推荐了highcharts.感觉还不错,就稍微学习下.这里记录一下学习的过程. 网上相关的内容还不少,我就说一下我学习的内容. 看的第一篇文章& ...

  9. HTML之学习笔记（八）表格

    Html的表格使用table标签.table标签含有tr(table row)子标签,tr又含有th(table head)和td(table data)子标签这样的嵌套结构 代码演示 <tab ...

  10. Python学习笔记四：主要图表

    图表部分,很多要记忆的.以下来自于培训材料的记录. 但我个人觉得更重要的是要根据业务特点确定用什么样的图表,然后再去查具体的参数,光记住参数意义不是很大. import numpy as np imp ...

随机推荐

  1. RDVTabBarController的基本使用 以及tabbar的防止双点击方法

    RDVTabBarController这个库写得相当不错,所以今天就简单介绍下它的基本使用,看里面可以清楚的知道代码规范的重要性,这个库的使用方法和官方的相识 下载地址:https://github. ...

  2. NSArray Sort 排序

    打算实现tableview的生序降序排序 ```js NSArray * rs= [oneArray sortedArrayUsingComparator:NSComparisonResult(RFI ...

  3. js简单解密（eval解密）

    今天看博客园文章,看到一篇比较好的文章. 今天又学会一招,可以对一些采用eval加密的js进行解密. 打开谷歌或者火狐浏览器,然后按 F12,接着把这代码复制进去, 最后,去掉开头 4 个字母 eva ...

  4. DFX 安全测试-- 告诉你什么是XSS、sql注入？POST和GET的区别....

    1.用户权限测试 (1) 用户权限控制 1) 用户权限控制主要是对一些有权限控制的功能进行验证 2) 用户A才能进行的操作,B是否能够进行操作(可通过窜session,将在下面介绍) 3)只能有A条件 ...

  5. JavaScript（四）——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  6. java web 开发 购物车功能的实现

    为了方便自己以后复习,所以写的比较仔细,记录下自己的成长..... 既然是做购物车,那么前提条件是首先需要一系列商品,也就是要建一个实体,这里建了一个商品表. 通过查询在浏览器上显示 基本显示已经做好 ...

  7. Windows7 系统 CMD命令行，点阵字体不能改变大小以及中文乱码的问题

    之前装了oracle 11g后,发现开机速度竟然奇葩的达到了3分钟.经过旁边大神指点,说是因为oracle某个(具体不清楚)服务,在断网的时候会不断的ping网络,导致速度变慢.然后就关服务呗,然后一 ...

  8. sql server 跟踪各事件的字段项编码及解释

    column_id有如下表:1 TextData 与跟踪内捕获的事件类相关的文本值. 2 BinaryData 与在跟踪中捕获的事件类相关的二进制值. 3 DatabaseID USE databas ...

  9. df,du,mount

    df 查看当前系统中文件系统的使用情况 $df [-aTh]缺省选项查看当前系统的所有文件系统 -a列出所有的信息 -T列出文件系统类型 -hhuman-readable,用合适的单位表示大小 $df ...

  10. 省级联动(使用ajax实现)

    在博客园学习了很多实用的东西,现在该慢慢开始自己写写博客文章, 由于本人水平有限,刚走出校园的小菜鸟,另外,文章在表述和代码方面如有不妥之处,欢迎批评指正.留下你 的脚印,欢迎评论! 有什么问题,可以 ...