margin-right(cssmargin属性auto)

margin-right

在css中，margin-right的意思为“右外边距”，是用于设置元素的右边方位距离的一个外边距特点。
margin-right特点设置元素的右边距，特点值能够是负数。假如我们需求一起设置元素的上下左右的外边距，我们能够运用margin特点来设置。
margin-right特点语法格局：
margin-right:auto|length|%
值描绘
auto浏览器设置的右外边距。
length定义固定的右外边距。默认值是0。
%定义基于父目标总宽度的百分比右外边距。
示例1：百分比的相对值
设置一个p元素的右边距为容器宽度的50%
一个没有指定边距巨细的阶段。一个没有指定边距巨细的阶段。一个没有指定边距巨细的阶段。
一个右边距为容器宽度的50%的阶段。一个右边距为容器宽度的50%的阶段。一个右边距为容器宽度的50%的阶段。一个右边距为容器宽度的50%的阶段。一个右边距为容器宽度的50%的阶段。
示例2：设置固定值
设置一个p元素的右边距为50px
一个没有指定边距巨细的阶段。一个没有指定边距巨细的阶段。一个没有指定边距巨细的阶段。
一个右边距为50px的阶段。一个右边距为50px的阶段。一个右边距为50px的阶段。一个右边距为50px的阶段。一个右边距为50px的阶段。
扩展知识：margin负值
负边距即margin特点的值设为负值，在CSS布局中时一个很有用的技巧。值为正的场景很常见，我们都很了解其体现
当margin-top、margin-left为负值的时分，会把元素上移、左移，一起文档流中的方位也产生相应变化,这点与position:relative的元素设置top、left后元素还占有原来方位不同
当margin-bottom、margin-right设为负值的时分，元素本身没有方位变化，后边的元素会下移、右移。
你遇到的情况这里应该都会包括：
块级元素设置margin-topmargin-bottom都会产生位移，只不过设置margin-bottom，会产生位移的是其后边的元素;
行内元素设置margin-topmargin-bottom都不会产生位移,添加绝对定位(让其脱离文档流，比方浮动固定定位)，设置margin-top会产生位移;改动vertical-align的设置（middletop），行内块元素设置margin-topmargin-bottom能够产生位移；
设置margin-left块级元素和行内元素都会产生位移，不同的是块级元素后边的内容不会产生位移，行内元素后的内容会产生位移(由于行内元素后的内容是跟它在同一行呀);
块级元素设置margin-right,本身宽度添加；行内元素设置margin-right，元素后边的行内元素会依据数值位移
注：影响margin显现作用的要素：display定位机制verticle-align

cssmargin属性auto

