布局和margin负值问题
双飞翼布局
双飞翼布局是将一个网页分为左列、中列和右列三部分，并且我们要得到的效果是：左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。
实现代码：
<!DOCTYPE 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>Document</title>
<style>
body {
min-width: 600px;
color: #fff;
}
.column{
float: left;
height: 100px;
}
.center {
width: 100%;
background-color: rgb(69, 58, 226);
}
.left {
width: 200px;
background-color: rgb(28, 168, 161);
margin-left: -100%;
}
.wrap {
margin: 0 150px 0 200px;
}
.right {
width: 150px;
background-color: rgb(214, 44, 143);
margin-left: -150px;
}
</style>
</head>
<body>
<div class="column center">
<div class="wrap">test</div>
</div>
<div class="column left"></div>
<div class="column right"></div>
</body>
</html>
实现效果：
圣杯布局
实现代码：
<!DOCTYPE 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>Document</title>
<style>
body {
color: #fff;
min-width: 600px;
}
.header {
width: 100%;
height: 100px;
background-color: rgb(69, 201, 80);
}
.container {
padding: 0 150px 0 200px;
}
.container .column {
height: 200px;
float: left;
}
.center {
width: 100%;
background-color: rgb(47, 88, 221);
}
.left {
width: 200px;
background-color: rgb(231, 67, 122);
margin-left: -100%;
position: relative;
right: 200px;
}
.right {
width: 150px;
background-color: rgb(206, 170, 51);
margin-right: -150px;
}
.footer {
/* clear: both; */
width: 100%;
height: 80px;
background-color: rgb(136, 111, 111);
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="header">this is header</div>
<div class="container clearfix">
<div class="column center">center</div>
<div class="column left">left</div>
<div class="column right">right</div>
</div>
<div class="footer">this is footer</div>
</body>
</html>
实现效果：
margin负值问题
- margin-top和margin-left负值, 元素向上、向左移动
- margin-right负值, 右侧元素左移, 自身不受影响
- margin-bottom负值, 下方元素上移, 自身不受影响
