前端全栈基础之CSS中margin负值

最新推荐文章于 2024-08-24 17:13:38 发布

尚硅谷铁粉

最新推荐文章于 2024-08-24 17:13:38 发布

阅读量312

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/zjjcchina/article/details/131570968

版权

Margin（外边距）是CSS中的一种盒子模型属性，用于控制元素周围的空白区域大小。Margin属性可以用来控制元素与其他元素之间的间距、元素与边框之间的间距、元素与视口边界之间的间距等。我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度矛盾很大，有的人非常喜欢，而有的人则非常讨厌。

一、margin属性

Margin属性有以下一些属性值：

1.margin-top: 设置元素上方的外边距大小；

2.margin-right: 设置元素右侧的外边距大小；

3.margin-bottom: 设置元素下方的外边距大小；

4.margin-left: 设置元素左侧的外边距大小；

5.margin: 可以同时设置四个方向的外边距大小；

- 合写margin属性,直接后边跟4个值:分别代表 上右下左

- 合写margin属性,直接后边跟3个值:分别代表 上左右下

- 合写margin属性,直接后边跟2个值:分别代表 上下左右

- 合写margin属性,直接后边跟1个值:代表所有方向都是这个值

Margin属性的值可以为像素（px）、百分比（%）、em等单位，也可以为auto、inherit等关键字。以下是Margin属性的一些常用用法：

/* 分别设置每个方向的外边距：*/

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

/* 合写margin属性,直接后边跟4个值:分别代表上右下左*/

margin: 100px 110px 120px 130px;

/* 合写margin属性,直接后边跟3个值:分别代表上左右下*/

margin: 100px 120px 130px;

/* 合写margin属性,直接后边跟2个值:分别代表上下左右*/

margin: 100px 130px;

/* 合写margin属性,直接后边跟1个值:代表所有方向都是这个值*/

margin: 100px;

二、负margin

负margin（Negative Margin）是指在CSS中，将元素的外边距设置为负值，从而使该元素的内容向外移动，与相邻元素重叠或者超出容器边界的一种技术。

2.1 静态元素的负margin

静态元素（static positioned element）指的是元素的position属性设置为static（默认值）时的状态，此时元素不受top、right、bottom、left等属性的影响，位置由文档流控制。

对于静态元素，应用负Margin的效果是将元素的位置向外偏移。具体来说，如果给一个静态元素设置负的margin-top值，那么元素会向上偏移。

如果设置的是top和left，那么元素会向如图所示的方向移动；

如果设置的是right和bottom，元素不会移动，而元素后的内容会随着箭头过来覆盖当前元素。

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

div {

width: 100px;

height: 100px;

margin: 10px;

}

.box1 {

background-color: red;

}

.box2 {

background-color: bisque;

margin-top: -30px;

margin-left: -30px;

margin-right: -30px;

margin-bottom: -30px;

}

.box3 {

background-color: coral;

}

</style>

</head>

<body>

<div class="box2">负margin</div>

</body>

</html>

2.2 针对浮动元素设置负margin

若两个元素都为浮动，且.box1的元素设定margin-right为20px。这样.box2会认为.box1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，.box1的内容不受影响，保持原有的宽度。

如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

.box1 {

width: 100px;

height: 100px;

background-color: coral;

float: left;

/* margin-right: -20px; */

margin-right: -100px;

}

.box2 {

width: 100px;

height: 100px;

background-color: greenyellow;

float: left;

}

</style>

</head>

<body>

<div class="box1">负margin</div>

</body>

</html>

三、margin负值4种常见应用

3.1 左右列固定，中间列自适应布局

此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。

<body>

</div>

<div class="right">Right</div>

</body>

<style>

/* CSS样式 */

body {

margin: 0;

padding: 0;

min-width: 600px;

}

.main {

float: left;

width: 100%;

}

.main_body {

margin: 0 210px;

background: #888;

height: 200px;

}

.left,

.right {

float: left;

width: 200px;

height: 200px;

background: #f60;

}

.left {

margin-left: -100%;

}

.right {

margin-left: -200px;

}

</style>

3.2 去除列表右边框

项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：

<body>

<ul>

</ul>

</div>

</body>

<style>

/* CSS样式 */

body,

ul,

li {

padding: 0;