关于CSS的一些零碎的知识（css hack，图片与文字对齐）

一、bool类型的true和false，在转换成字符串后会变成True 和False，注意开头字母是大写

 

二、css区别火狐，ie7，ie6的写法（CSS HACK原理）

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。
1、类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等
2、选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
3、HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

具体例子如下： 

写三句代码来控制一个属性，区别Firefox，IE7，IE6：
 background:orange;

*background:green !important;

*background:blue;
说明：这段代码会使在Firefox中，背景呈橙色；IE7中为绿色；IE6中为蓝色。

道理如下，Firefox不能识别*，所以后面两句都不执行，直接执行第一句；IE7三个都能识别，但是由于有第二句important的作用，所以就执行了第二句代码；IE6不能识别!

imprtant，按照最新原则，那就理所当然的执行了最后一句。

注：另外一种方式：

 background:orange;

*background:green;

_background:blue;
Firefox不支持*和_，所以只实现第一句；IE7不支持_，所以实现第二句；IE6实现第三句。

 

三、table 中的tr是没有边框的。只能设置td的边框来实现

 

四、css控制图片与文字对齐

文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。
设置各对象的vertical-align属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了

<div>
<div>文字与图片对齐方式<span style="vertical-align:middle;"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:baseline"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<img src="b-grade.png"></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:bottom"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:sub"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:super"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:text-bottom"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:text-top"><img src="b-grade.png"></span></div>
<br>
<div>文字与图片对齐方式<span style="vertical-align:top"><img src="b-grade.png"></span></div>
</div>

 五、当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。

overflow:auto; zoom:1;            overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写（此样式不能通过W3C验证）