因胸联盟 发表于 2015-1-15 23:29:40

带来一篇CSS尺度:vertical-align属性

HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展.原文:http://www.mikkolee.com/13
比来几天细心研讨了一下vertical-align这个属性,了局让我年夜吃一惊,这个很“资深”的CSS尺度居然在各个扫瞄器内里的体现都各不不异。
vertical-align的值有点多,包含baselinesubsuppertoptext-topbottomtext-bottommiddle和各类长度值(%,em,ex等等)。我先给人人看一个我以为最夸大的值:bottom。代码以下:
p{
font-size:18px;
line-height:36px;
font-family:Tahoma,sans-serif;
}
img{
vertical-align:bottom;
}
然后人人看一看这段CSS在各个扫瞄器中的效果(图片是我存心做成谁人模样,为了能够看分明绝对地位):















呃,这个了局实在很让人匪夷所思,一样平常我会以为Firefox会比IE注释得改正确,可是看过Opera以后发明它和IE是一样的,而Safari/Win是站在Firefox何处。说假话,我不晓得这是怎样回事。
细心进修了《CSS威望指南(第二版)》,乃至还往查阅了W3C,然后本人做出一个关于vertical-align的图:



依照W3C的界说,当内联元素的vertical-align设置为:


[*]baseline,top,bottom的时分,都是该元素的baseline(或middle,top,bottom)对其四周元素的不异地位,如图片的top和四周笔墨的top对齐。
[*]text-top和text-bottom的时分,是该元素的top(或bottom)对齐四周元素的text-top(或text-bottom)。
[*]长度(%,em,ex)的时分,是基于baseline往上挪动,以是负数往上,正数往下。
[*]middle的时分,是该元素的中央对齐四周元素的中央。这里“中央”的界说是:图片固然就是height的一半的地位,而笔墨应当是基于baseline往上挪动0.5ex,亦即小写字母“x”的正中央。可是良多扫瞄器常常把ex这个单元界说为0.5em,以致于实在纷歧定是x的正中央(以上图为例,x的高度应当是10px,而em是18px,以是两个值纷歧样)。
可是,即便是依照下面的原则,各个扫瞄器的注释云云悬殊也让我匪夷所思。我也懒得往研讨为何是如许子。总的来讲呢,应当就是它们对字体的每条线的地位的界说都不年夜一样,以是这个成绩不但跟vertical-align有关,而跟扫瞄器对内联文本和内联图片的布局的注释有很年夜干系。
最初给人人一个测试页面,能够方面的看看各个扫瞄器对vertical-align分歧值的注释了局。
http://www.mikkolee.com/weblab/001_vertical/
人人能够测试一下其他的值,好比middle或是text-top,也是各个扫瞄器完整纷歧样。有甚么心得人人来会商一下吧~~
</p>
但他也直言说,这就像写软件时,在添加改善的新功能时,难免遭遇稳定性的问题,必须先把问题清除干净,才能推出新产品。

乐观 发表于 2015-1-17 22:57:09

滚动条)层属性--溢出(visible/hidden/scroll/auto)

若天明 发表于 2015-1-25 12:54:22

学Dreamweaver技术的过程其实是一个增加信心的过程。

admin 发表于 2015-2-8 14:11:59

Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

仓酷云 发表于 2015-2-25 19:05:10

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

若相依 发表于 2015-3-8 02:44:21

不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。

深爱那片海 发表于 2015-3-15 21:16:35

滚动条)层属性--溢出(visible/hidden/scroll/auto)

爱飞 发表于 2015-3-22 05:05:17

HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
页: [1]
查看完整版本: 带来一篇CSS尺度:vertical-align属性