margin设置负值后，会怎样？有何应用？（圣杯布局和双飞翼布局）
margin负值有什么效果？
- margin-left 负值，元素自身向左移动
- margin-top 负值，元素自身向上移动
- margin-right 负值，右边的元素向左移动
- margin-bottom 负值，下边的元素向上移动
margin负值的应用
- 增加宽度
- 圣杯布局
- 双飞翼布局
代码
margin负值
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
margin: 50px;
border:5px solid red;
}
.div1{
float: left;
width: 200px;
height: 200px;
background: green;
/* margin-top: -50px;
margin-left: -50px; */
/* margin-bottom: -50px; */
margin-right: -50px;
}
.div2{
float: left;
width: 150px;
height: 150px;
background: #011;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>
增加宽度
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>增加宽度</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
overflow: hidden;
width: 620px;
margin: 50px auto;
border: 5px solid red;
}
.box ul {
overflow: hidden;
background: #ccc;
margin-right: -10px;
}
.box ul li {
float: left;
width: 200px;
height: 200px;
background: green;
margin-right: 10px;
}
</style>
<body>
<div class="box">
<ul>
<li>图片1</li>
<li>图片2</li>
<li>图片3</li>
</ul>
</div>
</body>
</html>
圣杯布局
圣杯布局就是两边固定宽度，中间自适应宽度
难点
- margin-left:-100%; 100% 是父级宽度的100%
- margin-right:150px; 其他元素当他宽度少了150px
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
padding-left: 200px;
padding-right: 150px;
background-color: #000;
}
.item {
float: left;
color: #fff;
font-size: 20px;
}
.content {
width: 100%;
height: 200px;
background-color: green;
}
.left-item {
width: 200px;
background-color: red;
margin-left: -100%;
position: relative;
right: 200px;
}
.right-item {
width: 150px;
background-color: blue;
margin-right: -150px;
}
</style>
<body>
<div class="container">
<div class="content item">圣杯布局</div>
<div class="left-item item">left</div>
<div class="right-item item">right</div>
</div>
</body>
</html>
双飞翼布局
双飞翼布局类似，同样都是左右宽度固定，中间宽度自适应，中间的内容优先加载
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
overflow: hidden;
}
.item {
float: left;
color: #fff;
font-size: 20px;
}
.container {
width: 100%;
background-color: #000;
}
.content {
height: 200px;
background-color: green;
margin-left: 200px;
margin-right: 150px;
}
.left-item {
width: 200px;
background-color: #336;
margin-left: -100%;
}
.right-item {
width: 150px;
background-color: hotpink;
margin-left: -150px;
}
</style>
<body>
<div class="box">
<div class="container item">
<div class="content">双飞翼布局 </div>
</div>
<div class="left-item item">left</div>
<div class="right-item item">rieht</div>
</div>
</body>
</html>
