你的位置:首页 > 网页设计

[网页设计]CSS 关于vertical


在CSS ;line-height浅析(2)中,我们接触了一个“隐藏文本的节点”的概念,因此明白了很多line-height与vertical-align:middle联合搞出来的怪异现象,这篇文章我们深入分析一下vertical-align:middle,看看还有什么更怪的现象。

先上重点:

inline-block的基线是正常流中最后一个line box的基线,除非,这个line box里面既没有line boxes ,或者其本身overflow属性的计算值不是visible,则它的基线是margin底边缘。

上面这段不是人话,看不懂没关系,下面是人话:

如果一个inline-block元素里面是空的,或者它本身有overflow属性,这种情况下基线是它margin的底边缘。

如果一个inline-block元素里面不是空的(比如里面有文字或者图像),则它的基线由正常流中最后一个line box的基线决定。

举个例子,请看下面代码:

 1 <!DOCTYPE html> 2 <html lang="en"> 3   <head> 4     <style> 5     .box { 6       display:inline-block; 7       width:200px; 8       height:150px; 9       border:2px solid red;10       font-size: 50px;11     }12     </style>13   </head>14   <body>15     <span class="box"></span>16     <span class="box">xxx</span>17   </body>  18 </html>

页面效果:

这是神马情况?

第一个盒子,里面是空的,所以它的基线是它的下边框。

(基线本来应该是margin的底边缘,此处为便于展示,margin为默认0,所以下边框就是margin底边缘;有兴趣的朋友可自己设置margin的大小看看效果。)

第二个盒子,里面有文字,所以它的基线是文字的基线决定,也就是x字母的下边缘。

默认情况下基线对齐,所以它们就变成这样啦。

 

再来玩个游戏,如果将文字的行高改变,会怎样呢?

下图的行高为80px:

   

下图的行高为0:

在两幅图中,文字的位置都没有变化,文字的基线也没有变化,所以左边空盒子的位置没变。

(此处留个疑问,行高为0,按理说基线应该上移,为什么这里基线没变?)

右边的盒子为什么会随着文字的行高变化而上下移动?

前文有提到,内容区的中点将行高上下均分,当line-height为80px,内容区的上下就各为40px,所以上边框要上移才能包裹住文字;

当line-height为0,文字没有高度,内容区的上下部分都是0,盒子不需要在边框内部给文字留空间,所以从它内容区的中点穿过。

(注意:内容区的中点与x的中点有偏差)

 

Note:

对于行内元素,vertical-align和line-height虽然不可见,但实际上【到处都是】!

也就是说,只要是行内元素,一定会受它们影响。

在遇到由vertical-align:baseline和line-height组合造成的各种无法理解的怪异现象,可以直接放大招,要么行高改为0,要么废掉基线对齐(比如底线对齐、顶线对齐就很好啊),要么两个一起改。