CSS表示属性の使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS表示属性の使い方

silencement

May 26, 2019 pm 04:45 PM

表示属性

CSS表示属性の使い方

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 を削除します。要素をブロックレベルのテーブル (

と同様) に設定し、テーブル

## の前後に改行を入れます。 #inline-table: 要素をインラインテーブル (< ;table> と同様) に設定します。table の前後に改行はありません

table-row-group: 要素をグループに設定します。 1 つ以上の行 ( に類似)

table-header-group : タグに類似

table-footer-group: タグに類似; table-row : タグと同様

#表示属性の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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。