【总结】CSS/CSS3常用样式小结——兼容性

1.html中两张图横向回车导致间隙,怎么才能去除成为无间隙？

例如：div 宽300px ; img 宽100px; border:0px;
<div><img /><img /><img /></div>
//上面情况刚好显示三张图
<div><img /><img /><img /></div>
这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。
解决办法就是让图片浮动。

2.css ie6、ie7中overflow:hidden无效解决办法

产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。
解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 position:relative; 即可解决该bug

3.表格语法

<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

4.textarea去掉右侧滚动条，去掉右下角拖拽

代码： <TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>

5.css中透明度兼容代码

 filter: alpha(opacity=80);opacity:0.8;

6.根据input的type来控制css样式

a.用css中的type选择器

input[type="text"]{ background-color:#FFC;}

b.用css的expression判断表达式

input{ background-color:expression(this.type=="text"?'#FFC':'');}

7.css3设置字体

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

8. css3实现背景颜色渐变

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
   第一个参数：设置渐变的起始位置
   第二个参数：设置起始位置的颜色
   第三个参数：设置终止位置的颜色

IE浏览器

 实现渐变只能使用IE自己的滤镜去实现`
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);`
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型
0 代表竖向渐变        1  代表横向渐变  

9.css3的RGB颜色和HSL颜色， IE8不识别rgba写法

其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);
其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);
如果需要设置透明背景 则可以用到他们：

background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。
background-color:rgba(0,0,0,0.5)，此写法解决opacity带来的元素也透明问题，单IE8低版本浏览器不支持。

10.css布局问题，在firebug下标签嵌入标签但是高度总比多4个像素
问题：
Firebug下a标签嵌入img标签，但是高度a标签始终比img标签多4个像素，a不是适应img的高度吗，这个4px怎么来的，可以去除吗？

<div>
<a>
<img>
</a>
</div>

三个标签都没有高度 ，demo中div和a适应img的高度，定义了img为max-width:100%;

这是 line-height 和 vertical-align 造成的，被称为幽灵空白节点，解决方案有以下几种：
让 vertical-align 失效
img { display: block; }
vertical-align 默认为 baseline，更改为其他即可
img { vertical-align:middle; }
直接修改 line-height 值
a { line-height: 5px; }
修改 font-size
a { font-size: 0; }

11.margin的兼容性问题
一、margin 非 table 类型的元素，以及 table 类型中 table-caption, table 和 inline-table 这3类。例如 TD TR TH 等，margin 是不适用的。 并且，对于行内非替换元素（例如 SPAN），垂直方向的 margin 不起作用。

二、两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
关键词解析：
两个或多个说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。
毗邻是指没有被非空内容、padding、border 或 clear 分隔开，说明其位置关系。注意一点，在没有被分隔开的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻； 只有在一个元素的 height 是 “auto” 的情况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。

示例代码：

<div style="border:1px solid red; width:100px;">
<div style="margin:50px 0; background-color:green; height:50px; width:50px;">
<div style="margin:20px 0;">
<div style="margin:100px 0;">B</div>
</div>
</div>
</div>

效果图：

以上代码中，margin 会把 B 的包含块撑开。

如果一个元素的 height 特性的值不是 auto，那么它的 margin-bottom 和它子元素的 margin-bottom 不算相邻，因此，不会发生折叠。 margin-top 没有此限制，所以是 100px，margin-bottom 没有折叠，只有 50px。

垂直方向是指具体的方位，只有垂直方向的 margin 才会折叠，也就是说，水平方向的 margin 不会发生折叠的现象。

折叠后 margin 的计算
1). 参与折叠的 margin 都是正值

例子：

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

示意图：

在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。

2). 参与折叠的 margin 都是负值
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。

示例代码：

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div>
<div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

示意图：

3). 参与折叠的 margin 中有正值，有负值
如果，毗邻的 margin 中有正值，同时存在负值会怎样呢？有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

示例代码：

<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

示意图：

上面的例子最终的 margin 应该是 100 + (-50) = 50px。

4). 相邻的 margin 要一起参与计算，不得分步计算
要注意，相邻的元素不一定非要是兄弟节点，父子节点也可以，即使不是兄弟父子节点也可以相邻。

而且，在计算时，相邻的 margin 要一起参与计算，不得分步计算。

一个复杂的实例：

<div style="margin:50px 0; background-color:green; width:50px;">
<div style="margin:-60px 0;">
<div style="margin:150px 0;">A</div>
</div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
<div style="margin:-120px 0;">
<div style="margin:200px 0;">B</div>
</div>
</div>

错误的计算方式：算 A 和 B 之间的 margin，分别算 A 和其父元素的折叠，然后与其父元素的父元素的折叠，这个值算出来之后，应该是 90px。依此法算出 B 的为 80px；然后，A和B折叠，margin 为 90px。

请注意，多个 margin 相邻折叠成一个 margin，所以计算的时候，应该取所有相关的值一起计算，而不能分开分步来算。

以上例子中，A 和 B 之间的 margin 折叠产生的 margin，是6个相邻 margin 折叠的结果。将其 margin 值分为两组：

正值：50px，150px，200px
负值：-60px，-100px，-120px
根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是 -120px，所以，最终折叠后的 margin 应该是 200 + (-120) = 80px。

5）浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会。

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>

示意图：

两个绿色的块儿之间，相距100px，而若 B 和它的浮动包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，显然，没有发生折叠。

6）创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠

以 “overflow : hidden” 的元素为例：

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>

若 B 和它的 “overflow:hidden” 包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，否则，没有发生。

示意图：

7）元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
自身 margin-bottom 和 margin-top 相邻，只能是自身内容为空，垂直方向上 border、padding 为 0。

示例：

<div style="border:1px solid red; width:100px;">
<div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>

以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。

示意图：