就跟咱们聊聊有关css中margin:auto特点的运用方法，或许很多人都不太了解，为了让咱们更加了解，小编给咱们总结了以下内容，期望咱们依据这篇文章能够有所收获。
咱们都知道运用margin:auto能够让元素水平居中的。但你有没有想过运用margin:auto能够让元素水平居中的原因，要回答这个问题，咱们首要需求看一下margin：auto的作业原理。auto假如它适用于笔直居中，那么又是一种什么情况，下面咱们来看具体内容。
首要auto是做什么的？
定义auto元素，因元素类型和上下文而异。在边距中，auto能够表示两种情况：占用可用空间或0px。这两个将为元素定义不同的布局。
“主动”占用可用空间
这是咱们利用auto最常见的用法。经过分配auto元素的左右边距，它们能够平等地占据元素容器中的可用水平空间-因而元素将居中。
margin:auto;
width:250px;
height:125px;
background-image:linear-gradient(45deg,#84ECEF10%,#F8F62F60%,#FDC018);
}
#outer{
height:500px;
width:500px;
background:#1F1D20;
background-image:linear-gradient(#7575751px,transparent1px),linear-gradient(90deg,#7575751px,transparent1px);
background-size:25px25px;
}
作用如下：
但是，这只适用于水平边距，它不适用于浮动和内联元素，而且它本身也不能用于肯定和固定定位元素。
因为auto左右边距均匀地占据“可用”空间，当你auto只给出其间一个时，你以为会产生什么？
左面距或右边距auto将占据一切“可用”空间，使元素看起来像是向右或向左偏移。
margin-right:auto;
width:250px;
height:125px;
background-image:linear-gradient(45deg,#84ECEF10%,#F8F62F60%,#FDC018);
}
#outer{
height:500px;
width:500px;
background:#1F1D20;
background-image:linear-gradient(#7575751px,transparent1px),linear-gradient(90deg,#7575751px,transparent1px);
background-size:25px25px;
}
作用如下：
“auto”为0px
如前所述，auto在浮动，内联和肯定元素中不起作用。一切这些元素已经决定了它们的布局，所以没有auto用于边距并期望它像这样集中。
这将损坏运用相似float的开始目的。因而设置这些元素的auto值为0px。
auto假如它没有宽度，也不会对典型的块元素起作用。到目前为止我向你展示的一切比如都有宽度。
值的宽度auto将具有0px边距。块元素的宽度一般覆盖其整个容器，它是auto或100%，因而margin:auto将被设置为0px。
auto设置笔直会是怎样的呢？
auto在顶部和底部边距中总是计算为0px(肯定元素在外)。W3C规范说它是这样的：
“假如”margin-top“或”margin-bottom“为”auto“，则其运用值为0”
到目前为止，为什么这没有说。这或许是因为典型的笔直页面流，页面大小在高度方面增加。因而，相对于页面本身而言，将元素笔直居中于其容器中不会使其显示为居中，这与水平完结(在大多数情况下)不同。
也许是因为同样的原因，他们决定为肯定元素增加一个破例，它能够在整个页面的高度笔直居中。
这也或许是因为边际崩塌效应(相邻元素“边际”的崩溃)，这是笔直边距的另一个破例。
然而，后者似乎是一个不太或许的情况-因为不会折叠其边距的元素-如Floats和overflow其他元素visible，依然为其分配0px笔直边距auto。
以肯定定位元素为中心
因为肯定定位元素恰好存在反常，咱们将运用auto值笔直和水平居中。但在此之前，咱们需求找出margin:auto实际作业的时间，就像咱们期望它在肯定定位的元素中一样。
这是另一个W3C规范的用武之地：
“假如”left“，”width“和”right“中的一切三个都是”auto“：首要将”margin-left“和”margin-right“的任何”auto“值设置为0…”
“假如三者中没有一个是”主动“：假如”margin-left“和”margin-right“都是”auto“，则在额外束缚条件下处理方程式，即两个边距得到持平的值”
这简直说，对水平auto的利润率，捉住距离持平，则对值left，width而且right不应该auto，他们的默认值。因而，咱们所要做的就是在肯定定位的元素中赋予它们一些价值。left而且right应该具有相同的值以实现完美的居中。
该规范还提到了笔直边距相似的东西。
“假如”top“，”height“和”bottom“中的一切三个都是auto，则将”top“设置为静态位置…”
“假如三者中没有一个是”主动“：假如”margin-top“和”margin-bottom“都是”auto“，则在额外束缚下处理方程式，即两个边距得到持平的值……”
因而，对于一个肯定元件被笔直居中，其top，height和bottom值不应该auto。
现在结合一切这些，这是咱们将得到的：
CSS
Result
EDITON#inner{
margin:auto;
position:absolute;
left:0px;
right:0px;
bottom:0px;
top:0px;
width:250px;
height:125px;
background-image:linear-gradient(45deg,#84ECEF10%,#F8F62F60%,#FDC018);
}
#outer{
position:relative;
height:500px;
width:500px;
background:#1F1D20;
background-image:linear-gradient(#7575751px,transparent1px),linear-gradient(90deg,#7575751px,transparent1px);
background-size:25px25px;
}
作用如下：
最后
假如您想要将页面上的元素向右或向左偏移而没有包括它的其他元素(就像浮点数一样)，请记住有auto用于边距的选项。
将元素转换为肯定定位只是为了使它能够笔直居中或许不是一个好主意。还有其他选项，如flexbox和CSS改换，更适合那些。
看完上述内容，你们对css中margin:auto特点的运用方法有进一步的了解吗？假如还想了解更多知识或许相关内容，请关注亿速云行业资讯频道，感谢咱们的支持。