你的位置:首页 > 网页设计

[网页设计]块套块的排版问题研究


div内嵌套p,div等元素出现的问题

http://caiceclb.iteye.com/blog/428085

文章内有些问题,可能不适应今天了。

正在学习前端,小问题是不能忽视的。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4  <title> new document </title> 5  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6  <style type="text/css"> 7   div {margin:0;padding:0;} 8    9   /*解决方案1?:加个border可以让外部div变大,但是border的1px,用margin=-1px消除不了    border:1px solid #000;margin:-1px;        */10   #top,#bottom {background:red;}11   #bottom{background:green;}12   13   p{margin:20px;}14   #div {margin:30px;}15   16   /* 此时margin为0,效果OK       */ 17   /* 接下来先去掉p标签的margin:0;让前面的定义生效      18   p{margin:0px;}  */  19   #div {margin:0;}20   21   /*解决方案2:*/22   #top { 23   overflow:hidden; /* 针对FF,Opera有效 */ 24   zoom:1; /* 对IE有效 */ 25 }       26 27  </style>28 </head>29 30 <body>31 32  <div id="top">33   <p>p-tag margin</p>34  </div>35  36  <div id="bottom">37   <div id="div">div margin</div>38  </div>39  40 </body>41 </html>

解决方案1是有问题的,margin:-1px;并不能解决高度增大问题,chrome,FF,Opara测试了下都不行。

解决方案2,可以完美解决(IE我没测试)。