Css固定元素位置（不随着窗口大小位置改变)

来源：互联网发布：中国5g网络相关企业编辑：程序博客网时间：2024/05/12 01:09

[html] view plain copy
<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>  

[html] view plain copy
<span style="font-size:24px;color:#ff0000;">  
</span>  

[html] view plain copy
<span style="font-size:24px;color:#ff0000;">你们可以将代码复制过去自己对比演示一下</span>  

[html] view plain copy
<span style="font-size:24px;color:#ff0000;">边距设置为百分比的时候的图对比展示,我改变的是div11,你们最好改变一下div21,div22,div23</span>  

[html] view plain copy
</pre><pre class="html" name="code"><span style="font-size:24px;color:#ff0000;">边距分别设置为百分比、具体值px时候的图例对比展示</span>  

[html] view plain copy
<span style="font-size:24px;color:#ff0000;"><img src="http://img.blog.csdn.net/20150430160046561?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160144125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><img src="http://img.blog.csdn.net/20150430160246322?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span>  

[html] view plain copy
<img src="http://img.blog.csdn.net/20150430155826192?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDg2OTc1NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />  

[html] view plain copy
</pre><pre class="html" name="code">  

[html] view plain copy
</pre><pre class="html" name="code">  

[html] view plain copy
</pre><pre class="html" name="code">  

[html] view plain copy
源码：  

[html] view plain copy
<!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>  

阅读全文

0 0