学习笔记之 vertical-align

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>是一个不可替换元素，文字“段落的内容”全被显示。