ホームページ  >  記事  >  ウェブフロントエンド  >  CSS表示属性値_html/css_WEB-ITnose

CSS表示属性値_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:07:281384ブラウズ

D I. CSS で表示できる値


説明 None この要素は表示されません。 block この要素は、この要素の前後に改行を入れて、ブロックレベルの要素として表示されます。 インラインデフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。 inline-blockInline-block 要素。 (CSS2.1での新しい値) list-item この要素はリストとして表示されます。 run-in この要素は、コンテキストに応じてブロックレベル要素またはインライン要素として表示されます。 compact CSS にはコンパクトという値がありますが、広くサポートされていないため、CSS2.1 から削除されました。 マーカー値マーカーは CSS で使用できますが、広範囲にサポートされていないため、CSS2.1 から削除されました。 table この要素は、テーブルの前後に改行が入ったブロックレベルのテーブル (
と同様) として表示されます。 inline-table この要素は、表の前後に改行のないインライン表 (
と同様) として表示されます。 table-row-group この要素は、1 つ以上の行のグループとして表示されます ( と同様)。 table-header-group この要素は、1 つ以上の行のグループとして表示されます ( と同様)。 table-footer-group この要素は、1 つ以上の行のグループとして表示されます ( と同様)。 table-row この要素はテーブル行として表示されます ( と同様)。 table-column-group この要素は、1 つ以上の列のグループとして表示されます (と同様)。 table-columnこの要素はセル列として表示されます (と同様) table-cellこの要素はテーブルセルとして表示されます ()table-caption この要素はテーブルのタイトルとして表示されます (inherit 表示属性の値が親要素から継承されます。
と同様)

2. display:inline 属性値


1. それは「流れ」であり、サイズや形状はありません。幅は親コンテナの幅によって異なります。

2. インラインタグの場合、設定した幅と高さは無効です。監視を通じて、要素の実際の幅と高さが設定した値ではないことがわかります。

3. disp


lay: block 属性値

1. ブロック要素の表示属性のデフォルト値は block である必要があります。明示的に定義しますか? 以前にブロック要素の表示属性を再定義したことがない限り。

2. これら 2 つのタグは でよく使用されます。これらの 2 つのタグはブロック要素ではないため、display: block で定義しない場合は幅、高さなどを定義します。長さと幅に関連する CSS は完全に無効であることがわかります。

4. display:inline-block 属性値

要素に「ブロック要素」の属性(幅と高さを設定可能)と「インライン要素」の属性(設定不可)を持たせる改行が生成されます))。


5. display:none 属性値

1. 要素を表示しないことを意味します。これにより、使いやすさの点で美しい効果、交互スタイルやホバー効果の高度な適用を実現できます。

2. CSS display:none は要素の表示を完全にキャンセルし、visibility:hidden は要素の位置を維持しますが、視覚的なコンテンツは非表示になります。

3. スタイル ファイルまたはページ ファイルのコード内で直接 display:none を使用して要素を非表示にした場合、ページを読み込んだ後、要素を表示するために js を通じてスタイルを設定しないと、要素を正しく取得できません。 js コードを使用すると、要素の一部の属性 (offSetTop、offSetLeft など) は値 0 を返します。これらの値は、要素を表示するために js で style.display を設定した後にのみ正しく取得できます。

4. display:none を使用して非表示にした要素は、Baidu などの検索サイトでは取得されません。これは Web サイトの SEO に影響します。場合によっては、left:-100000px を使用して同じ効果を得ることができます。



参考:css表示プロパティ http://www.studyofnet.com/news/936.html