css中的vertical-align与line-height

　　line-height的定义是两基线之间的距离，即一行的高度（字面意思就是行高啊）；而vertical-align的值，top，middle，baseline，bottom，顾名思义就是上线对齐，中线对齐，基线对齐，底线对齐（与英语本的线有些不同），输入一个x，其底部就是基线，中间就是中线。（中线并不是就是垂直中心，而是x的中心，使用vertical-align：middle对齐时，表面上看是垂直水平居中对齐，实际上会有像素级别的差距，可以将font-size设置为0，这样各种线都重合，居于垂直居中的地方）

　　对于inline-block元素，当行盒子的正常流中没有行内盒子，且其overflow设置为visible，则以margin作为基线，如果以默认的vertical-align: baseline对齐的话，就会以margin进行对齐。这种对齐产生的效果自己测试对应着vertical-align的意义就能够推导出来，不进行赘述。

对于line-height，vertical-align产生的各种效果，理解其原本的意思，就不难理解效果的又来了，下面写上vertical-align：text-top以及text-bottom的用法。

vertical-align：middle等，对齐所依赖的线是处于同级元素，具有不确定性（不过也可以根据这种特性制造出上下块偏移的效果）而text-top，bottom是根据父级元素的font-size确定各种线的位置进行对齐。

未完待续。。。

时间： 2024-08-25 04:43:01

css中的vertical-align与line-height的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

【CSS中width、height的默认值】

对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固定的height的呢. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试宽度</title> <style type="tex

深入了解css的行高Line Height属性

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-

[ css 补充 vertical-align ] css中补充的vertical-align属性讲解

一.关于今天,本文,及其他 今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣:今天又是国际护士节,看到微博上护士照横流,我很欣慰. 一段放松的YY后,进入正题.上个月21号,有位同行留言想让我讲讲vertical-align属性,我其实对vertical-align属性也是略知皮毛,要说岂敢谈“讲解”,就说说我对vertical-align属性的一些理解吧,纯属个人见解,若有不准确之处还望见谅.还有,vertical-align属性牵扯到的知识实在是太多了,不是一篇文章就可以讲清楚的

深入理解CSS中的margin

1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

CSS中盒子模型和position（一）

今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自己记忆中的那些是在那里看到的,找起来特别的麻烦,还是老老实实的写博客写下来吧!本着既然打算写成博客就费点时间写点自己觉得有质量的,要不对不起看我博客的人更对不起自己,有些事情还是要告诉自己,不能急得花点时间,就像学这些技术.踏踏实实一点一点积累,还是要舍得花时间. 本人大四即将毕业生一枚,总是觉得有

CSS中强大的EM

使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用"em"作为单位设置元素,所以从头对"em"学习了一回.稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助. 这篇教程将引导大家如何使用"em"来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用"

CSS中的EM 用法解释和分析

篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. 什么是弹性布局? 用户的文字大小与弹性布局 用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”.当然,如果用户愿意他可以改变这种字体大小的设置,用户可以通过UI控件来改变浏览器默认的字体大小. 弹性设计有一个关键地方Web页面

比较css中单位px，em和rem的区别

国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如

[ css 补充 line-height ] css中补充的line-height(行高)知识点

行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响 7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语 法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit说明: 设置元素中行的高度.值: normal:默认行高,一般为1到