新闻资讯
记录首创点滴进步 见证远行
我们一直紧跟时代前沿,聚焦行业实时动态,发布公司最新资讯,欢迎您的关注
您目前的位置:网站首页 > 新闻资讯 > 网站常识 >

6.30日音讯,margin:0auto的含义详解

发布日期:2013-06-30文章来源:首创网络浏览次数:753次
    6.30日音讯,margin:0auto的含义详解。margin是我们平常用的很多的一个属性,但是它的一些用法会产生一些浏览器的不兼容如ie6的双倍边距等,下面我们就来看一下margin:auto与margin:0auto;有什么区别以及它们的关联和不同。 margin......
    本文关键字:6.30日,音讯,margin,0auto,的,含义,详解,6.30日
   6.30日音讯,margin:0auto的含义详解。margin是我们平常用的很多的一个属性,但是它的一些用法会产生一些浏览器的不兼容如ie6的双倍边距等,下面我们就来看一下margin:auto与margin:0auto;有什么区别以及它们的关联和不同。
 
  margin:auto=margin:autoautoautoauto;
  margin:0auto=margin:0auto0auto;
  margin:nmpq表示该元素上外边距为n,右外边距为m,下外边距为p,左外边距为q,即margin:上右下左,逆时针一圈。
  详情了解margin教程。
  margin后面是有4个参数的。
  例如:margin:1px2px3px4px
  分别表示上(1px)、右(2px)、下(3px)、左(4px)。
  如果只写2个参数的话,比如:margin:1px2px
  那么着是代表上下都为1px左右都为2px.
  至于居中,很明显,margin:0auto是标准的写法!常常我们使用margin:0auto让div盒子布局居中。
  margin:auto这个是代表四外边距自动,当然此CSSmargin默认为auto,所以常常都不用设置auto这个值,只有确定前面对对象设置了margin值,此时需要重置时候使用margin:auto
  margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反csspadding却是紧贴边框位于边框内侧。
  DIVCSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。
  1、margin语法
  Margin:10px
  Margin的值是数字+html单位,同时也可以为auto(自动、自适应)
  2、应用结构
  Div{margin:10px}
  设置div对象四边间距为10px
  3、Margin说明
  margin是设置对象外边距外延边距离。
  margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left:20px);可以为auto自动属性(margin-left:auto自动);可以为百分比(%)值(margin-left:3%)。
  Margin延伸(单独设置四边间距属性单词)
  margin-left对象左边外延边距(margin-left:5px;左边外延距离5px)
  margin-right对象右边外延边距(margin-right:5px;右边外延距离5px)
  margin-top对象上边外延边距(margin-top:5px;上边外延距离5px)
  margin-bottom对象下边外延边距(margin-bottom:5px;下边外延距离5px)
  常见margin使用场景
  4、margin实际应用地方
  两个布局之间距离设置。
  如上图中“CSS手册”和“DIVCSS研教室”黄颜色的背景之间空隙(背景土红)。
  二、cssmargin缩写简写-TOP
  margin属性CSS样式,如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
  你可能需要了解:CSS优化-CSS压缩:
  你可能需要了解:HTML优化-HTML代码优化压缩:
  1、只有上下情况缩写
  原始:margin-top:5px;margin-bottom:6px
  缩写简写为:margin:5px06px0或margin:5pxauto6pxauto
  2、只有左右情况缩写
  原始:margin-left:5px;margin-right:6px
  缩写简写为:margin:06px05px或margin:auto6pxauto5px
  3、只有三边情况缩写
  原始:margin-top:5px;margin-bottom:6px;margin-left:4px
  缩写:margin:5px06px4px或margin:5pxauto6px4px
  4、四边相同值缩写
  原始:margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px
  缩写:margin:5px;
  5、四边不同值缩写
  原始:margin-top:5px;margin-bottom:6px;margin-left:7px;margin-right:8px
  缩写:margin:5px8px6px7px;
  6、四边其中上下值和左右值各相同缩写
  上下相同、左右相同原始:margin-top:5px;margin-bottom:5px;margin-left:7px;margin-right:7px
  缩写:margin:5px7px;
  Margin简写分析图:
  cssdivmargin样式简写语法应用分析图
  三、常用的margin样式-TOP
  1、用margin设置对象盒子间距
  我们常用margin设置2个盒子之间距离,无论上下左右的距离我们均可以利用margin实现间隔。
  实际可用margin地方示图
  2、利用margin实现布局居中,基础单词:
  marign:0auto;
  即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式,这里divcss5提供一个css初始化模板为DIVCSS布局时候无需重复设置csstext-align:center等初始化样式属性。
  四、cssmargin普通案例-TOP
  DIVCSS5设置2个盒子,为了体现margin作用,我们对其2盒子设置cssborder边框、一定css宽度和css高度。
  1、margin用法css代码
  .divcss5-top,.divcss5-bottom{width:300px;height:100px;border:1pxsolid#F00}
  .divcss5-bottom{margin-top:10px}
  2、html代码片段
  <divclass="divcss5-top">上对象</div>
  <divclass="divcss5-bottom">下对象,我们设置了margin-top为10px间距</div>
  3、mairgin应用案例截图
  margin实例实践案例效果图
  从上案例我们分析出margin是设置对象(比如div盒子、span盒子等)之间间距,并体现出margin是存在与对象盒子边框外侧。
  五、cssmargin总结
  Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。
    本文由邯郸网络公司首创网络整理编辑发布,请勿转载、复制、摘抄等!

+ 查看更多我们的客户 / Our client

0310-4559740
400-990-1661
    24小时报务热线
    18931045623
在线客服
首创网络邯郸公司
邯郸公司
电话:0310-4559740 / 18931045623  地址:邯郸市丛台区颐高广场B座13层1304室