div+css如何讓頁面隨著視窗的變化內容位置不變
阿新 • • 發佈：2019-02-11
<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>