You are currently browsing all posts tagged with 'css'
<div id="parent_div" style="border:1px solid red;"> <div id="child_div"> 这里是内容。 </div> </div>
先看这种正常的情况，
随着child_div里面内容的增加，
父DIV的高度也会随之增加，
可以看到父DIV的红色边框，一直都能包围着子DIV。
然后给子DIV加上float属性，
世界全都变了，
父DIV的高度不会自动增加了。
原因：
我们没有清除或者闭合浮动元素。
W3C推荐的解决办法：
＜div style="clear:both;">＜/div>
添加这一行到子DIV后面，以清除浮动元素。
==广告一下：
IT民工交流群： 110443867
最近弄了一个div
height:1px
FF和IE7下都正常
唯独到了IE6下，高度大约10多个px.
原来ie6中div的最小高度与字体大小有关。
overflow:hidden; 或者 font-size:1px
就OK了。
上面的图是某日本神人用 CSS3 画的。
四个浏览里面 Chrome 的支持度最高，不仅圆角、阴影一应俱全，甚至连眼睛都还会动 @@。
Firefox 3.6 次之，除了眼睛不会动之外都和 Chrome 相当，
Opera 则是少了阴影。
至于 IE8… 呃… IE9 什么时候出来？
可以访问下面的这个页面，来看一下你的浏览器对CSS3的支持程度:
http://www.masalife.com/wp-content/uploads/2010/05/dora.html
<span style="cursor:hand">hand：是大家所熟悉的手型。</span>(只有IE有效) <span style="cursor:pointer">还是手型，各个浏览器都有效。</span> <span style="cursor:crosshair">crosshair：是十字型。</span> <span style="cursor:text">text：是平时鼠标移动到文本上的样式。</span> <span style="cursor:wait">wait：是等待的效果。</span> <span style="cursor:default">default：是默认的那种效果。</span> <span style="cursor:help">help：是带问号的鼠标样式。</span> <span style="cursor:e-resize">e-resize：是向右的箭头。</span> <span style="cursor:ne-resize">ne-resize：是向右上方的箭头。</span> <span style="cursor:n-resize">n-resize：是向上的箭头。</span> <span style="cursor:nw-resize">nw-resize：是向左上方的箭头。</span> <span style="cursor:w-resize">w-resize：是向左的箭关。</span> <span style="cursor:sw-resize">sw-resize：是向左下的箭头。</span> <span style="cursor:s-resize">s-resize：是向下的箭头。</span> <span style="cursor:se-resize">se-resize：是向右下方的箭头。</span> <span style="cursor:auto">auto：是系统自动的效果。</span> 各个浏览器对于auto的理解是不同的。
IE6 div float:left之后，IE7 FF都没什么好说的， IE6中，此div的overflow属性的visible不再起作用。
代码：
<style>
.abc {
float:left;
border:1px solid CYAN;
}
</style>
<BR>
<div><img src=’http://www.baidu.com/img/logo-yy.gif’ width=149 height=56></div>
<div><img style=”margin-left:-50px;margin-top:-30px;” src=’http://www.baidu.com/img/logo-yy.gif’ width=149 height=56></div>
效果图：
上面的图是FF，下面的图是IE6。
解决办法：
.abc img {
*position:fixed;
}
*么？表示这个CSS只对IE6起作用。
不过很多人都说IE6不支持CSS中的position:fixed属性…无语了。
左右二栏
页面总宽度977 左栏633px 右栏344px
原来的css:
右div{
float:right;
width:344px;
}
左div{
margin-right: 344px;
padding-right: 40px;
}
html代码的顺序是先右div,再左div.
打印到A4纸上
右边栏先于左边栏出现。
由于最重要的内容出现在左边栏，所以客户想要对打印出来的顺序进行调整。
修改后的css:
右div 未做修改
左div {
float:left;
width:633px;
margin-right:0px;
}
html代码的顺序是先左div, 再右div
打印到a4纸上，左边栏先于右边栏出现。
IE中的CSS滤镜，有一个filter: FlipH 可以把图片进行水平翻转，还有一个filter:FlipV 可以把图片进行垂直翻转。
而CSS滤镜是IE特有的东西，那么，在firefox中怎么办呢？
IE中的filter: FlipH
等价于Firefox safari 和chrome中的
-moz-transform: matrix(-1, 0, 0, 1, 0, 0); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
IE中的filter: FlipV
等价于Firefox safari 和chrome中的
-moz-transform: matrix(1, 0, 0, -1, 0, 0); -webkit-transform: matrix(1, 0, 0, -1, 0, 0);
测试代码：
<style>
.flip_x {
/**水平翻转**/
/** IE **/
filter: FlipH;
/** FF **/
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
/**safari 和chrome **/
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
}
.flip_y {
/**垂直翻转**/
/** IE **/
filter: FlipV;
/** FF **/
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
/**safari 和chrome**/
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
}
.flip_xy {
/** IE **/
filter: FlipV;
filter: FlipH;
/** FF **/
-moz-transform: matrix(-1, 0, 0, -1, 0, 0);
/**safari 和chrome**/
-webkit-transform: matrix(-1, 0, 0, -1, 0, 0);
}
</style>
正常情况:<img src='http://www.google.com/intl/en_ALL/images/logo.gif'><BR>
水平翻转:<img class='flip_x' src='http://www.google.com/intl/en_ALL/images/logo.gif'><BR>
垂直翻转:<img class='flip_y' src='http://www.google.com/intl/en_ALL/images/logo.gif'><BR>
双翻：<img class="flip_xy" src='http://www.google.com/intl/en_ALL/images/logo.gif'><BR>
效果图：
