vertical-align完全解读

vertical-align垂直对象方式- vertical-align:是行内元素和行内块元素的专有属性- 控制行内元素、行内块元素、文字垂直对齐,对块元素无效  - baseline默认  - top 顶对齐  - bottom 底对齐  - middle 垂直居中对齐- vertical-align:baseline:清除图片底部的缝隙,只需要将vertical-align的值设置为除了baseline(基线以外的值)都可以,或者将图片转换为块元素,也能清除图片底部的缝隙- top 顶对齐- middle 垂直居中对齐- bottom 底对齐- 行内块垂直对齐 浮动和vetical-align,文本框和按钮 图片和input但是最好都设置一下,延伸,input是无法顶端对齐的,因他会按照默认字体大小的基线对齐,所以会有空隙,,关于图片底部默认缝隙可以用vam或者把图片转变成块级元素- 行内块在父元素里面垂直居中,行高等于父亲高度,再给行内块盒子设置vam就能实现行内块垂直居中- a链接的文字大小尽量写在父元素上进行继承,否则会出现问题,如果是写在a标签上,进行如下解决:      .box a{      vertical-align:middle;      font-size:12px      }  接上个问题原因是因为如果设置了a的字体大小则它的父亲会被撑大,浏览器默认字体大小是16px,垂直对齐方式是基线对齐,可以把a的字体大小写小但是不提倡,li把高度写死,或给a字体大小设置了正常加上vam,或者在准备的时候给body设置默认字体大小,就不会出现这种问题。

你可能感兴趣的:(vertical-align完全解读)