一些属性解释。

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

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. jQuery和ExtJS的timeOut超时问题和event事件处理问题

    对jQuery来说,超时可以直接设置timeout参数,并在error事件中捕获第二个参数,如果是“timeout”则表明捕获了超时事件,非常清楚. 例子: $.ajax({         type ...

  2. 一个统计报表sql问题

    今天朋友问我了一个统计报表的sql问题.我弄了好久.终于算是写出来了.这里记录下. 问题:  id--------------name--------------addtime1            ...

  3. mvc 开发razor模式注意事项

    1 情景为:mvc模式开发的.cshtml画面,里面有@if语句,if语句里面还有其他的代码,画面总是报错:if模块中没有对应的"}",什么问题 跟踪了之后,判定cs语句没问题,那 ...

  4. linux 学习随笔-vim

    在自己的home/username目录下 更改vim的配置文件 如果没这个文件 copy其他人的配置文件 然后拖到此目录下 执行mv vimrc ~/.vimrc 更改名字 即可生效 只对当前用户生效 ...

  5. (视频) 《快速创建网站》1. 网站管理平台WordPress & 微软Azure 云计算简介

    网站并不神秘,过节了,在家闲的没事的,自己建个网站玩玩吧.每段视频不超过15分钟,地铁/公交/睡前/醒来看一段,几天之后变身建站专家,找老板加薪去! 在普通人眼里,创建网站是专业开发人员和IT工程师才 ...

  6. C#语言——类

    C#——类 一.String 类 系统内置的处理字符串类型的函数方法类.方便我们对字符串类型进行一系列的处理. 1.Length:获取字符串的长度,返回一个int类型的值 string x=Conso ...

  7. [Linux 性能检测工具]DF

    DF NAME: df 报告了文件系统的使用 语法: df [OPTION]... [FILE]... 描述: Df显示了以文件名为从参数查看所在文件系统的可用空间.如果没有指定文件那么会显示所有的文 ...

  8. php.ini配置解析

    为了让PHP读取这个文件,它必须被命名为'php.ini'. PHP 查找配置文件次序:当前工作目录:环境变量PHPRC  ; 指明的路径:编译时指定的路径.  ; 在windows下,编译时的路径是 ...

  9. apache https配置

    1.  确认是否安装ssl模块 是否有mod_ssl.so文件 2.  生成证书和密钥 linux下 步骤1:生成密钥 命令:openssl genrsa 1024 > server.key 说 ...

  10. 我的ElasticSearch集群部署总结--大数据搜索引擎你不得不知

    摘要:世上有三类书籍:1.介绍知识,2.阐述理论,3.工具书:世间也存在两类知识:1.技术,2.思想.以下是我在部署ElasticSearch集群时的经验总结,它们大体属于第一类知识“techknow ...