码迷,mamicode.com
首页 > 其他好文 > 详细

div的大小设置

时间:2014-08-06 22:01:02      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   2014   art   

  本次试验的最大的误区是误解了div的宽度和高度的定义。

  对于div设置了width和height后div的大小其实没有固定,通过设置padding-top使得div原始设定的大小在此基础上改变了,所以误使两个原本一样大小的div出现了不等大小:bubuko.com,布布扣

bubuko.com,布布扣
 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" onMouseMove="slide()">
47 飘啊飘,飘到外婆桥!
48 </div>
49 <div id="content">
50 单机我吧,意外的惊喜!
51 </div>
52 </body>
53 </html>
View Code

现在通过设定line-height的值,可以使网页达到预期的效果:

bubuko.com,布布扣
 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" onMouseMove="slide()">
47 飘啊飘,飘到外婆桥!
48 </div>
49 <div id="content">
50 单机我吧,意外的惊喜!
51 </div>
52 </body>
53 </html>
View Code

bubuko.com,布布扣
当然也可以在div中嵌套div来实现效果:

bubuko.com,布布扣
 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" onMouseMove="slide()">
48     <div id="qian">飘啊飘,飘到外婆桥!</div>
49 </div>
50 <div id="content">
51 单机我吧,意外的惊喜!
52 </div>
53 </body>
54 </html>
View Code

 

div的大小设置,布布扣,bubuko.com

div的大小设置

标签:style   blog   http   color   os   io   2014   art   

原文地址:http://www.cnblogs.com/dashen/p/3895420.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!