CSSのボックスモデル、フローティングおよびフローティングをクリアする方法
2432 ワード
ボックスモデル
htmlでは各要素がボックスと見なすことができますが、デフォルトではボックスの枠線はなく、背景色は透明なので、デフォルトではボックスは見えません.
箱はmargin,border,padding,content(箱の中の内容)の4つの部分から構成されている.
1、margin要素と要素の間の距離a、上からmargin-top b、右からmargin-right c、下からmargin-bottomd d、左からmargin-leftb
A、1つの属性値——margin:10 px;上下左右を表す値はいずれもこの値B、2つの属性値であるmargin:10 px 20 pxである.前者は上下値、後者は左右の値C、4つの属性値であるmargin:10 px 20 px 30 px 5 pxを表す.上、右、下、左D、3つの値を表す——margin:10 px 20 px 5 px;上、左右、下
2、border(異なる枠に対して異なる属性値を設定するのは上述(a、b、c、d)(A、B、C、D)形式の枠の太さborder-width枠スタイルborder-style枠の色border-color 3、padding内の余白は、コンテンツと枠線の距離を制御するためにpaddingに異なる方向と数値を設定するために使用され、上記(a、b、c、d)および(A、B、C、D)フォーマット)ボックスの標準ストリームにおける位置決め原則と同様に、行内要素間の水平margin加算ブロックレベル要素間の垂直marginが最大値をとる(この現象をmarginの陥没(合併)現象と呼ぶ
ディスプレイ属性
display:none;(ウェブスペースを占有しないで隠す)display:block(ターゲット要素をブロック要素に変換する)spanはもともと行内要素で、幅を広く設定しても効果はなく、ブロック要素に変換してこそ効果があります.display:inline(行内要素にターゲット要素を設定)を行内要素に変換すると、設定幅が広くて効果がありませんdisplay:inline-block(行内ブロック要素にターゲット要素を設定)は行要素の特性もあれば、ブロック要素の特性も持つフローティング「標準ドキュメントフロー」(Normal Document Stream)、略称「標準フロー」です.配列や配置に関する他の特殊なCSSルールを使用しない場合の、様々な要素の配列ルールです.float:none(デフォルト)/left(左フローティング)/right(右フローティング)
フローティング:要素をドキュメントフローから削除します.
1.すべての要素をフローティングできます. 2.float属性を持つ要素は、親ラベルにスペースを占めません.3.floatはラベル間に隙間がある問題を解決することができる.
floatが行内属性ラベルに与える影響:1、floatの後にwidthとheight属性を設定できます.2、marginとpadding属性をサポートします.
floatがブロック属性ラベルに与える影響1、幅の高さを設定せずにフローティングした後、内容は幅の高さを広げます.2、ブロック属性要素を並べて並べることができます.
フローティングのクリア
1、clear応用の原理は元素の両側の浮動元素がもたらす影響を除去することである.
clear: left; 左側にはフローティング要素(それ自体が機能する)は許可されていません.隣の要素が左側のフローティング要素の影響をクリアするにはclear:leftを使用します.を作成します. clear: right; 右側にはフローティング要素(それ自体が機能する)は許可されていません.隣の要素が右側のフローティング要素の影響をクリアするにはclear:rightを使用します.を作成します. clear: both;要素の両側のフローティングの影響をクリアします.原理:空のdivを追加し、cssのclear:bothでフローティングをクリアし、親divが自動的に高さを取得できるようにします.
2、overflow: hidden;コンテンツを超えて非表示(親の下の子要素はすべてフローティング状態で、親はoverflow:hiddenを追加します;属性は子要素のフローティングによる親の高さの陥没現象を解決し、親の隣接要素は正常に表示されます.)overflow:visible:超過コンテンツを表示し、コンテンツを切り取らずにスクロールバーを追加しないoverflow:auto:コンテンツがトリミングされた場合、ブラウザはスクロールバーを表示して残りのコンテンツを表示します.overflow:scroll:コンテンツはトリミングされますが、ブラウザにはスクロールバーが表示され、残りのコンテンツ3、after擬似クラスクリアフローティングが表示されます.clearfix:after {content:""; display:block;clear:both; } .clearfix { zoom:1; }//IEフローティングクリア
htmlでは各要素がボックスと見なすことができますが、デフォルトではボックスの枠線はなく、背景色は透明なので、デフォルトではボックスは見えません.
箱はmargin,border,padding,content(箱の中の内容)の4つの部分から構成されている.
1、margin要素と要素の間の距離a、上からmargin-top b、右からmargin-right c、下からmargin-bottomd d、左からmargin-leftb
A、1つの属性値——margin:10 px;上下左右を表す値はいずれもこの値B、2つの属性値であるmargin:10 px 20 pxである.前者は上下値、後者は左右の値C、4つの属性値であるmargin:10 px 20 px 30 px 5 pxを表す.上、右、下、左D、3つの値を表す——margin:10 px 20 px 5 px;上、左右、下
2、border(異なる枠に対して異なる属性値を設定するのは上述(a、b、c、d)(A、B、C、D)形式の枠の太さborder-width枠スタイルborder-style枠の色border-color 3、padding内の余白は、コンテンツと枠線の距離を制御するためにpaddingに異なる方向と数値を設定するために使用され、上記(a、b、c、d)および(A、B、C、D)フォーマット)ボックスの標準ストリームにおける位置決め原則と同様に、行内要素間の水平margin加算ブロックレベル要素間の垂直marginが最大値をとる(この現象をmarginの陥没(合併)現象と呼ぶ
ディスプレイ属性
display:none;(ウェブスペースを占有しないで隠す)display:block(ターゲット要素をブロック要素に変換する)spanはもともと行内要素で、幅を広く設定しても効果はなく、ブロック要素に変換してこそ効果があります.display:inline(行内要素にターゲット要素を設定)を行内要素に変換すると、設定幅が広くて効果がありませんdisplay:inline-block(行内ブロック要素にターゲット要素を設定)は行要素の特性もあれば、ブロック要素の特性も持つフローティング「標準ドキュメントフロー」(Normal Document Stream)、略称「標準フロー」です.配列や配置に関する他の特殊なCSSルールを使用しない場合の、様々な要素の配列ルールです.float:none(デフォルト)/left(左フローティング)/right(右フローティング)
フローティング:要素をドキュメントフローから削除します.
1.すべての要素をフローティングできます. 2.float属性を持つ要素は、親ラベルにスペースを占めません.3.floatはラベル間に隙間がある問題を解決することができる.
floatが行内属性ラベルに与える影響:1、floatの後にwidthとheight属性を設定できます.2、marginとpadding属性をサポートします.
floatがブロック属性ラベルに与える影響1、幅の高さを設定せずにフローティングした後、内容は幅の高さを広げます.2、ブロック属性要素を並べて並べることができます.
フローティングのクリア
1、clear応用の原理は元素の両側の浮動元素がもたらす影響を除去することである.
clear: left; 左側にはフローティング要素(それ自体が機能する)は許可されていません.隣の要素が左側のフローティング要素の影響をクリアするにはclear:leftを使用します.を作成します. clear: right; 右側にはフローティング要素(それ自体が機能する)は許可されていません.隣の要素が右側のフローティング要素の影響をクリアするにはclear:rightを使用します.を作成します. clear: both;要素の両側のフローティングの影響をクリアします.原理:空のdivを追加し、cssのclear:bothでフローティングをクリアし、親divが自動的に高さを取得できるようにします.
2、overflow: hidden;コンテンツを超えて非表示(親の下の子要素はすべてフローティング状態で、親はoverflow:hiddenを追加します;属性は子要素のフローティングによる親の高さの陥没現象を解決し、親の隣接要素は正常に表示されます.)overflow:visible:超過コンテンツを表示し、コンテンツを切り取らずにスクロールバーを追加しないoverflow:auto:コンテンツがトリミングされた場合、ブラウザはスクロールバーを表示して残りのコンテンツを表示します.overflow:scroll:コンテンツはトリミングされますが、ブラウザにはスクロールバーが表示され、残りのコンテンツ3、after擬似クラスクリアフローティングが表示されます.clearfix:after {content:""; display:block;clear:both; } .clearfix { zoom:1; }//IEフローティングクリア
Eg:
div
div
div