一些属性解释。

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

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. Runnable，Thread实现多线程以及Runnable的同步资源共享

    (一) 实现多线程有两种方式 (1) 继承Thread类,重写run()方法,如以下例子 class MyThread extends Thread{ public void run(){ // } ...

  2. json数组的序列化和反序列化json数组的序列化和反序列化

    如题,我就不多说了,自己看代码的,很好理解 using System; using System.Collections.Generic; using System.Web; using System ...

  3. Java Security：公钥私钥、数字签名、消息摘要是什么

    1. 鲍勃有两把钥匙,一把是公钥,另一把是私钥. 2. 鲍勃把公钥送给他的朋友们----帕蒂.道格.苏珊----每人一把. 3. 苏珊要给鲍勃写一封保密的信.她写完后用鲍勃的公钥加密,就可以达到保密的 ...

  4. Java代码规范

    Java代码规范 本Java代码规范以SUN的标准Java代码规范为基础,为适应我们公司的实际需要,可能会做一些修改.本文档中没有说明的地方,请参看SUN Java标准代码规范.如果两边有冲突,以SU ...

  5. IE10 11的css hack

    一.@media -ms-high-contrast @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ ...

  6. 烂泥：CentOS6.5挂载windows共享文件夹

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 由于工作需要,需要把本机的文件夹共享出去,然后让CentOS服务器临时使用下. 服务器使用的是CentOS系统,而本机使用的win7系统.考虑到是临时使 ...

  7. hadoop2.6---常用命令

    为了方便操作,可以把hadoop加入环境变量 修改,vi ~/.bashrc export HADOOP_PREFIX=/app/programs/hadoop- export HADOOP_MAPR ...

  8. linux原始套接字(2)-icmp请求与接收

    一.概述                                                    上一篇arp请求使用的是链路层的原始套接字.icmp封装在ip数据报里面,所以icmp请 ...

  9. 初试MarkDown

    · 要写个文档,突然就想到要不要试试学学MarkDown,整理一下大致过程 · 首先搜到这篇文章 ,简单介绍了MarkDown,以及OS X 平台上一个简单的工具 mou (目前仍免费) 相关新闻不做 ...

  10. Mysql引起的spring事务失效

    老项目加新功能,导致出现service调用service的情况..一共2张表有数据的添加删除.然后测试了一下事务,表A和表B,我在表B中抛了异常,但结果发现,表B回滚正常,但是表A并没有回滚.显示事务 ...