margin取负值什么意思

本文目录

• margin取负值什么意思
• 子标签的margin 值可以是相对于它父标签吗
• Margin，Border，Padding属性的区别和联系
• css中margin和padding区别以及用途是什么刚学css被这两个东西困扰了很久
• CSS的盒模型中,Margin属性的数值赋予顺序为()
• javascript中margin:50px 0px 0px 30px; 各个值的定义
• 请问WPF 设置 margin 的 value 顺序是上右下左还是上左下右
• CSS中margin:auto是自动居中吗

margin取负值什么意思

补充一下:
margin 属性是用于在一个声明中设置四个外边距的所有属性的简写属性。
注释：允许使用负值。
继承性：No
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
例子:顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：
h1 {margin: 10px 2% -10px auto}
也就是说,margin由四个值限定,先后顺序分别是:上、左、下、右.

子标签的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；

四个数值中间以空格分隔。效果等同于：

margin-top:value;

margin-right:value;

margin-bottom:value;

margin-left:value;

并且规范还提供了省略的数值写法，基本原则如下：

引用:

1.如果没有left值，则使用right代替；

2.如果没有bottom值，则使用top代替；

3.如果没有right值，则使用top值代替。

根据这些基本原则，我们可以有三种省略方式，但不管怎样省略margin的数值都会大于等于一个，而margin的默认数值是从top开始至left结束，那么对于省略的具体情况，我们可以从left反推理回去。

1.如果margin只有三个值，按照值的顺序为margin：top right bottom; 缺少了left，根据原则，则left的值有right来代替。

margin:10px 20px 30px;就等于margin:10px 20px 30px 20px;

2.如果margin只有两个值，按照值的顺序为margin：top right; 缺少了bottom和left，根据原则left的值由right来代替，bottm的值由top来代替。

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

3.如果margin只有一个值，按照值的顺序为margin:top; 缺少了bottom、left和right，根据原则left的值由right来代替，bottom的值由top来代替，right的值右top来代替，也就是说left的值也由top来代替。

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

Margin，Border，Padding属性的区别和联系

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width边框宽度；
border-style边框样式；
border-color边框颜色。
padding 简写属性在一个声明中设置所有内边距属性。
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释：不允许使用负值。

css中margin和padding区别以及用途是什么刚学css被这两个东西困扰了很久

一、margin属性

     CSS中的margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。margin是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 px。

    设置Margin属性的几种方式：

   1、同时设置给定元素的四个外边距

       //设置h1元素具有向上20px、向右30px、向下30px、向右20px的外边距。

h1 {

  margin-top: 20px;

  margin-right: 30px;

  margin-bottom: 30px;

  margin-left: 20px;

  }

这样是看上去是不是很复杂呢？前面我们介绍了margin属性是四个外边距属性设置的简写。所以我们可以将上面设置h1元素外边距的代码简写为：

h1{

margin: 20px 30px 30px 20px;

  }

       设置值的顺序是从上外边距开始围着元素顺时针旋转的器对应关系如下：

h1{

margin: top right bottom left;

}

2、margin属性中不一定必须要传入四个属性值，它分为一下几种情况：

· 只有一个  值时，这个值会被指定给全部的 四个边。

· 两个 值时，第一个值被匹配给 上和下, 第二个值被匹配给 左和右。

· 三个 值时，第一个值被匹配给 上, 第二个值被匹配给 左和右, 第三个值被匹配给 下。

· 四个 值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序)。

示例如下：

h1{margin: 1px;}//等价于 h1{1px 1px 1px 1px}

h1 {margin: 0.5px 1px;}// 等价于 h1{0.5px 1px 0.5px 1px }

h1 {margin: 0.25px 1px 0.5px;}//等价于h1{ 0.25px 1px 0.5px 1px}

3、设置单边或多边外边距的语法

//设置向上外边距为20px。

h1{margin-top: 20px;}

//设置上外边距和左外边距均为20px

h1{margin-top: 20px; margin-left: 20px;}

二、padding属性

     padding属性则是设置给定元素内边距的属性，它和margin属性一样也是四个内边距属性的简写，四个内边距属性分别是：padding-top、padding-right、padding-bottom、padding-left。它的使用方法与margin属性的使用方法也是相类似的，这里就不再说明了。

三、padding属性和margin属性的区别

    padding属性和margin属性的区别这就涉及到了CSS中的盒模型了。下图是一个盒模型的图示。当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。padding属性是设置是内容框与边框之间的距离的属性，而margin属性则是设置元素外边框与其他元素的距离。这就是他们的区别。这些内容都是属于CSS中的基础知识。在一个叫做秒秒学的网中有相关的介绍，有兴趣可以看看。

CSS的盒模型中,Margin属性的数值赋予顺序为()

如果后面1个值，四个方位边距都统一是这个
如果后面是2个值，第1个表示上下，第2个表示左右
如果后面是3个值，第1个表示上，第2个表示左右，第3个表示下
如果后面是4个值，则分别是上 右 下 左

javascript中margin:50px 0px 0px 30px; 各个值的定义

设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

请问WPF 设置 margin 的 value 顺序是上右下左还是上左下右

wpf和siverlight一样，对于margin或padding的设置方向是“左上右下”，需要注意的是padding的四个值必须是0或正数，而margin是可以小于0的。

CSS中margin:auto是自动居中吗

先看margin，margin有4个值：margin:10px 11px 9px 8px; ，按顺序分别代表对象与父容器的上、右、下、左的距离值为10px,11px,9px,8px。
如果只写两个值：margin:10px 5px; ，表示对象与父容器的上下距离值都是10px，与左右的距离值都是5px。
那么这时候我们来看margin:0 auto; ，这个就表示上下的距离值是0，而左右就是自动适应，也就是我们常说的自动居中。
而你所说的margin:auto; ， 就表示上下左右都自动适应。
纯手打，望采纳。