ボックスmodel_html/css_WEB-ITnoseの深い理解
目次 [1] 幅と高さ [2] パディング [3] マージン [4] 境界線
前の単語
すべての文書要素は、要素ボックスと呼ばれる長方形のボックスは、ドキュメント レイアウト内で要素が占めるスペースの量を表します。さらに、各ボックスは他の要素ボックスの位置とサイズに影響します
幅と高さ
CSS では、ブロックレベルの要素に明示的な高さを設定できます。指定した高さがコンテンツの表示に必要な高さより大きい場合、追加の高さによって余分なパディングがあるかのような視覚効果が作成されます。指定した高さがコンテンツの表示に必要な高さよりも小さい場合は、スクロール バーが追加されます。要素。要素コンテンツの高さが要素ボックスの高さより大きい場合、ブラウザの特定の動作はオーバーフロー属性に依存します。
幅は、左の内側の境界線から右の内側の境界線までの距離として定義されます。
高さが定義されます 上部の内側の境界線から下部の内側の境界線までの距離として定義されます
[注] 幅と高さは、インラインの非置換要素には適用できず、負の値にすることはできません
幅/高さ
値:
レベル要素と置換要素
継承: なし
パーセンテージ: 含まれるブロックの幅/高さに相対
計算値: auto およびパーセンテージ値の場合、指定に従って決定されます。 ; それ以外の場合は、要素にこの属性を適用できない場合を除き、絶対的な長さ (自動の場合)
IE6 - ブラウザの幅と高さが定義されます。要素ボックスのコンテンツ領域のサイズではなく、表示される要素ボックスのサイズ
Padding
インライン要素の場合、左のパディングは要素の先頭に適用され、右のパディングは要素の先頭に適用されます。
[注] パディングは負の値にはできません。
padding
値: [
継承: なし
パーセント:包含ブロックの幅に相対的な
Margin
マージンを設定すると、要素の外側に追加の空白が作成されます。空白は通常、他の要素を配置できない領域と背景を指します。
マージンを適用できます。 インライン要素の場合、上下のマージンは行の高さに影響しません。上下の余白は実際には透明なので、このステートメントには視覚的な効果はありません。左マージンは要素の先頭に適用され、右マージンは要素の末尾に適用されます。 ]{1,4} | 継承
初期値: 未定義
適用対象: すべての要素
継承: なし
パーセンテージ: 幅に相対包含ブロックの
垂直マージンを結合
隣接する兄弟要素のマージン結合はマージン オーバーレイとも呼ばれます
含まれる親子要素のマージンのマージは、マージン転送とも呼ばれます
包含ブロックにボーダーまたはパディングを設定する場合、その子要素のマージンは包含ブロックに含まれるため、外側のマージン 距離パス
【1个值】margin: top|right|bottom|left;【2个值】margin: top|bottom left|right;【3个值】margin: top left|right bottom;【4个值】margin: top right bottom left;
両方の垂直マージンが負の値に設定されている場合、ブラウザは 2 つのマージンの最大絶対値を選択します。正のマージンが負のマージンと結合される場合、負のマージンの絶対値が正のマージンから減算されます。
境界線
要素の外側のマージンは要素 A の境界線です。 border は、要素のコンテンツのパディングを囲む 1 つ以上の線です。境界線は、太い線、スタイル、色の 3 つの部分で構成されます。
インライン要素の場合、境界線は実際には各線の外側の次のピクセルに描画されます。線は互いに近いため、境界線は重なり合います。インライン要素の境界線にどのような幅が設定されても、行の高さには影響しません。ただし、左と右の境界線はそれぞれ要素の先頭と末尾に表示されます
国境移動に関する詳しい情報はこちら

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
