中国新时代巅峰创意服务众包平台

全国 [切换城市]
  • 任务
  • 人才
  • 服务
马上发布需求

由浅入深学习CSS中margin特点用法

发布时间:2014-07-01 12:16:30   阅读次数:1473 次

margin在中文中咱们翻译成外边距或许外补白,这篇文章向咱们介绍一下CSS中margin特点的用法,期望对你的学习有所协助。

  CSS中margin特点由浅入深详解

  margin在中文中咱们翻译成外边距或许外补白(这篇文章中引证外边距)。他是元素盒模型(boxmodel)的根底特点。



  一、margin的根本特性

  margin特点包括margin-top,margin-right,margin-bottom,margin-left,margin,能够用来设置box的marginarea。特点margin能够用来一起设置box的四边外边距,而其他的margin特点只能设置其自各的外边距。

  margin特点能够应用于简直一切的元素,除了表格显现类型(不包括table-caption,tableandinline-table)的元素,而且笔直外边距对非置换内联元素(non-replacedinlineelement)不起作用。

  或许有兄弟对非置换元素(non-replacedelement)有点疑问,略微协助咱们了解一下。非置换元素,W3C中没有给出清晰的界说,但咱们从字面能够了解到,非置换元素对应着置换元素(replacedelement),也即是说咱们搞懂了置换元素的意义,就懂了非置换元素。置换元素,W3C中给出了界说:

  ExampleSourceCode

  “AnelementthatisoutsidethescopeoftheCSSformatter, 
  suchasanimage,embeddeddocument,orapplet” 

  从界说中咱们能够了解到,置换元素(replacedelement)主要是指img,input,textarea,select,object等这类默许就有CSS格式化表面规模的元素。进而可知,非置换元素(non-replacedelement)即是除了img,input,textarea,select,object等置换元素以外的元素。
  margin始终是通明的。

  二、margin的根本写法

  外边距的margin-width的值类型有:auto|length|percentage

  percentage:百分比是由被应用box的containingblock(注:一个元素的containingblock是该元素发生的box(es)在核算方位和巨细时参阅的一个矩形,详细阅览可看:《ContainingBlock》)的巨细所决议。关于margin-top和margin-bottom也相同建立。

  margin的默许值为0,而且margin撑持负值。

  上面咱们曾提到特点margin能够用来一起指定box的四边外边距。假如特点margin有四个值,那么值将依照上-右-下-左的次序作用于四边,即从元素的上边开端,依照顺时针的次序环绕元素。表达式如下:

  ExampleSourceCode

  margin:toprightbottomleft;  

  而且标准还供给了margin省掉的数值写法,根本原则如下:

  1.假如没有left值,则运用right替代;

  2.假如没有bottom值,则运用top替代;

  3.假如没有right值,则运用top值替代。

  依据这些根本原则,咱们能够有三种省掉方法,但不管怎样省掉margin的数值都会大于等于一个,而margin的默许数值是从top开端至left完毕,那么关于省掉的详细情况,咱们能够从left反推理回去。

  1.假如margin只要三个值,依照值的次序为margin:toprightbottom;缺少了left,依据原则,则left的值有right来替代。

  margin:10px20px30px;就等于margin:10px20px30px20px;

  2.假如margin只要两个值,依照值的次序为margin:topright;缺少了bottom和left,依据原则left的值由right来替代,bottm的值由top来替代。

  margin:10px20px;就等于margin:10px20px10px20px;

  3.假如margin只要一个值,依照值的次序为margin:top;缺少了bottom、left和right,依据原则left的值由right来替代,bottom的值由top来替代,right的值右top来替代,也即是说left的值也由top来替代。

  margin:10px;就等于margin:10px10px10px10px;

  三、margin的解析逻辑

  当前咱们现已了解到了margin的根本特性和根本写法,但对元素margin的根本解析逻辑仍是很含糊,究竟margin的top、right、bottom、left都是以啥为基准来促进boxmodel形成。为了形象,易懂的对margin的逻辑进行说明,下面解说的过程中,将引进W3C上没有的参阅线的说法。何谓参阅线?参阅线即是margin移动的基准点,此基准点有关于box是停止的。而margin的数值,即是box有关于参阅线的位移量。

  在margin中top、right、bottom、left的参阅线并不共同为一类,而是分为了两类参阅线,top和left的参阅线归于一类,right和bottom的参阅线归于另一类。那他们究竟各以啥为参阅线呢?top以containingblock的content上边或许笔直上方相连元素margin的下边为参阅线笔直向下位移;left以containingblock的content左面或许水平左方相连元素margin的右边为参阅线水平向右位移。right以元素自身的border右边为参阅线水平向右位移;bottom以元素自身的border下边为参阅线笔直向下位移。从上咱们能够看到top和left都是以外元素为参阅,而right和bottom以本元素为参阅。上面的位移方向是指margin数值为正值时分的情形,假如是负值则位移方向相反。

  或许理论听起来比较单调,咱们举例说明一下:

  ExampleSourceCode

    1/DTD/xhtml1-transitional.dtd\">
  

  如上代码,很简单,为了便利咱们看到作用,咱们给div设置了宽度和高度以及背景色。
  如今咱们给div的款式加上margin特点,比如:

  ExampleSourceCode

  margin:-10px20px-30px40px; 

  这时分margin的解析逻辑是怎样的呢?

  首先咱们要搞清div的和周边元素的联系,div没有相连元素,而此刻div的containingblock是body发生的blockbox。则依据上面介绍的参阅线原理,div的左外边距以containingblock的content左面为参阅线,及此刻以body的content左面为参阅线进行水平向右位移,位移的巨细为40px,同理,上边距以body的content上边为参阅线进行笔直向上位移10px(负值和正值的方向相反),下边距依照如今div的borer下边(此刻的div现现已过上边距位移过了)笔直向上位移30px(此刻,margin不会改动box的border内的物理巨细,但会改动box的逻辑巨细,即:以此box的margin的下边为参阅的元素,不是从box的物理方位开端的,而是从逻辑方位开端),右边距依照如今div的borer右边(此刻的div现现已过左面距位移过了)水平向右位移20px。或许有兄弟问你剖析的次序怎样和margin表达式中呈现的次序不一样?假如依照margin表达式中呈现的次序来剖析,结果是一样的,仅仅为了非常好的便利咱们的了解而没有依照表达式的次序来剖析。

  用margin最终的显现巨细究竟是怎样样的,或许有兄弟也比较疑问,我暂时用逻辑巨细和物理巨细来区分(本来上面已用到此概念),究竟啥是逻辑巨细,啥是物理巨细呢?!详细能够看图,物理巨细指的是除掉margin,也即是包括border以内的box巨细,而逻辑巨细,则是box经过margin解析规则解析后得到的巨细(这或许能够解说为啥IE5会过错解析盒模型),当逻辑巨细小于物理巨细时,则不会影响实践box的显现,也即是说,此刻显现的是box的物理巨细,而当逻辑巨细大于物理巨细时,则此刻显现逻辑巨细。这仅对元素自身有用,关于其他有关元素,他们则只以margin的逻辑巨细为原则,进行规划。

以上素材内容均由网上收集或网友提供,不涉及任何形式的商业用途。如有侵犯作者版权,请发邮件联系我们(chaohua@72swk.com),我们将尽快处理。

客服帮助