一些css的特性和‘坑’

来源：互联网发布：js上传身份证图片插件编辑：程序博客网时间：2024/05/21 17:46

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>

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

0 0