一些css的特性和‘坑’

margin对元素的影响

1.首先是嵌套元素: margin-top会合并，而margin-left不会合并

<style>
.outer{
width: 200px;
height: 200px;
background: #CCC;

}
.inner{
height: 100px;
width: 100px;
background: orange;
margin-top:50px;
margin-left: 50px;
}
</style>

<div class="outer">
<div class="inner"></div>
</div>

运行结果:



如果解决margin-top合并问题呢？

1.父元素或子元素使用浮动或者绝对定位absolute

2.父元素overflow:hidden;

3.父元素设置padding

4.父元素设置border

2.相邻元素，margin-top和margin-bottom会合并，而且会取较大的值作为他们之前的间距

<style>
.rect
{
height: 100px;
width: 100px;
background: orange;
margin-top: 20px;
margin-bottom: 50px;
}
</style>

<div class="rect"></div>
<div class="rect"></div>

运行结果:

2.相邻元素，margin-left和margin-right不会合并

<style>
.rect
{
float: left;
height: 100px;
width: 100px;
background: orange;
margin-left: 50px;
margin-right: 50px;
}
</style>

<div class="rect"></div>
<div class="rect"></div>

运行结果:

弄一个满屏的块级元素

比如一个div

<style>
div
{
height:100%;
width:100%;
background:orange;
}
</style>

然后查看结果：发现什么都没有。

这时需要添加:

<style>
html,body
{
height:100%;
}
</style>

因为html和body的高度是根据内部元素的高度决定的。如果没有内部元素撑开，需要手动设置html和body高度

display:inline-block之间的空白间距

如下:

<style>
.span1
{
display: inline-block;
height: 30px;
width: 100px;
background: orange;
}
</style>

<span class="span1"></span>
<span class="span1"></span>
<span class="span1"></span>
<span class="span1"></span>

运行结果:



不同浏览器的间距有点不一样，但是一般都是4px，像火狐和谷歌浏览器，但360浏览器是8px。

解决方法:

借鉴张大大的方法:—去除inline-block元素间间距的N种方法

使用css3动画时，如果用到需要浏览器前缀的属性，不仅@keyframes前需要加前缀，内部的转变属性也需要加前缀，才能保证浏览器的兼容性。说得可能不太清楚，下面看例子吧。（注意下面/**/注释）

<style>

.ani_div
{
height:100px;
width:100px;
background:orange;
animation: myAnimate 3s;
-moz-animation: myAnimate 3s;
-webkit-animation: myAnimate 3s;
-o-animation: myAnimate 3s;
}

@keyframes myAnimate
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

/*不仅keyframes要加前缀，里面的transform也需要加前缀*/
@-moz-keyframes myAnimate/* Firefox */
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}

/*不仅keyframes要加前缀，里面的transform也需要加前缀*/
@-webkit-keyframes myAnimate/* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

/*不仅keyframes要加前缀，里面的transform也需要加前缀*/
@-o-keyframes myAnimate/* Opera */
{
from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(360deg);}
}
</style>

<div class="ani_div"></div>

* 参拜各位大神的资料，结合自己遇到的问题写成笔记记录下来，如有错误，请多多指点，后续一直更新，希望一直进步。*