ホームページ > 記事 > ウェブフロントエンド > CSSボックス距離計算の詳しい説明
CSSボックス距離計算の詳しい説明
- 高洛峰オリジナル
- 2017-03-27 17:16:442809ブラウズ
1. 次の例を見てください:
(1) HTML コンテンツの一部
<body>
<ul>
<li>复仇时刻</li>
<li class="widthborder">莫罗请求布雷斯把小孩丹尼带来神殿以避免恶魔夺取他的灵魂，作为回报他将驱除布雷斯身上的诅咒。</li>
</ul>
<ul>
<li>源代码</li>
<li class="widthborder">科尔突然惊醒发生自己在一辆高速行驶的列车上，他的身边坐着一个素不相识的女子正在与自己讲话。</li>
</ul></body>
（2）CSS内容
ul
{
backgroud:#ddd;
margin:15px;
padding:5px;
}
li
{
color:black;
background:#aaa;
margin:20px;
padding:10px;
list-style:none;
}
li.widthborder
{
border-style:dashed;
border-width:5px;
border-color:black;
margin-top:20px;
}(3) 次の画像の距離を計算します:
(4) 説明:
標準フローでは: I、インライン要素間の水平マージンは累積されます II. ブロックレベル要素間の垂直マージンは折りたたまれます III. ネストされたボックスの親ボックスがサイズを指定しない場合、親ボックスのデフォルト設定は、子ボックスのサイズ。親ボックスが Size を指定している場合、親ボックスのサイズが子ボックスより小さい場合、IE6 は包含関係に合わせて親ボックスのサイズを自動的に調整しますが、Firefox は自動的に調整しません。 。
以上がCSSボックス距離計算の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSボックスモデルの紹介次の記事：CSSボックスモデルの紹介