一些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>

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