ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS表示属性の使い方
CSS表示属性の使い方
- silencementオリジナル
- 2019-05-26 16:45:493859ブラウズ
display 属性の定義と使用法
display 属性は Web ページのレイアウトでよく使用され、多くの属性値がありますが、最も一般的に使用される属性値は、block、inline-block、inline、および none です。他の属性値はまれです。そこで、ここでは、これらの一般的に使用される属性値の使用法に焦点を当てます。
In css 、表示属性は、要素が生成するボックスのタイプを定義するために使用されます。ブロック要素をインライン要素に、インライン要素からブロック要素に、またはブロック要素/インライン要素をインラインブロック要素とインラインに変換するためによく使用されます。 -block 要素は、ブロック要素の特性とインライン要素の特性の両方を持ちます。
表示属性の構文形式
1.css 構文: display:none/inline/block/inline-block/list-item/run-in/table/inline -テーブル/テーブル行グループ/テーブルヘッダーグループ/テーブルフッターグループ/テーブル行/テーブル列グループ/テーブル列/テーブルセル/テーブルキャプション/継承
2. JavaScript 構文: object.style.display="inline"
display 属性値の説明
none: 要素を表示しないように設定します
block: 要素をブロックレベル要素として設定します
inline: 要素をインライン要素として設定します
inline-block: ブロック要素の特性を持つインライン ブロック要素およびインライン要素 機能
list-item: 要素をリストに設定します
run-in: コンテキストに応じてブロックレベル要素またはインライン要素として表示します
compact /mark: CSS2 から既に削除されています。1 の
table を削除します。要素をブロックレベルのテーブル (f5d188ed2c074f8b944552db028f98a1 と同様) に設定し、テーブル
## の前後に改行を入れます。 #inline-table: 要素をインライン テーブル (< ;table> と同様) に設定します。table の前後に改行はありませんtable-row-group: 要素をグループに設定します。 1 つ以上の行 (92cee25da80fac49f6fb6eec5fd2c22a に類似) table-header-group : ae20bdd317918ca68efdc799512a9b39 タグに類似 table-footer-group: 06669983c3badb677f993a8c29d18845 タグに類似; table-row : a34de1251f0d9fe1e645927f19a896e8 タグと同様#表示属性のnone属性 value
要素の表示属性の属性値が に設定されている場合なし、要素は非表示になり表示されず、ドキュメント フローから分離され、Web ページのスペースを占有しません。非常に関連しています: 表示要素と CSS の非表示要素 可視性属性の使用上の注意# #例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的none属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:60px;border:1px solid;margin-top:10px;}
.none{display:none;}
</style>
</head>
<body>
<div class="div">元素1</div>
<div class="div none">元素2</div>
<div class="div">元素3</div>
</body>
</html>
以上がCSS表示属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。