ホームページ > 記事 > ウェブフロントエンド > css3 ボックス モデル note_html/css_WEB-ITnose
css3 ボックス モデル note_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:05974ブラウズ
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盒模型完。学习路漫漫，当知晓并非一日之功，中间必有千辛万苦。子曰：吾道一以贯之。就是说要有始有终，贵在坚持啊。