`
- 浏览:
2028 次
- 来自:
北京
-
1.当元素紧邻容器的左边界时
1.1.margin-right
不管margin-right为何值都不会影响元素的位置。
当margin-right为正，而这个值不足够抵达容器右边界时，元素的位置理所当然不会有任何变化。当这个值足够大抵达容器右边界时，我们可以想象成该元素此时正受到来自右边界的推力，而这个推力值就是margin-right减去元素与右边界的距离。当margin-right的值无限大时，这个推力无限大，但是此时元素已经背抵容器左边界，毫无退路，所以它的位置丝毫不会受这个力的影响。
当margin-right为负，我们可以理解为元素的右边界塌陷了。同时，我们可以想象一条虚拟的元素右边界正在随着margin-right绝对值的增大而向左移动着。如果这个元素是浮动元素A，且它的后面紧邻另一个浮动元素B，那么后一个元素B就会紧贴着A元素的虚拟右边界而慢慢侵入A，当这个塌陷值足够大时，B甚至可以离开A并在A元素的左方越行越远。当然，我们此处讨论的是A元素背抵容器左边界的情况，那么B元素最多就是抵达容器的左边界。
1.2.margin-left
同理，当margin-left为正时，我们想象这个元素受到容器左边界的反作用力。而此时元素右边界没有依靠，所以它会受力向右移动，直到抵达容器右边界为止。
此时的margin-left为负值没有多大意义，
分享到：
相关推荐
此demo运用margin负边距解决一些边框、间距问题
在这篇文章中，我们主要讨论了自适应布局的实现方式，特别是使用浮动和margin负边距的技巧，以及相关的圣杯布局和双飞翼布局。 首先需要了解的是浮动布局。浮动布局是CSS布局的一种方式，通过使用float属性，可以让...
在众多的CSS布局技术中，负边距（negative margin）虽然较少被公开讨论，但它却在网页设计中扮演着重要的角色。就像一个网络上的禁忌话题，虽然大家都在使用，但很少有人愿意深入探讨。 负边距在CSS中是一种强大的...
CSS中的负边距（negative margin）是一种强大的布局工具，尤其在处理复杂或自适应的网页设计时显得尤为重要。它允许开发者调整元素的位置，甚至在某些情况下改变元素的尺寸。以下是对负边距更详细的解释和应用场景：...
本知识点将探讨如何使用隐藏和负边距技巧来实现一个在所有主流浏览器中均兼容的ul（无序列表）和li（列表项）并列布局效果。 在该技术中，我们主要关注的CSS属性有： 1. display: inline; 和 display: inline-...
最后，Android的布局系统会将所有View组织在一个栈序列内，当使用负边距时，这个序列的层次关系变得尤为重要，因为它决定了哪些View会覆盖其他View。如果多个View设置了负边距并相互重叠，它们的堆叠顺序（由Z轴决定...
1. 一个值代表所有边距相同，如`margin: 10px;`。 2. 两个值分别代表上下和左右，如`margin: 10px 20px;`。 3. 三个值代表上、左右和下，如`margin: 10px 20px 30px;`。 4. 四个值对应上、右、下、左，如`margin: 10...
接下来，我将详细解析margin属性的特性，并回答关于何时使用padding而不是margin，负margin的使用以及常见浏览器下的bug等问题。 首先，margin是CSS中用于控制元素周围的空间的属性，也就是说，它用于定义一个元素...
CSS中的负margin值是用于调整布局中元素位置的一种技术手段，尤其在实现元素居中时非常有用。在CSS中，margin属性用于设置元素周围的空间，正值会增加元素外边距，而负值则会减少外边距，甚至可以使得元素的一部分...
负边距实现等高是另一种常见的方法。这种方法主要利用了 `padding-bottom` 和 `margin-bottom` 两个属性，父元素 `container` 层内添加了 `overflow` 属性，其中 `margin` 为负值，`padding` 为正值。 CSS 代码如下...
你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇...
为了解决这个问题，可以采用一种称为“负边距（negative margin）”的技术。具体来说，就是给父容器设置与子元素相对应的负边距值，以抵消子元素的正边距，从而使得元素能够紧贴父容器的边缘，实现两端对齐。 在这...
负margin在网页设计中是一个非常有用的技术，通过使用负的边距值，开发者可以实现一些布局上的特殊效果。本文将详细介绍负margin的一些应用，并通过具体的例子来解释其工作原理。 1. 实现左右两列布局 在网页布局中...
首先，设定元素的宽度加上左右边距（例如，30% + 3.3%）以填满父容器，然后将父容器的`margin-left`设置为负的边距值（如-3.3%）。这种方法的一个小问题是，由于margin基于父元素计算，可能存在微小的计算误差，但在...