ホームページ  >  記事  >  ウェブフロントエンド  >  CSSボックスモデルの知識のまとめ

CSSボックスモデルの知識のまとめ

迷茫
迷茫オリジナル
2017-03-25 15:11:202462ブラウズ

この章の内容:

知識ポイント 1:

ボックス モデル: ボックス モデルは、要素コンテンツ、パディング、ボーダー、マージンの 4 つのコンポーネントで構成されます。これらの 4 つの部分には、top/right/ の 4 つのコンポーネントが含まれています。左下。

w3school からダウンロードした画像、ボックス モデルの 4 つのコンポーネントを見てみましょう

説明: 画像内の要素ボックスの最も内側の部分は、コンテンツを直接囲んでいる実際のコンテンツ (要素) です。は 内側マージン (パディング)、内側マージンは要素の背景 (背景) を表し、内側マージンのエッジは境界線 (ボーダー) であり、境界線の外側は 外側マージン (マージン) です。はデフォルトで透明なので、その背後にある要素はブロックされません (実際、要素のマージンは親要素のパディングです)。 sizeサイズが必要なサイズについてページに要素を配置する場合、宣言されたすべてのパディング、境界線、およびマージン値をコンテンツ領域に追加します。もちろん、要素にパディング、境界線、またはマージンがない場合、そのサイズはその内容によってのみ決まります。最初に外側のマージンのオーバーレイ効果を無視します。計算式は次のとおりです:

幅の合計 = 左マージン + 左の境界線 + 左のパディング + 幅 + 右のパディング + 右の境界線 + 右マージン

高さの合計 = 上のマージン + 上の境界線+ 上のパディング + 高さ + 下のパディング + 下の境界線 + 下のマージン

例の 1 つを取り上げます:


導入コード:

<p style="width: 500px;">
 <p style="margin: 10px; border: 5px solid blue; padding: 10px; ">
   网上很多设置的方式,目前以二进制的方式来讲解(ID CLASS ELEMENT)
   网上很多设置的方式,目前以二进制的方式来讲解(ID CLASS ELEMENT)
   网上很多设置的方式,目前以二进制的方式来讲解(ID CLASS ELEMENT)
 </p>
</p>


上記の要素の計算された合計サイズは次のとおりです:

幅の合計 = 10 + 5 + 10 + 450+ 10 + 5 + 10 = 500px

高さの合計 = 10 + 5 + 10 + 72+ 10 + 5 + 10 = 122px

知識ポイント 2:

ペアボックス モデルを予備的に理解した後、次のシナリオを検討しました:

1. 相対位置決めまたは位置決めなし (デフォルトの位置は

静的

)


紹介コード:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
  background:black;
  color:White;
  height:100px;
  padding:10px;
  border:20px solid Red;
  margin:30px;
}
</style>
</head>
<body>
  <h2>Static or Relative Box</h2>
  <p class="box">不设置任何position属性及宽度</p>
</body>
</html>


ブロックの幅は、親要素の幅領域を自動的に埋めるように拡張されます

2. フローティング float 要素と

絶対位置決め

要素 (ラッピング プロパティを使用して、display: table; Set を設定することでラッピング効果を実現することもできます)効果を確認するには自分で試してください)


導入コード:

3. 特徴: p のスタイルを box-sizing: border-box に設定します。

導入コード:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
  background:black;
  color:White;
  height:100px;
  padding:10px;
  border:20px solid Red;
  margin:30px;
  position: absolute;
}
</style>
</head>
<body>
  <h2>Absolute or Float Box</h2>
  <p class="box">不设置任何position属性及宽度</p>
</body>
</html>


は、コンテンツの幅が次のとおりであることを発見しました: ボーダー幅 + パディング幅 + コンテンツ幅

4. ボックスモデルのマージン属性:

2 つの要素を組み合わせると、対応するmargin 縦方向の大きい方のみを取ります

以上がCSSボックスモデルの知識のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。