no-image

CSS(4)


Css要素のオーバーフロー

子要素のサイズが親要素のサイズを超える場合、オーバーフローする子要素を表示するように親要素を設定する必要があります。設定方法は、overflow属性によって設定されます。

オーバーフロー設定項目:
1、可視のデフォルト値。 コンテンツはプルーニングされず、エレメントボックスの外に表示されます。
隠されたコンテンツは削除され、残りは見えなくなります。このプロパティには、フロートをクリアして、マージントップの崩壊をクリアする機能もあります。
図3に示すように、スクロールコンテンツは除去されるが、ブラウザはスクロールバーを表示して残りのコンテンツを見る。
4、autoコンテンツが整理されると、ブラウザはスクロールバーを表示して残りのコンテンツを表示します。
5.継承ルールは、親要素からオーバーフロー属性の値を継承する必要があります。

ブロック要素、インライン要素、インラインブロック要素

要素はラベルです。レイアウトでよく使用されるラベルには、ブロック要素、インライン要素、インラインブロック要素の3種類があります。これらの要素の特性を理解することで、ページレイアウトを巧みに行うことができます。

ブロック要素
div、p、ul、li、h2〜h6、dl、dt、ddなどはすべてブロック要素であり、レイアウト内でのその動作は次のようなレイアウトでよく使用されます。

すべてのスタイルをサポートしています。幅が設定されていない場合、親のデフォルトの幅は100%です。幅が設定されていてもボックスは1行を占めます。

インライン要素インライン要素とも呼ばれるインライン要素は、次のようなレイアウトでよく使用されます。a、span、em、b、strong、iなどは、インライン要素であり、

部分的なスタイル(幅、高さ、余白の上下、パディングの上下はサポートされていません)をサポートしています幅と高さはコードの行の中身と改行によって決まります。子要素の水平方向の配置、line-height属性値を使用した垂直方向の配置の設定

インライン要素のギャップを解決する方法
1、インライン要素間の改行を削除する
2、インライン要素の親font-sizeを0に設定し、インライン要素自身をfont-sizeに設定します

インラインブロック要素インラインブロック要素とも呼ばれるインラインブロック要素は、新しい要素型です。既存の要素はこのクラスに属しません。img要素とinput要素はこの要素のように動作しますが、インライン要素としても分類されます。 display属性を使用すると、ブロック要素やインライン要素をそのような要素に変換できます。 レイアウトでの彼らの行動:

すべてのスタイルのサポート幅と高さを設定しない場合、幅と高さはボックスの内容と改行で決まります。ボックスはスペースを生成します。子要素はインラインブロック要素です。親要素はtext-align属性を使用して、 -height属性値は、子要素の垂直方向の配置を設定します。

これらの3つの要素は、display属性を使用して相互に変換できますが、実際の開発ではブロック要素が頻繁に使用されるため、インライン要素をブロック要素に、少量をインラインブロックに、インライン要素を使用することがよくあります。インライン要素は、ブロック要素の代わりに直接使用されます。

表示属性
display属性は、要素のタイプを設定して非表示にするために使用されます。一般に使用される属性は次のとおりです。
1、要素が隠されておらず、位置を占めていない
図2では、ブロック要素がブロック要素として表示されている
図3に示すように、インライン要素はインライン要素
インラインブロック要素はインラインブロック要素とともに表示されます

フローティング

ドキュメントフロー
文書フローとは、ボックスが上から下に、左から右にHTMLタグが書き込まれる順に並んでいることを意味します。ブロック要素は1行を占めており、行内の要素は左から右に並んでいます。それらの背後には、それぞれの箱が取って代わります。

フローティング特性

1、浮動要素は浮動小数点(左)と右浮動小数点(浮動小数点:右)

2、浮動小数点は左または右に浮動し、親要素の境界、浮動小数点要素、非浮動小数点要素を停止します

図3に示すように、隣接するフローティングブロック要素は、行内にあり、親ラインブレイクの幅を超える

4、行内の要素の浮動小数点またはブロック要素が自動的にインラインブロック要素に変換される

図5に示すように、浮動要素の後ろに浮動要素が浮動要素の位置を占める場合、浮動要素内のテキストは浮動要素を回避し、テキストの効果を形成する

6、親要素内のフローティング要素全体が親要素を開くことができず、フロートをクリアする必要があります

図7に示すように、浮動要素間の垂直マージンの合併

フローティングをクリア

親は最後の子要素の末尾に属性overflow:hiddenを追加し、空のdivにスタイル属性を与えます。clear:両方とも(推奨しません)成熟したクリア浮動スタイルクラスを使用します。

.clearfix:after,.clearfix:before{ content: "";display: table;}.clearfix:after{ clear:both;}.clearfix{zoom:1;}

フローティングの使用をクリアする:

.con2{... overflow:hidden}或者<div class="con2 clearfix">

以上は、中国の翻訳ツールで翻訳した中国の技術記事です

関連記事