css这样写:
这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放,但是高度是不变的,这样肯定不行,我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢?直接写百分比么 height:21%这个就别想了,肯定不行的。
我们可以借用一个不常见的属性,padding-bottom属性。
从手册可以看到,当padding-bottom为百分比的值时,定义的是基于父元素宽度的百分比下内边距。
所以我们的css如果这样写:
我们就会得到一个和我们宽度相等的高度,而且我们的div会随着窗口大小的改变进行等比例的缩放。
但是这个方法有一个问题就是,手册上说我们用的padding-bottom的这个值
感觉像是个雷啊
今天就先到这里,感兴趣的小伙伴可以一起探讨探讨。
可能是DW的问题.但如果其它浏览器正常, 而ie6 这样的话, 就是ie6 双边距的bug.
此bug的
原因如下: ie6中, 如果块状浮动元素应用了与浮动方向相同的边距, 则此行第一个元素的边距会加倍...(注意: 内联样式的元素不受影响)
可能不太容易理解. 举个例子:
比如一行中左浮动了5个元素. 这5个元素都有左右边距, 那么第一个元素的左边距有ie6下会加倍, 如果设置是5px, 则会变成10px, 后面的4个不会出现这种情况(如果后面的没有被挤下去).右边距也不会受影响(因为是左浮动).
如果上面的情况有人被挤到下一行, 则下一行的行首的元素左边距 也会加倍...
以上便是ie6的经典的双边距bug.
解决办法很多, 最常用的是, 对行首的元素应用 display:inline就可以解决.
如有问题, 请留言.
head里加入<style>
.要设置大小的class名称/#要设置大小的id名称{width:你要设置的宽度,height:你要设置的高度}
</style>