ホームページ > 記事 > ウェブフロントエンド > Blocks_html/css_WEB-ITnose 内のブロックの組版問題に関する研究
Blocks_html/css_WEB-ITnose 内のブロックの組版問題に関する研究
- WBOYオリジナル
- 2016-06-24 11:20:591041ブラウズ
div 内のネストされた p、div、およびその他の要素に関する問題
この記事には、今日の内容にはふさわしくない可能性のある問題がいくつかあります。
私はフロントエンドを学んでいます。小さな問題は無視できません。
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@php.cn までご連絡ください。