CSS 表示のいくつかのプロパティ、float、clear、overflow、visibility

http://colobu.com/2014/08/28/CSS-display-float-clear-overflow-visibility/

display属性: block/inline/none

display: block (行属性を表示する機能です) label ブロッ​​ク属性ラベル、幅と高さを設定できます);
display: inline (この機能はブロック属性ラベルを行属性ラベルとして表示することです。その場合、ブロック属性ラベルは幅と高さを設定できません); (この機能は、制御されたラベルを表示しないようにすることです)
visibility: hidden (要素のボックスを非表示に設定しますが、レイアウト内のその位置は変更されません)
display:none との違いは次のとおりです。後者はその位置を占有せず、次の要素はその位置を直接カバーしますが、前者はレイアウトを占有しますが、コンテンツは表示されず、空白になります。display: none が使用されている場合、ダウンロード時に、表示されていない要素はダウンロードされませんが、表示されない要素はダウンロードされます

フローティング (フローティングですが、依然としてドキュメント フロー制限の影響を受けます) 行ラベルがフローティングになった後、その幅と高さを設定できます

float: none/left/right

none: オブジェクトはフローティングしません
left: 左 float
right: 右 float

clear (

clear float)

clear: 両方/none/left/right

none: フローティングを許可両側のオブジェクト
両方: 浮遊オブジェクトは許可されません
左: 許可されていません左側に浮遊オブジェクトがあります
右: 右側の浮遊オブジェクトは許可されません

オーバーフロー (オーバーフロー)

オーバーフロー: 表示/自動/非表示/スクロール

visible: コンテンツを切り取ったりスクロールバーを追加しません
auto: デフォルトのプロパティ
hidden: コンテンツ以外を非表示
scroll: 常にスクロールバーを表示します

visibility(visible)

visibility: 継承/可視/非表示

inherit: 継承前の親オブジェクトの可視性
visible: オブジェクトの表示
hidden: オブジェクトの非表示

いくつかの画像形式の違い:

gif: 半透明をサポートしません

jpg: 透明をサポートします
png: 部分的に透明をサポートし、追加の処理が必要です

==============

http://www.studyofnet.com/news/398.html

1. ブロック要素: ブロック要素

各ブロックレベル要素はデフォルトで 1 行の高さを占有します。ブロックレベルの要素を行に追加することは通常できません (float が浮動した後を除く)。 2 つのブロックレベル要素を連続して編集すると、それらは自動的に折り返されてページ上に表示されます。ブロック レベルの要素は通常、ブロック レベルの要素またはインライン要素をネストできます。

ブロック レベルの要素は通常、構造を編成するためのコンテナとして表示されますが、常にそうとは限りません。

などの一部のブロック レベル要素には、ブロック レベルの要素のみを含めることができます。他のブロックレベル要素には、

などの行レベル要素を含めることができます。また、ブロックレベル要素と行レベル要素の両方を含めることもできます。

p は最も一般的に使用されるブロックレベル要素であり、display:block 要素スタイルはすべてブロックレベル要素です。それらは常にブロックの形式で表現され、同じレベルの兄弟ブロックと順に垂直に配置され、左側と右側を埋めます。

2. インライン要素: インライン要素

は、

インライン要素、インライン要素などとも呼ばれ、一般にセマンティック レベル (セマンティック) に基づく基本要素であり、テキストまたはその他のインライン要素、一般的なインライン要素「a」。たとえば、SPAN 要素、IFRAME 要素、および要素スタイルの表示: inline はすべてインライン要素です。たとえば、テキストなどの要素は文字の間に水平に配置され、自動的に右端に折り返されます。

3. ブロック要素の特徴

①、常に新しい行で始まり、高さ、行の高さ、外側と内側のマージンをすべて制御できます


③幅が設定されていない限り、幅はコンテナのデフォルトの 100% になります。


④、インライン要素と他のブロック要素を収容できます

4. インライン要素の特徴

①と他の要素は同じ行にあります

②、高さ、行の高さ。そして、マージンとパディングは変更できません


③、幅はテキストまたは画像の幅であり、変更できません

④、インライン要素はテキストまたは他のインライン要素のみを収容できます

インライン要素、以下の点にご注意ください

幅幅の設定は無効です。

• 高さの設定は無効ですが、line-height を通じて設定できます。

• 余白の設定は左右の余白のみ有効で、上下の余白は無効です。

• パディングの設定は、左右のパディングにのみ有効であり、上下には有効ではありません。要素のスコープは拡大されますが、要素の周囲のコンテンツは影響を受けないことに注意してください。

5. 共通ブロック要素

address - アドレス

blockquote - ブロック引用符

center - 中央揃えブロック

dir - ディレクトリリスト

p - よく使われるブロックレベルは簡単で、CSS レイアウトのメインタグでもあります

dl - 定義リスト

fieldset - フォームコントロールグループ

form - インタラクティブフォーム

h1 - タイトル

h2 - サブタイトル

h3 - レベル 3 タイトル

h4 –レベル 4 の見出し

h5 – レベル 5 の見出し

h6 – レベル 6 の見出し

hr – 水平分割線

isindex – 入力プロンプト

menu – メニューリスト

フレームなし– フレーム オプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザーに表示されます)

noscript - オプションのスクリプトのコンテンツ (このコンテンツはスクリプトをサポートしていないブラウザーに表示されます)

ol - 注文されたフォーム

p – 段落

pre – フォーマットされたテキスト

table – テーブル

ul – 順序なしリスト

6. 共通のインライン要素

a – アンカー

• abbr – 略語

• 頭字語 – 頭文字

• b – 太字 (非推奨)

• bdo – Bidi override

• big – 大きなフォント

• br – 改行

• cite – 引用

• code – コンピューターコード (ソースコードを引用する場合に必要)

• dfn – フィールドの定義

• em – 強調

• font – フォント設定 (非推奨)

• i – 斜体

• img – 画像

• input – 入力ボックス

• kbd – キーボードテキストを定義

• label – テーブルラベル

• q – 短い引用符

• s – アンダースコア (推奨されません)

• samp – サンプルコンピューターコードの定義

• select – プロジェクトの選択

• small – 小さなフォントのテキスト

• span – 一般的に使用されるインラインコンテナー、内のブロックを定義しますテキスト

• strike – アンダースコア

• strong – 太字強調

• sub – 下付き文字

• sup – 上付き文字

• textarea – 複数行のテキスト入力ボックス

• tt – テレックステキスト

• u – 下線

7. インライン要素とブロックレベル要素の違いは何ですか?

違い 1:

ブロックレベル:

Block-レベル要素デフォルトでは、幅は親要素の幅を自動的に埋めます。

インライン要素は排他的な行を占有せず、隣接するインライン要素は同じ行に配置されます。内容に応じて幅が変わります。

違い 2:

ブロックレベル: ブロックレベル要素は幅と高さを設定できます

インライン: インライン要素は幅と高さを設定できません

違い 3:

ブロックlevel :

ブロックレベル要素は margin と padding で設定できます

Inline:

margin-right; padding-right

; が有効になります。ただし、垂直方向の

margin-bottom; は有効になりません。 違い 4: ブロックレベル:

display:block;

以上がCSS 表示のいくつかのプロパティ、float、clear、overflow、visibilityの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。