2009 二月 | CSSASS

2009年02月存档

关于margin-top/bottom在non-Replaced inline元素上不起作用的解释

2009年02月27号，星期五

margin-top/bottom have no effect on non-replaced inline elements。（参见css2.1规范）
但是为什么就不支持呢？
本人觉得可以这样解释：

像这样一个结构
<span class=”a”>xxxxxxxxxxxxxxxx</span><span class=”b”>——————</span>

效果大概如下
xxxxxxxxxxxxxxx————-

假如inline元素支持margin-top，而margin-top的参照基准是前一个元素（当然，考虑复杂情况的话，这么说是不正确的,比如前一元素是脱离文档流的元素，或者根本没有前一元素而只有上级元素，等等）。那么给b相对a的设置一个margin-top值，这个效果会是怎么呢？

这样？
xxxxxxxxxxxxxxx
————-

还是这样？
xxxxxxxxxxxxxxx
————-

但不管是怎样，这都和inline元素的定义相悖。inline元素，从字面上就可以理解，他是在(in)一行(line)上的！
这就是为什么inline元素当初设计的时候不让它支持margin-top/bottom。

同样他（非可置换inline元素）也不支持height（和width）。取而代之的是line-height，意思就是行高。因为inline元素是一行行的，定一个height的话，那这到底是整段inline元素的高呢？还是inline元素一行的高呢？都说不过去啊！所以统一都给每行定一个高，这就是line-height了。

虽然no-replaced inline元素都不支持margin属性。
但margin对于可置换inline元素还是有效的.(Replaced element )

例如下，下面的margin-top/bottom就生效了吧.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>可置换inline元素的margin效果</title> <style type="text/css"> *{margin:0; padding:0; } .inputButton{margin-top:100px;} </style> </head> <body> <div style="border:1px solid red;"> <input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" /> </div> </body> </html>

不过，等下，为什么在这里对inputButton设置margin-top后inputText也跟着有了上边距了呢？
其实，对于可置换inline元素的margin作用基线和block元素又不一样，他并非是任意的前面那个元素，而是离他最近的前一个block元素。
而且，对于元素有一个默认的vertical-align值。
ie下有可能是：vertical-align:auto; （但标准css规范中并无auto这个值）
而FF等浏览器下是vertical-align:baseline;（规范中所定义）

我们给input这个可置换inline元素设置个vertical-align:top;看看，前面的inputText是不是就看不出有“上边距”了。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>可置换inline元素的margin效果</title> <style type="text/css"> *{margin:0; padding:0; } input{vertical-align:top;} .inputButton{margin-top:100px;} </style> </head> <body> <div style="border:1px solid red;"> <input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" /> </div> </body> </html>

有时候，margin的值在不同浏览器下会产生不同的结果。
比如这个：

<!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>可置换inline元素的margin效果</title> <style type="text/css"> *{margin:0; padding:0; } .inputButton{margin-top:-100px;} </style> </head> <body> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div style="border:1px solid red;"> <input type="text" class="inputText" /><input type="button" value="提交" class="inputButton" /> </div> </body> </html>

对比下ie和FF的差别，我们会发现在，ＦＦ下这个margin负值似乎没起作用啊。
其实是vertical-align值（有默认值）在不同浏览器下解释有差别的缘故。
你可以修改input的vertical-align值做下测试。

标签：inline, margin, Replaced
发布在一己之见 | 2 条评论 »

关于padding增加width的解释

2009年02月27号，星期五

在一个block元素上使用padding后元素实际的宽度会增加，这是一个常识。

这本来是一个很浅显的道理，但许多初学者考虑的时候却觉得很怪异。

我这里按自己的解释来说明一番。

给个假设情况：一个width：10px的元素，padding：10px；

那么实际宽度就是width+padding-left+padding-right=30px;

假如说padding对宽度无影响，那么width是10px；但是padding在横向的宽度是20px；这样内边距padding>总宽width。

一个元素的内边距却大于这个元素的总宽，显然这是个悖论。

所以说作为内边距的padding是一定要加在宽度之上的。

发布在一己之见 | 2 条评论 »

西溪湿地油画展

2009年02月13号，星期五

发布在 My life | 没有评论 »

定位元素间的Z值比较及z-index在不同浏览器下默认值的影响

2009年02月7号，星期六

