首页 > 代码库 > div的大小设置
div的大小设置
本次试验的最大的误区是误解了div的宽度和高度的定义。
对于div设置了width和height后div的大小其实没有固定，通过设置padding-top使得div原始设定的大小在此基础上改变了，所以误使两个原本一样大小的div出现了不等大小：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0;10 }11 #top{12 float:left;13 background:-moz-radial-gradient(#1D59C3 50%,#08D947,#DB1D93,#F72327);14 height:200px;15 width:400px;16 border-radius:50px;17 text-align:center;18 line-height:200px;19 /*padding-top:100px;*/20 }21 #content{22 position:relative;23 background:-webkit-linear-gradient(top,#238DD0,#0CAFAC);24 height:200px;25 width:400px;26 float:left;27 text-align:center;28 }29 </style>30 <script>31 function slide(){32 alert(‘看到我飘了吗？‘);33 }34 function $(id){35 return document.getElementById(id);36 }37 window.onload=function(){38 $(‘content‘).onclick=function(){39 alert(‘呵呵，没有的了，被骗了！‘); 40 }41 }42 </script>43 </head>44 45 <body>46 <div id="top" onm ouseMove="slide()">47 飘啊飘，飘到外婆桥！48 </div>49 <div id="content">50 单机我吧，意外的惊喜！51 </div>52 </body>53 </html>
现在通过设定line-height的值，可以使网页达到预期的效果：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0;10 }11 #top{12 float:left;13 background:-webkit-radial-gradient(#1D59C3 50%,#08D947,#DB1D93,#F72327);14 height:200px;15 width:400px;16 border-radius:50px;17 text-align:center;18 /*padding-top:100px;*/19 line-height:200px;20 }21 #content{22 position:relative;23 background:-webkit-linear-gradient(top,#238DD0,#0CAFAC);24 height:200px;25 width:400px;26 float:left;27 text-align:center;28 }29 </style>30 <script>31 function slide(){32 alert(‘看到我飘了吗？‘);33 }34 function $(id){35 return document.getElementById(id);36 }37 window.onload=function(){38 $(‘content‘).onclick=function(){39 alert(‘呵呵，没有的了，被骗了！‘); 40 }41 }42 </script>43 </head>44 45 <body>46 <div id="top" onm ouseMove="slide()">47 飘啊飘，飘到外婆桥！48 </div>49 <div id="content">50 单机我吧，意外的惊喜！51 </div>52 </body>53 </html>
当然也可以在div中嵌套div来实现效果：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0;10 }11 #top{12 float:left;13 background:-webkit-radial-gradient(#1D59C3 50%,#08D947,#DB1D93,#F72327);14 height:200px;15 width:400px;16 border-radius:50px;17 text-align:center;18 }19 #qian{20 margin-top:100px;21 }22 #content{23 position:relative;24 background:-webkit-linear-gradient(top,#238DD0,#0CAFAC);25 height:200px;26 width:400px;27 float:left;28 text-align:center;29 }30 </style>31 <script>32 function slide(){33 alert(‘看到我飘了吗？‘);34 }35 function $(id){36 return document.getElementById(id);37 }38 window.onload=function(){39 $(‘content‘).onclick=function(){40 alert(‘呵呵，没有的了，被骗了！‘); 41 }42 }43 </script>44 </head>45 46 <body>47 <div id="top" onm ouseMove="slide()">48 <div id="qian">飘啊飘，飘到外婆桥！</div>49 </div>50 <div id="content">51 单机我吧，意外的惊喜！52 </div>53 </body>54 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。