ホームページ >
記事 > ウェブフロントエンド > DIV の
DIV の タグは height_html/css_WEB-ITnose に影響します
- WBOYオリジナル
- 2016-06-21 09:23:531866ブラウズ
<script type="text/javascript"> $(document).ready(function () { //parent.$.modalbox.resize({w: 500, h: 300}); //parent.$.modalbox.moveto("center"); console.warn($("body>div:first").height()); console.warn($("body>div:first").outerHeight(true)); console.warn($("body>div:first>h3").height()); console.warn($("body>div:first>h3").outerHeight(true)); })</script> <body> <div> <h3 style="margin-top:10px; margin-bottom:10px;"> <span id="pass-title">xyz</span> </h3> </div> </body>
上記は私のテストコードです。
DIV には h3 タグが含まれています。 $("body>div:first>h3").outerHeight(true) だけを使用して h3 の高さを取得すると、Margin を含む合計の高さを取得できますが、
$("body>div: first").outerHeight(true) は div の合計の高さを取得しますが、マージンの高さは含みません。助けてください。
ディスカッション (解決策) への返信
持っている人がいたら、来てください。見てください
お腹が空いた..
LZ を f1665c6c42cd0bdc33dba44b8f734057 に変更してもう一度見てください
これは、display 属性の詳細な説明です。 w3school.com.cn/cssref/pr_class_display.asp,
lz div に float:left を追加してみることもできます
css-box モデルは非常に複雑です
これは、display 属性の詳細な説明です
://www.w3school.com.cn/cssref/pr_class_display.asp,
CSS ボックス モデルは非常に複雑です
まだうまくいかないようです
これは、display 属性の詳細な説明です http://www.w3school.com .cn/cssref/pr_class_display.asp,
css-box モデルは非常に複雑です
まだ動作していないようです
問題はありません、float、表示します :inline-block の後は、内部要素によって完全に拡張されます
問題は次のとおりです, 上記の div の margin-top は、collepse h3 の margin-top ですが、div には含まれていないため、div の externalheight が h3 よりも高くなります
これは表示属性の詳細な説明 http://www.w3school.com.cn/cssref/pr_class_display.asp、
css - ボックス モデルは非常に複雑です。
まだ動作しないようです
問題ありません、float、display:inline-block はその後内部要素によって完全に開かれます
前後に改行はありません...
?あなたへ?最初に??解決策:
h3?display:inline-block; width:100% 解決策:
h3 の下で
h3{
display:inline-block ;
*display:inline;
*zoom:1;
h3{
*display:inline; 1;
}
ありがとう、あなたの写真はとても役に立ちます。あげます
「上の div の margin-top は、collepse h3 の margin-top です。」 これは実情を踏まえてまとめたものですか、それとも公式ドキュメントに記載されているものですか？
?Charge:
?ie の下に h3 が必要ですか? h3{
display:inline-block;
*display:inline; ありがとう、あなたの写真はとても素敵です。あげます
「上の div の margin-top は、collepse h3 の margin-top です。」 これは実情を踏まえてまとめたものですか、それとも公式ドキュメントに記載されているものですか？
公式ドキュメント: http://www.w3.org/TR/CSS2/box.html 8-3-1 の行の 1 つ
ボックスの上マージンとその最初のインフローの子の上マージン