<span style="font-size:24px;color:#000000;">有时候层div内元素会随着浏览器的缩放大小改变,内容位置会上下左右变化,其实是因为我们的边距设置问题。为了不让层div内容随着浏览器缩放而变化,我们应该设置最外层div的margin,比如左边距margin-left为一个具体的值px,而不能设置为百分比%,因为百分比是按浏览器的大小或者说父元素的大小来改变距离的,浏览器绽放影响了父元素的大小,因为div里面的内容形式会改变,下面用了一个很简单的例子演示了一下,我也是初学,做网页的时候碰到了,自己研究了一下<img alt="吐舌头" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/tongue.gif" />。</span>
<span style="font-size:24px;color:#ff0000;">
</span>
<span style="font-size:24px;color:#ff0000;">你们可以将代码复制过去自己对比演示一下</span>
<span style="font-size:24px;color:#ff0000;">边距设置为百分比的时候的图对比展示,我改变的是div11,你们最好改变一下div21,div22,div23</span>
</pre><pre class="html" name="code"><span style="font-size:24px;color:#ff0000;">边距分别设置为百分比、具体值px时候的图例对比展示</span>
<span style="font-size:24px;color:#ff0000;"><img src="https://img-blog.csdn.net/20150430160046561?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="https://img-blog.csdn.net/20150430160246322?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>
<img src="https://img-blog.csdn.net/20150430155826192?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</pre><pre class="html" name="code">
</pre><pre class="html" name="code">
</pre><pre class="html" name="code">
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test div</title>
</head>
<style>
body{
width: 100% auto;
margin:0;
}
#div1{
background-color: grey;
width: 100% auto;
height: 800px;
}
#div11{
margin-left: 100px;
float: left;
border: solid 1px;
height: 50px;
width: 50px;
}
#div12{
margin-left: 400px;
border: solid 1px;
height: 250px;
width: 350px;
}
#div21{
margin-left: 10%;
float: left;
/*clear: both;*/
border: solid 1px;
height: 50px;
width: 50px;
}
#div22{
margin-left: 10%;
float: left;
border: solid 1px;
height: 50px;
width: 50px;
}
#div23{
margin-left: 10%;
float: left;
clear: both;
border: solid 1px;
height: 50px;
width: 50px;
}
#div24{
margin-left:10%;
float: left;
border: solid 1px;
height: 50px;
width: 50px;
}
#div13{
margin-left: 100px;
border: solid 1px;
width: 100% auto;
height: 40px;
}
</style>
<body>
<div id="div1">
<div id="div11">div11</div>
<div id="div12">
<div id="div21">div21</div>
<div id="div22">div22</div>
<div id="div23">div23</div>
<div id="div24">div24</div>
</div>
<div id="div13">div13</div>
</div>
</body>
</html>