UID1
性别保密
在线时间4546 小时
最后登录2024-11-22
好友6
管理员
  
.gif) .gif) .gif)
|
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>
<html>
<head>
<meta charset="UTF-8" />
<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></div>
<div>负margin</div>
<div></div>
</body>
</html>
2.2 针对浮动元素设置负margin
若两个元素都为浮动，且.box1的元素设定margin-right为20px。这样.box2会认为.box1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，.box1的内容不受影响，保持原有的宽度。
如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<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>负margin</div>
<div></div>
</body>
</html>
三、margin负值4种常见应用
3.1 左右列固定，中间列自适应布局
此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。
<body>
<!-- HTML -->
<div>
<div>Main</div>
</div>
<div>Left</div>
<div>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>
<!-- HTML -->
<div id="test">
<ul>
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
<li>子元素6</li>
</ul>
</div>
</body>
<style>
/* CSS样式 */
body,
ul,
li {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
#test {
width: 320px;
height: 210px;
background: #ccc;
}
#test ul {
margin-right: -10px;
zoom: 1;
}
#test ul li {
width: 100px;
height: 100px;
background: #f60;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
</style>
3.3 负边距+定位：水平垂直居中
使用绝对定位将div定位到body的中心，然后使用负margin（content宽高的一半），将div的中心拉回到body的中心，已到达水平垂直居中的效果。
<body>
<!-- HTML -->
<div>
<div id="test"></div>
</div>
</body>
<style>
/* CSS样式 */
.box {
width: 400px;
height: 200px;
position: relative;
border: 1px solid black;
}
#test {
width: 200px;
height: 100px;
background: #f60;
position: absolute;
left: 50%;
top: 50%;
/* 值为自身宽度一半 */
margin-left: -100px;
/* 值为自身高度一半 */
margin-top: -50px;
}
</style>
3.4 去除列表最后一个li元素的border-bottom
列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。
<body>
<!-- HTML -->
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
<style>
/* CSS样式 */
body,
ul,
li {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
#test {
margin: 20px;
width: 300px;
background: #f4f8fc;
border-radius: 3px;
border: 2px solid #d7e2ec;
}
#test li {
height: 25px;
line-height: 25px;
padding: 5px;
border-bottom: 1px dotted #d5d5d5;
margin-bottom: -1px;
}
</style>
总结
总的来说，负Margin是一种在CSS布局中非常有用的技巧，可以用于微调元素的位置、调整元素的层叠顺序、消除元素之间的空隙等。
在静态元素中，应用负Margin可以将元素的位置向外偏移，但是需要注意避免元素重叠，影响布局效果。在非静态定位的元素中，负Margin可能会对其位置和布局产生复杂的影响，需要谨慎使用。 |
|
发表于 2024-10-11 13:23:11