z-index在ie下缺省为：z-index:0; 而FF下则缺省为：z-index:auto;

（这个结论已然在蓝色的《补遗<无法冲破的等级> 》这个帖子中得出。而本文的讨论也是对《补遗》的总结及延伸。
你可以借助ie developer tool和firebug等工具进行测试查看z-index值。
需要注意的是：z-index值须在设置position:relative/absolute/fixed之后方才生效。）

正是IE/FF下这一点区别导致ie,ff下z值的不同表现。

注意：此处所说的z值区别于z-index,它指的是z轴层叠等级(stack level)，表示垂直于显示屏方向上的各层的层叠顺序。不止z-index一个属性会影响到z轴层叠等级的大小（本文对其他属性的影响暂不做讨论，但本文的研究已排除其他属性的影响，其他属性不会影响本文的研究）。

正常情况下：兄弟（同级）元素后者居上，父子之间子高于父。

这一点必须明确，相信也没什么异见。
可以看下面这个demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>各级元素间z的关系</title> <style type="text/css"> div{display:block;width:400px;height:200px;} .father1, .son1{border:2px solid #cfc} .father2, .son2{border:2px solid #fcf} /* */ .father1, .father2{position:relative;background:#aaa;} .son1, .son2{position:absolute;background:#eee;left:20px;top:20px;} /* */ .father2{top:-40px;left:20px;} </style> </head> <body> <div class="father1"> 父级1 <div class="son1"> 子级1 </div> </div> <div class="father2"> 父级2 <div class="son2"> 子级2 </div> </div> </body> </html>

可以看出z的等级：子级2（“堂弟”）>父级2（“叔叔”）>子级1（“子”）>父级1（“父”）。

如果我们想要父盖过子，兄罩着弟只需设置其z-index便可。z-index值越大，给予的z值就越大。
那么这个设置能否改变叔侄之间，堂兄弟之间的Z呢？
先试试看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>侄子盖过叔叔，堂兄罩着堂弟</title> <style type="text/css"> div{display:block;width:400px;height:200px;} .father1, .son1{border:2px solid #cfc} .father2, .son2{border:2px solid #fcf} /* */ .father1, .father2{ background:#aaa; } .son1, .son2{background:#eee; } /* */ .son1{position:relative;z-index:1000;top:20px;} </style> </head> <body> <div class="father1"> 父级1 <div class="son1"> 子级1 </div> </div> <div class="father2"> 父级2 <div class="son2"> 子级2 </div> </div> </body> </html>

看上去一样有效，是吧？子级1盖过了父级2和子级2。

但是，再看看下面这个例子，假如各级元素都是定位元素(设置了position),情况就有些不同了（之后的讨论，都是基于这个条件之下的。我觉得position定位的应用非常广泛，基于此的研究也非常有必要）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie/ff下表现不同</title> <style type="text/css"> div{display:block;width:400px;height:200px;} .father1, .son1{border:2px solid #cfc} .father2, .son2{border:2px solid #fcf} /* */ .father1, .father2{position:relative;background:#aaa;} .son1, .son2{position:absolute;background:#eee;left:20px;top:20px;} .father2{top:-40px;left:20px;} /* */ .son1{z-index:1000;} </style> </head> <body> <div class="father1"> 父级1 <div class="son1"> 子级1 </div> </div> <div class="father2"> 父级2 <div class="son2"> 子级2 </div> </div> </body> </html>

son1设置z-index:1000后，在FF下的z值级别就高于其叔与其堂弟father2,son2。但是在ie下这个设置却还是不行。
这时候，我们回过头看最前面的结论：z-index在ie下缺省为：z-index:0; 而FF下则缺省为：z-index:auto;
那么再写一个Test，将父级的z-index固定为0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Z-index默认值的影响</title> <style type="text/css"> div{display:block;width:400px;height:200px;} .father1, .son1{border:2px solid #cfc} .father2, .son2{border:2px solid #fcf} /* */ .father1, .father2{position:relative;background:#aaa;z-index:0;} .son1, .son2{position:absolute;background:#eee;left:20px;top:20px;} .father2{top:-40px;left:20px;} /* */ .son1{z-index:1000;} </style> </head> <body> <div class="father1"> 父级1 <div class="son1"> 子级1 </div> </div> <div class="father2"> 父级2 <div class="son2"> 子级2 </div> </div> </body> </html>

可以看出，一旦父级元素设置了相同的z-index，ff下“侄”元素一样无法超过“叔”元素和“堂弟”元素。

我们可以试着得出这么一个结论：

对于定位元素，（不论IE还是FF）非同级关系和非父子关系元素之间的Z值大小比较，须要回溯至其为兄弟关系的两个祖先元素上，先比较这两个元素的z-index值，只有当“兄”的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能超过“弟元素”及其子孙元素。

我们用一个三级关系来验证一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三级关系验证本文结论</title> <style type="text/css"> div{display:block;width:400px;height:200px;} #first,#first div{border:2px solid #cfc} #second,#second div{border:2px solid #fcf} #second{top:-80px;} /* */ .grandfather{position:relative;background:#aaa;z-index:0;} .father{position:absolute;background:#ccc;left:20px;top:20px;z-index:0;} .son{position:absolute;background:#eee;left:20px;top:20px;z-index:0;} /* */ #first{z-index:1;} #first .father{z-index:1;} #first .son{z-index:1;} </style> </head> <body> <div id="first" class="grandfather"> 祖父级 <div class="father"> 父级 <div class="son"> 子级 </div> </div> </div> <div id="second" class="grandfather"> 祖父级 <div class="father"> 父级 <div class="son"> 子级 </div> </div> </div> </body> </html>

不论#first .father和#first .son如何设置，只有#first的z-index值大于0（second的z-index值为0）时，才能盖住#second。

对于IE,元素的z-index缺省值是0，如果不另外设置“兄”，“弟”元素的z-index值，那么”兄”的z-index就无法大于“弟”的z-index。那么”兄”元素及其子孙就无法盖过”弟”元素及其子孙。而一旦“兄”的z-index大过了”弟”元素的z-index,那么情况就翻转了，“弟”元素及其子孙将无法盖过“兄”元素及其子孙。
而对FF,元素的z-index缺省值是auto,auto的意思是什么，就是说“随便，不关我事”，那么子孙们的z值等级就只跟他们自己本身的z-index有关了。
那么，IE上能否设置z-index:auto;呢？

测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试IE下的z-index:auto属性</title> <style type="text/css"> div{display:block;width:400px;height:200px;} #first,#first div{border:2px solid #cfc} #second,#second div{border:2px solid #fcf} #second{top:-80px;} /* */ .grandfather{position:relative;background:#aaa;z-index:auto;} .father{position:absolute;background:#ccc;left:20px;top:20px;z-index:auto;} .son{position:absolute;background:#eee;left:20px;top:20px;z-index:auto;} /* #first{z-index:1;} */ #first .father{z-index:1;} #first .son{z-index:1;} </style> </head> <body> <div id="first" class="grandfather"> 祖父级 <div class="father"> 父级 <div class="son"> 子级 </div> </div> </div> <div id="second" class="grandfather"> 祖父级 <div class="father"> 父级 <div class="son"> 子级 </div> </div> </div> </body> </html>

可以看出，在IE下，去除#first{z-index:1}后，#first及其子孙无法盖住#second。
而FF下，#first .father,#first .son却盖住了整个#second。

推论：

z-index:auto在ie下无效。

那么在IE下，对于由定位元素构成的两个并列的嵌套结构块间的Z值大小，只存在两种情况：要么这个结构块里的所有层元素都在另一个结构块之上，要么就是那个结构块所有元素在其之上。没有可能一个元素能插在另一个结构块的父与子之间，这种情况在FF下是存在的（当然，还有其他浏览器），在FF下，父级是z-index:auto的元素，他们都是自由的，依据自己的z-index决定Z值。FF下甚至可以形成：
————-
~~~~~~~~
————-
~~~~~~~~
这么一个四层交错，但要超过四层，就无能为力了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FF下的四层交错</title> <style type="text/css"> div{display:block;width:400px;height:200px;} #first,#first div{border:2px solid #cfc} #second,#second div{border:2px solid #fcf} #second{top:-80px;} /* */ .grandfather{position:relative;background:#aaa;z-index:auto;} .father{position:absolute;background:#ccc;left:20px;top:20px;z-index:auto;} .son{position:absolute;background:#eee;left:20px;top:20px;z-index:auto;} /* */ #first .father{z-index:1;} #first .son{z-index:3;} #second .father{z-index:2;} #second .son{z-index:4;} </style> </head> <body> <div id="first" class="grandfather"> 祖父级 <div class="father"> 父级 <div class="son"> 子级 </div> </div> </div> <div id="second" class="grandfather"> 祖父级 <div class="father"> 父级 <div class="son"> 子级 </div> </div> </div> </body> </html>

最后，还是要提醒一下，这里的讨论限于定位元素间。

———补充————–
z-index:auto在ie中无效？

关于z-index:auto的解释，在W3C的CSS说明文档中的解释是：

The stack level of the generated box in the current stacking context is the same as its parent’s box. The box does not establish a new local stacking context.
即Z的层叠等级将继承父级，不创建新的层叠内容。

这段说明在CSS2和CSS2.1中是完全一致的，那为什么ie”不支持” z-index:auto呢？

在css2中有一段css2.1中所没有的解释：

An element that establishes a local stacking context generates a box that has two stack levels: one for the stacking context it creates (always ‘0′) and one for the stacking context to which it belongs (given by the ‘z-index’ property).
一个元素创建的层叠内容框包含两个层叠等级，一个是就是创建的层叠内容（总是“0”），另一个就是这个层叠内容包含的子层叠内容（由“z-index”属性决定）。

所以在ie当中，即便某元素设置z-index：auto，它所继承的z也是0。
这貌似同我们文章中第一段结论一致。也勉强解释了为什么z-index:auto在IE中无效。

标签：position, z-index
发布在 CSS | 没有评论 »

absolute在ie,ff下的一些区别

2009年02月3号，星期二

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>absolute未设置top/left时在ie,ff下的一点区别</title> <style type="text/css"> .outer{background:#ccc;width:300px;height:300px;position:relative;} .inner{background:#eee;position:absolute;} </style> </head> <body> <div class="outer"> <span>父级</span> <div class="inner"> <span>子级</span> </div> </div> </body> </html>

在ie下，未设置top/left的absolute元素的效果比较怪异。（“父级”所在的节点是一个inline元素的节点，直接是textNode节点效果也一样）

上面的差别只是个小差别。
下面的这个就有些教育意义了：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ie6,7的绝对定位层的100%尺寸的bug</title> <style> *{padding:0px;margin:0px;} .outer { position:relative; border:10px solid #000; width:150px; height:150px; padding:10px; /* 差别的关键在这 */ } .inner { position:absolute; border:10px solid #f00; width:100%; height:100%; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>

ie6和ie7都有问题，而且还不一样。
width:100%正确的解释，应该是相对于父级的(width+padding)才对。
但ie7未将padding（Y）算入，而ie6则未将padding(X)算入。
这个问题讨论在这里：关于绝对定位元素的宽度100%怎么解释

由此，我们应该注意。当绝对定位层需要设置100%时，其relative父级应弃用padding。

另外，在那个讨论帖里，还提到了另一个问题。但其实是误读的，当时也没仔细看。
其实也没有什么价值，但也不妨一看。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>中间夹一层，小心haslayout</title> <style> *{padding:0;margin:0;} .outer { position:relative; border:10px solid #00f; width:150px; height:150px; padding:10px; /* 关键仍在于此 */ } .inter { background:#ccc; /* zoom:1; 此处如果触发haslayout，问题就复杂了 */ } .inner { position:absolute; border:10px solid #f00; width:100%; height:100%; } </style> </head> <body> <div class="outer"> <div class="inter"> <div class="inner"> </div> </div> </div> </body> </html>

标签：absolute, 兼容
发布在 CSS | 没有评论 »

CSS多类选择符测试

2009年02月3号，星期二

形如#first.son的选择符，支持性很好，ie6及以上，ff,opera,safari等浏览器都支持。
形如.second.son的选择符，在ie6下不支持，后一个类名会覆盖前一个类名，即直接识别为.son

其实可以利用第二条情况，作为一个针对ie6的hack来使用：
.xxx.son{} 只要.xxx部分是一个不存在的类名。就可以屏蔽ie6之外的浏览器。只对ie6下的.son有效。
这个hack的效果同 selector{ _property:value; } 大体一致。

标签：hack, 选择符
发布在 CSS | 没有评论 »

2009年02月 存档