星空网 > 软件开发 > 网页设计

块套块的排版问题研究

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我没测试)。

 




原标题:块套块的排版问题研究

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

国内怎么看tiktok:https://www.goluckyvip.com/tag/81317.html
海外tiktok下载:https://www.goluckyvip.com/tag/81319.html
沃尔玛优势:https://www.goluckyvip.com/tag/8132.html
tiktok好做吗:https://www.goluckyvip.com/tag/81320.html
tiktok关键词:https://www.goluckyvip.com/tag/81321.html
tiktok入驻:https://www.goluckyvip.com/tag/81322.html
TikTok Shop加码直播购物,与直播平台开启合作:https://www.kjdsnews.com/a/1836348.html
TikTok Shop加码直播购物,与直播平台开启合作:https://www.goluckyvip.com/news/186218.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流