ホームページ  >  記事  >  ウェブフロントエンド  >  CSSボックスモデルとは何ですか? CSS ボックス モデルの簡単な紹介

CSSボックスモデルとは何ですか? CSS ボックス モデルの簡単な紹介

不言
不言オリジナル
2018-09-27 15:42:133064ブラウズ

この記事では、CSS ボックス モデルとは何ですか? CSS ボックス モデルの簡単な紹介は、必要な場合に参考にしていただければ幸いです。

ボックス モデル

1. 任意の要素をボックス モデルとして使用できます

2。ボックスのサイズはコンテンツの幅によって決まります。 /height ) Margin (padding) Border (border)

3. ボックスは外側のマージン (マージン) の影響を受け、ボックスの位置に影響します
一般化されたボックス モデル: ドキュメント内のすべての機能タグとコンテンツ タグ、およびドキュメント タグ内のすべての表示プロパティ。
ナロー ボックス モデル: ドキュメント内にブロック レベルの形式で存在するタグ (ブロック レベルのタグは、ボックス モデルの特性を 100% 備えており、最も一般的に使用されます)

2. ボックス モデル メンバーの概要

content

    幅と高さを設定してコンテンツを指定します
  • ブロックレベルのタグは独自の幅と高さを設定できます。デフォルトの幅は親の幅 (width =auto) で、高さは自動です (コンテンツによって拡張されます)
  • インライン タグはできません独自の幅と高さを設定し、デフォルトは自動 (コンテンツによって拡張)
  • border
##Border (境界線) は 3 つの部分で構成されます。 border-width (幅)、border-color (色)、border-style (スタイル)
  • border メンバー: border-left、border-right、border-top、border- bottom
  • border-width メンバー: border-left-width、border-right-width、border-top-width、border-bottom-width

  • ##border-color メンバー: border-left-color、border-right-color、border-top -color、border-bottom-color

  • border-style メンバー: border-left-スタイル、ボーダー右スタイル、ボーダートップスタイル、ボーダーボトムスタイル
  • スタイル
説明#実線実線破線##破線#点線二重二重実線#グルーブグルーブラインridgeridgeinsetインセットエフェクトlineoutset外側の凸効果ライン# #margin メンバー: margin-left、margin-right、margin-top、margin-bottomマージン全体の設定
#点線
margin
    #割り当て数
  • #方位

  • 1
上下左右2上と下|左と右3上|左|下4上|右|下|左
概要: 1. 開始位置を指定します。位置 2. 時計回り 3. 反対側を探しません
3. 境界半径 境界半径
border-radius メンバー

メンバー

説明
  • # #border-top-left-radius
左上の位置border-bottom-left-radiusborder-bottom-right-radius
border-top-right-radius 右上の位置
左下の位置
右下半径############
  • 単一方向設定

割り当ての数 (値のタイプ: 長さまたはパーセンテージ): 1 解釈: 水平および垂直
割り当ての数 (値のタイプ: 長さまたはパーセンテージ): 2 解釈: 水平 | 垂直

  • 分割全体設定

形式: 1/1 解釈:水平|垂直

4. その他の関連属性

  • 最大|最小幅|高さ

  • ##オーバーフロー

値##表示hiddenscrollautoinherit

デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
コンテンツはトリミングされ、残りのコンテンツは非表示になります。
コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
コンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
オーバーフロー属性の値を親要素から継承することを指定します。
表示
##値 説明インラインインラインブロックレベルInline-blockボックス モデル レイアウトの基本的な概要
ブロック
inline-block
##5. ボックス モデル レイアウト

レイアウトの方向: マージン-左、マージン-右、マージン-上、マージン-下
  • #独自のレイアウトに影響を与える: マージン-左、margin-top

  • 兄弟レイアウトに影響を与える: margin-right、margin-bottom

  • 順方向/逆方向: 正の値 / 負の値

  • マージン レイアウト ピット

多くのセマンティック タグにはデフォルトのマージンがあります
  • 親タグと子タグのいずれかmargin-top のオーバーラップの方が大きい

  • ブラザータグの margin-bottom と margin-top のオーバーラップのどちらか大きい方

以上がCSSボックスモデルとは何ですか? CSS ボックス モデルの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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