当我们学习过div布局的时候，你肯定会有这样的疑问：为什么别人的网页无论怎么缩放都不会影响它的想对位置，而我的页面在使用浏览器对页面进行放大缩小的时候，有时候会出现错位，或者边框无法吻合。将页面缩小到最小时，页面内容将会堆砌在一起呢？
首先出现这个问题的主要原因还是因为你对浮动、定位的理解不够透彻！下面我整理了几种解决的方案
方案（一）：将width采用百分比设置 虽然“溢出“问题解决了，但当放到一定程度，使字的显示大小超过块的宽度时，字的排版就会乱掉。这个时候可以在 字条外加上<font></font>标签，并且将其转换成块元素，设置宽高度，注意框的大小只要把字体框住就可以了。下面我以登陆CSDN页面讲解吧
<body style="background-color:#99CCFF;">
<!--便于理解，在顶部设置一个宽度为100%的div，可以缩放一下看下效果!-->
<div style="width:100%; height:50px; background-color:#0099FF; line-height:48px; text-align:center;">我的CSDN登陆页面</div>
<!--然后设置一个固定宽高度的div，这样缩放时候宽高比是不变的，如果让宽度设置为33%，宽度的效果是一样的，但是在缩放的时候，里面的文本框由于是固定的宽度所以会溢出!-->
<div style=" width:356px; height:420px; margin-top:60px;margin-right:auto; margin-left:auto; background-color:#FFFFFF;border:1px solid white;">
<!--这里出现一个问题，当把边框去掉之后这个div会往上移动，但是尺寸不变，为了解决这个问题，可以保留边框，让边框显示白色就可以了！-->
<font style="display:block;margin-top:30px;margin-left:30px;color:#999999;">帐号登录</font>
<!--在文本框中出现灰色提示语的用：placeholder。当页面上的东西堆积多了，就会出现滚动条，这个时候根据自己需要设置登陆的那个div高度就可以让他不在出现滚动条。由于<input/>标签是行元素，所以也需要转换成块元素设置宽高度然后做定位!-->
<input name="uname" id="uname" placeholder="请输入账号" style=" display:block;width:283px; height:40px; border:#999999 solid 2px; margin-left:36px; margin-top:30px;"/>
<!--样式是一样的，到时候可以抽成类标签，使代码简洁美观-->
<input type="password" name="psd" id="psd" placeholder="请输入密码" style=" display:block;width:283px; height:40px; border:#999999 solid 2px; margin-left:36px; margin-top:30px;"/>
<!---->
<input type="checkbox" style="margin-left:30px; margin-top:10px;"/><font color="#999999"><b>下次自动登陆</b></font>
<!--注意在这里，如果使用 调整字体的位置，在缩放时候就会乱哦！所以我们还是将其转换成块元素，缩放没有问题，记住能不用div的地方尽量不要用！-->
<font color="#999999" style=" display:block; float:right;margin-right:40px;margin-top:10px;"><a href="https://passport.csdn.net/account/fpwd?action=forgotpassword&service=http%3A%2F%2Fmy.csdn.net%2Fmy%2Fmycsdn" style=" text-decoration:none; color:#999999;">忘记密码</a></font>
<!--设置div的宽度，设置水平方向位置自动，即想对上一div居中-->
<div style="display:block;width:284px; height:40px; margin:0 auto; margin-top:20px;text-align:center; border:#FF0000 1px solid; line-height:40px; background-color:#FF6600;"><font color="#FFFFFF" size="+1"><b>登 陆</b></font></div>
<!--横线是一个div-->
<div style="border:#EEEEEE solid 1px; margin-top:40px;"></div>
<!--把下面再作为一个div-->
<div style="margin-top:40px;"> 还没有CSDN账号？<a href="https://passport.csdn.net/account/mobileregister?action=mobileRegisterView&service=http%3A%2F%2Fmy.csdn.net%2Fmy%2Fmycsdn" style=" display:block; float:right;margin-right:30px;text-decoration:none; color:#0EA3F3;">立即注册</a></div>
</div>
<!--现在无论怎么缩放都不会乱了吧？-->
<!--另外掌握position:absolute与position:relative这两个的区别对布局还是大有帮助的，position:absolute这个是绝对定位;是相对于浏览器的定位。比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position:relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。比如:<div class="1"></div><div class="2"></div>当1固定了位置。1的样式float:left;width:100px; height:800px;2的样式为float:left; position:relative;margin-left:20px;width:50px;2的位置在1的右边，距离120px-->
8958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
