css3 ボックス モデル note_html/css_WEB-ITnose
css3 ボックスモデル
CSS は、各要素が要素ボックスと呼ばれる 1 つ以上の長方形のボックスを生成することを前提としています。各要素ボックスの中央にはコンテンツ領域があります。このコンテンツ領域は、オプションのパディング、境界線、およびマージンで囲まれます。これらの項目がオプションであるとみなされる理由は、その幅を 0 に設定できるため、要素ボックスから項目が効果的に削除されます。
W3Cの従来のCSS2.1ボックスモデルでは、幅と高さの値を宣言し、パディングやボーダーなどを追加することでコンテンツ領域の幅と高さを制御しており、これを通常コンテンツボックスモデルと呼びます。
CSSのボックスモデルは2種類に分かれており、1つはW3Cの標準モデル、もう1つは要素のサイズを計算するモデルという点では似ています。それは計算方法が違うということです。
W3Cの標準ボックスモデル
外箱サイズ計算（要素空間サイズ）
element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距
内箱サイズ計算（要素サイズ）
element 高度 = 内容高度 + 内边距 + 边框element 宽度 = 内容宽度 + 内边距 + 边框
IE従来型ボックスモデル（IE6以下、IE6を除く）
外箱サイズ計算（要素空間サイズ）
element 空间高度 = 内容高度(包括了height+padding+border) + 外边距element 空间宽度 = 内容宽度(包括了width+padding+border) + 内边距 + 边框 + 外边距
内箱サイズ計算（要素サイズ）
element 高度 = 内容高度(包括了height+padding+border)element 宽度 = 内容宽度(包括了height+padding+border)
つまり、IE6 以下のバージョンにおけるコンテンツの実際の幅は、width、padding、border です。内側と外側のボックスに関して、W3C 標準ブラウザのコンテンツの幅は、IE6 より前のブラウザの内側のボックスの幅と同じです。
box-sizing
前述したように、IE の従来のボックス モデルでは、ボーダーとパディングが幅と高さに含まれます。標準的なブラウザでは、幅と高さにはボーダーとパディングを除いたコンテンツの幅のみが含まれるため、Web デザインの処理に多くの手間がかかります。たとえば、100 ピクセルの要素が必要です。この要素には 10 ピクセルのパディングと 1 ピクセルの境界線があり、最終的にコンテンツの幅は 100-20-2=78 ピクセルになります。ただし、IE の従来のボックス モデルでは、ボックスのコンテンツが 100 ピクセルに等しいことを宣言するだけで、パディングとボーダーが自動的にボックスに含まれます。この問題を解決するために、CSS3ではボックスモデルのサイズ解決方法を事前に定義できるボックスモデル属性box-sizingを追加しました。
box-sizing:content-box | border-box | inherit
content-box: 要素が W3C 標準ボックス モデルを維持できるようにするデフォルト値。
border-box: この値により、要素は IE の従来のボックス モデルを維持します。
Inherit: この値により、要素は親要素のボックス モデル モードを継承します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); padding:10px; border:10px solid red; box-sizing:content-box; }</style></head><body> <div>胸无大志者，必受制于人</div></body></html>デフォルト（コンテンツボックス）の標準ボックスモデルでは、ボックスはパディングとボーダーによって引き伸ばされます。
div{ width:100px; height:100px; background:hsla(360,50%,30%,0.5); padding:10px; border:10px solid red; box-sizing:border-box;}IEの従来のボックスモデル（ボーダーボックス）では、ボックスのサイズは変わりません。
IE6 以下のバージョンのボックスモデルの解析モードは W3C 標準仕様に準拠していませんが、この方法は役に立たないというわけではありません。要素のボーダーやパディング サイズを変更しても、ボックスの合計サイズは、ページ全体のレイアウトに影響を与えません。標準ブラウザでは、ボックス モデルを解析するための W3C 仕様に従って、要素のボーダーまたはパディングが変更されると、要素のボックス サイズに影響があり、要素のボックス サイズを再計算する必要があります。ページ全体のレイアウトに影響します。
overflow-x と overflow-y
overflow 属性は CSS2.1 仕様の機能であり、overflow-x 属性と overflow-y 属性は CSS3 で追加されました。
overflow-x と overflow-y は主に、水平または垂直のコンテンツ オーバーフローの効果を定義するために使用されます。
overflow-x:visible | hidden | scroll | auto | no-display | no-contentoverflow-y:visible | hidden | scroll | auto | no-display | no-content
visible:デフォルト値。コンテンツはトリミングされず、コンテンツ ボックスの外側に表示される場合があります。
非表示: コンテンツをトリミングし、スクロール機構を提供しません。
スクロール: コンテンツをトリミングし、スクロール機構を提供します。
auto: ボックスがオーバーフローした場合にスクロール機構を提供します。
非表示: コンテンツがコンテンツボックスに収まらない場合は、ボックス全体を削除します。
no-content: コンテンツがコンテンツ ボックスに収まらない場合は、コンテンツ全体を非表示にします。
div{ width:200px; white-space:nowrap; overflow-x:scroll;}overflow-x:scorll、x 軸にスクロール機構を追加します。
div{ width:100px; height:100px; overflow-y:scroll;}overflow-y:scorll、y 軸にローリング機構を追加します。
resize
主な目的は、ユーザーエクスペリエンスを向上させることです。
resize:none | both | horizontal | vertical | inherit
none: ユーザーは要素をドラッグしてサイズを変更することはできません。
両方: ユーザーは要素をドラッグし、同時に要素の幅と高さを変更できます。
水平: ユーザーは要素をドラッグし、要素の幅のみを変更できます。
垂直: ユーザーは要素をドラッグし、要素の高さのみを変更できます。
Inherit: 親要素のresize属性値を継承します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; overflow-y:scroll; resize:none; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html> resizeがデフォルト値の場合、要素をドラッグしてサイズを変更することはできません。
div{ width:100px; height:100px; overflow-y:scroll; resize:both;}サイズ変更が両方の場合、要素の右下隅に特別な記号が表示され、それをドラッグして要素の幅と高さを変更します。ドラッグ後の効果は以下の通りです:
div{ width:100px; height:100px; overflow:scroll; resize:horizontal;}リサイズが水平の場合、特殊な記号も表示されますが、ドラッグできるのは水平方向、つまり幅のみです。
れーれーriseze为vertical时也一样，但是只能拖动垂直的方向，也就是高度大小，如下是拖动后的效果。
outline
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和border不同，外轮廓线不占用网页布局的空间，不一定是矩形。
outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
outline-color:定义轮廓线的颜色。
outline-style:定义轮廓线的样式。
outline-width:定义轮廓线的宽度。
outline-offset:定义轮廓线离边框的偏移值。
inherit:元素继承父元素的outline效果。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; border:10px solid; outline:10px solid red; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人</div> <span>胸无大志者，必受制于人</span></body></html>outline的效果与border的效果类似，但却不占据文档流，所以能够覆盖住后边的文本。
css3盒模型完。学习路漫漫，当知晓并非一日之功，中间必有千辛万苦。子曰：吾道一以贯之。就是说要有始有终，贵在坚持啊。
ホット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）
ホットトピック
7529
15
1378
52
82
11
21
76
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
