关闭

学习笔记之 vertical-align

标签: vertical-align
188人阅读 评论(0) 收藏 举报
分类:

vertical-align:

值:baseline | sub | super | top | text-top | middle |bottom | text-bottom | <percentage> | <length> | inherit

初始值:baseline

应用于:行内元素和表单元格

继承性:无

百分数:相对于元素的line-height值

计算值:对于百分数和长度值,为绝对长度,否者,根据指定确定

说明:应用到表单元格时,只能识别baseline、top 、middle、bottom等值

baseline:要求一个元素的基线与其父元素的基线对齐。如果一个垂直元素没有基线,也就是说,如果这是一个图像或表单输入元素或其他替换元素。那么该元素的底端与父元素的基线对齐。(但实验证明,表单输入元素并不是底端对齐父元素基线,而是比如对于input的type为text来说,对齐基线的是里边的文字基线)

2.父元素的基线:父元素中没有改变vertical-align的大多数元素的基线(一般在同一直线上,不论元素有多高

sub;使该院书变成下表,这意味着其基线(替换元素为低端)会相对于父元素的基线降低,但并没有规定降低的距离。

super:讲元素的基线(或替换元素的底端),相对于父元素的基线升高,同样地,升高的距离取决于用户代理。

bottom:将元素行内框的底端与行框的底端对齐。

top:将行内框的顶端与行框的顶端对齐。

middle:往往(当并不总是)应用于图像,会把行内框的重点与父元素基线上方0,5ex处的一个点对齐。(ex:小写字母x的高度,与font-size有关)

percentage:把元素的基线(或替换元素的底端)相对于父元素的基线升高或降低指定的量(你指定的百分数要计算未该元素line-height的百分数,而不是父元素的百分数)。正百分数数值使该元素升高,负百分数数值使其降低)

length:把一个元素升高或降低指定的距离。

!!!注意:垂直对齐的文本并不会成为另一行的一部分,并且所有的垂直对齐的元素都影响行高。行框:高度包含最高行内框的顶端和最低行内框的底端。因此行框也包括因垂直对齐上升或下降的行内框。

1、元素的基线:

(图的来源http://www.jb51.net/web/6476.html)



3. 替换和不可替换元素

a) 替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。

(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如: <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 不可替换元素 (x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。

例如: <p>段落的内容</p> 段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11455次
    • 积分:271
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:12篇
    • 译文:0篇
    • 评论:0条