一、 html结构:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
二、CSS样式
(1)定义容器样式
*{
padding: 0;
margin: 0;
}
.container{
min-width:400px;
height:200px;
background-color: blue;
}
在浏览器中的效果:
image.png
(2)给三个盒子添加宽高和背景色:
.left,.right{
width:200px;
height:200px;
background-color: green;
float: left;
}
.main{
width:100%;
height:200px;
background-color: red;
float: left;
}
在浏览器中的效果:
image.png
我们想要.left和.right可以在红色这一行的左右两边，而此时是被.main给“挤”下去了。利用给 父容器container添加padding，为.left和.right留出位置
(3)为父容器container添加padding
.container{
min-width:400px;
height:200px;
background-color: blue;
padding:0 200px;
}
在浏览器中的效果:
image.png
出现这种现象的原因是:
由于父容器container设置了padding，因此子元素的实际内容宽度为除去padding之后的内 容，因此.left和.right会出现右移和上方.main的红色区域左侧对齐的情况，而左右两块设置的 padding也是我们为绿色的.left和.right预留的位置，现在我们要做的就是让.left和.right两个 绿块移动到相应位置。
image.png
(4).left的移动(重点)
首先是.left，我们要使用外边距margin为负朝相反方向移动的特性来完成相应的功能，但由 于两个蓝块是padding的位置，因此.left设置的外边距移动时并不包含父元素container的 padding，由于.main的红色区块已经占满了剩余位置，因此.left的绿块会移动到上一行。 即.left{margin-left:-100%}实际向左移动的路线为下图黄色箭头:
image.png
为.left单独添加样式:
.left{
margin-left:-100%;
}
在浏览器中的效果:
image.png
发现.left已经发生了移动，而.right由于左侧的.left腾出了位置，因此移动到了原来.left的位 置。现在我们需要将上面.left的绿块移动到左边蓝色的位置，这里也许有朋友要问为什么不继 续用margin-left:-200px直接移动过去，或者一开始为什么不用margin-left?这里的原因就是 我们刚刚讲过的，由于蓝色区块是父容器contianer设置的padding位置，因此子元素设置 margin只能够在剩下的content区域内。这里我们可以参照一下Chorme浏览器的盒模型:
image.png
padding是在实际内容content之外的，内部子元素设置margin只能在这个content区域内。 因此上面我们设置.left{margin-left:-100%}没有到达左侧的蓝色padding区块就是这样的原 因。
当然我们可以看一下此时继续设置.left{margin-left:-200px}的效果: 此时.left的样式为:
.left{
margin-left:-100%;
margin-left:-200px;
}
在浏览器中的效果:
image.png
发现.left的绿块并没有移动蓝色位置，而是在content红色区块的范围内进行了移动，这证实 了我们的结论。不能使用margin，我们考虑另一种解决方案，使用定位:将.left设置为相对 定位，以其自身位置为参照，向左移动200排序，这样就可以到达蓝色区块的位置了。有朋友 要疑惑为什么定位可以不受content大小的限制呢?这是因为position是基于全局的，整个浏 览器的窗口任意位置都是可以进行定位的。
因此我们为.left加入定位样式:
.left{
margin-left:-100%;
margin-left:-200px;
position: relative;
left:-200px;
top:0px;
}
在浏览器中的效果:
image.png
可以看到效果跟我们所预期的是一样的。
(5).right的移动
明白.left的移动后，.right的移动就很容易了。我们同样使用margin，移动和.right宽度一致 的宽度可以使它移动到如下位置(下图中黄色框):
image.png
不会直接移动到蓝色框和上面的.left是同样的原因。 接下来我们为.right添加margin-left:-200px的样式:
.right{
margin-left: -200px; position: relative; //新加样式
}
在浏览器中的效果:
image.png
结果跟我们想的一样，接下来我们只需要通过定位将.right的绿色区块移动到右侧蓝色区块即 可:
image.png
为.right添加position样式:
.right{
margin-left: -200px;
position: relative;
right:-200px;
top:0px;
}
在浏览器中的效果:
image.png
这样我们就最终实现了我们想要的结果。
所有实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.left,.right{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.main{
width:100%;
height: 200px;
background-color: green;
float: left;
}
.container{
min-width:400px;
height:200px;
background-color: blue;
padding:0 200px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
right: -200px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
喜欢的关注下公众号哦,每天都有新的博文推送哦
wechat.jpg
网友评论