CSS之margin属性由浅入深详解

  margin在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。

一、margin的基本特性

  margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin,可以用来设置box的margin area。属性margin可以用来同时设置box的四边外边距,而其他的margin属性只能设置其自各的外边距。

  margin属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。

  或许有朋友对非置换元素(non-replaced element)有点疑惑,稍微帮助大家理解一下。非置换元素,W3C中没有给出明确的定义,但我们从字面可以理解到,非置换元素对应着置换元素(replaced element),也就是说我们搞懂了置换元素的含义,就懂了非置换元素。置换元素,W3C中给出了定义:

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

  从定义中我们可以理解到,置换元素(replaced element)主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围的元素。进而可知,非置换元素(non-replaced element)就是除了img,input,textarea,select,object等置换元素以外的元素。

  margin始终是透明的。

二、margin的基本写法

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

  percentage:百分比是由被应用box的containing block(注:一个元素的containing block是该元素产生的box(es)在计算位置和大小时参考的一个矩形,详细阅读可看:《Containing Block》)的大小所决定。对于margin-top和margin-bottom也同样成立。

  margin的默认值为0,并且margin支持负值。

  上面我们曾提到属性margin可以用来同时指定box的四边外边距。如果属性margin有四个值,那么值将按照上-右-下-左的顺序作用于四边,即从元素的上边开始,按照顺时针的顺序围绕元素。表达式如下:

margin:top right bottom left;

第 1 2 3 页

CSS之margin属性由浅入深详解

相关文章:

你感兴趣的文章:

标签云: