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

时间：2022-02-02 03:47:01
[html] view plain copy
  1. <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
  1. <span style="font-size:24px;color:#ff0000;">  
  2. </span>  
 [html] view plain copy
  1. <span style="font-size:24px;color:#ff0000;">你们可以将代码复制过去自己对比演示一下</span>  
 [html] view plain copy
  1. <span style="font-size:24px;color:#ff0000;">边距设置为百分比的时候的图对比展示,我改变的是div11,你们最好改变一下div21,div22,div23</span>  
 [html] view plain copy
  1. </pre><pre class="html" name="code"><span style="font-size:24px;color:#ff0000;">边距分别设置为百分比、具体值px时候的图例对比展示</span>  
 [html] view plain copy
  1. <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
  1. <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
  1. </pre><pre class="html" name="code">  
 [html] view plain copy
  1. </pre><pre class="html" name="code">  
 [html] view plain copy
  1. </pre><pre class="html" name="code">  
 [html] view plain copy
  1. 源码：  
 [html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>test div</title>  
  6. </head>  
  7.   
  8.         <style>  
  9.   
  10.         body{  
  11.             width: 100% auto;  
  12.             margin:0;  
  13.         }  
  14.         #div1{  
  15.             background-color: grey;  
  16.             width: 100% auto;  
  17.             height: 800px;  
  18.         }  
  19.   
  20.         #div11{  
  21.             margin-left: 100px;  
  22.             float: left;  
  23.             border: solid 1px;   
  24.             height: 50px;  
  25.             width: 50px;  
  26.         }  
  27.   
  28.         #div12{  
  29.             margin-left: 400px;  
  30.             border: solid 1px;   
  31.             height: 250px;  
  32.             width: 350px;  
  33.         }  
  34.   
  35.                 #div21{  
  36.             margin-left: 10%;  
  37.             float: left;  
  38.             /*clear: both;*/  
  39.             border: solid 1px;   
  40.             height: 50px;  
  41.             width: 50px;  
  42.         }  
  43.   
  44.                 #div22{  
  45.             margin-left: 10%;  
  46.             float: left;  
  47.             border: solid 1px;   
  48.             height: 50px;  
  49.             width: 50px;  
  50.         }  
  51.   
  52.                         #div23{  
  53.             margin-left: 10%;  
  54.             float: left;  
  55.             clear: both;  
  56.             border: solid 1px;   
  57.             height: 50px;  
  58.             width: 50px;  
  59.         }  
  60.   
  61.             #div24{  
  62.             margin-left:10%;  
  63.             float: left;  
  64.             border: solid 1px;   
  65.             height: 50px;  
  66.             width: 50px;  
  67.         }  
  68.   
  69.         #div13{  
  70.             margin-left: 100px;  
  71.             border: solid 1px;  
  72.             width: 100% auto;  
  73.             height: 40px;  
  74.         }  
  75.         </style>  
  76.   
  77.   
  78. <body>  
  79.   
  80.     <div id="div1">  
  81.         <div id="div11">div11</div>  
  82.         <div id="div12">  
  83.             <div id="div21">div21</div>  
  84.             <div id="div22">div22</div>  
  85.             <div id="div23">div23</div>  
  86.             <div id="div24">div24</div>  
  87.         </div>  
  88.         <div id="div13">div13</div>  
  89.     </div>  
  90.   
  91.   
  92.       
  93. </body>  
  94. </html>  
标签：

相关文章