CSSの表示3：ボックスの詳細説明 type_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSの表示3：ボックスの詳細説明 type_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:49

オリジナル

942 人が閲覧しました

CSS では、display 属性を使用してボックスのタイプを定義します。一般に、ボックスタイプは、インラインとブロックの 2 つのカテゴリに分類されます。たとえば、div のデフォルトは block、span のデフォルトは Inline です。デフォルトのプレゼンテーションモードは、表示を通じて変更できます。

<!DOCTYPR><html><head>    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>    <title>block and inline elements</title>    <style type="text/css">        div        {           background:#aaff00;        }        span        {            background:#ffaa00;        }    </style></head><body>    <div>div元素1</div>    <div>div元素2</div>    <span>span元素1</span>    <span>span元素2</span></body></html>

ログイン後にコピー

デフォルトの div および Span 表現: http://jsfiddle.net/Web_Code/pt0j3b6n/embedded/result/

表示変更を使用して、上記の div スタイルと Span スタイルにそれぞれ次のルールを追加します:

//div中添加display:inline;//span中添加display:block;

ログイン後にコピー

効果は図に示すとおりです: http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/

表示の値はこれら 2 つだけですか?それは間違いです。表示の値が異なると、ボックスのタイプも異なります。

1. インラインブロックタイプ: ブロックボックスタイプに属しますが、表示時にはインラインボックスタイプの特性を持ちます。並べて表示する場合のデフォルトの配置は下配置ですが、これはvertical-alignで変更できます。

inline-block を使用して水平メニューを作成します

<html><head><style type="text/css">ul{    margin:0;    padding:0;}li{    display:inline-block;    width:100px;    padding:10px 0;    background-color:#00ccff;    border:solid 1px #666666;    text-align:center;}a{    color:#000000;    text-decoration:none;}</style></head><body>    <ul>        <li><a href="http://www.ido321.com" target="_blank">菜单1</a></li>        <li><a href="http://www.ido321.com" target="_blank">菜单2</a></li>        <li><a href="http://www.ido321.com" target="_blank">菜单3</a></li>        <li><a href="http://www.ido321.com" target="_blank">菜单4</a></li>    </ul></body></html>

ログイン後にコピー

効果: http://jsfiddle.net/Web_Code/pt0j3b6n/2/embedded/result/

PS: inline-block と inline には違いがあります、前者はまだブロックに属しているため、高さと幅の属性がありますが、後者はありません。

2. インラインテーブルタイプ: これは、IE 8 以降およびその他の主要なブラウザーでサポートされるテーブル関連のタイプです。その他のテーブル関連の型については、以下を参照してください。

inline-table は使用できません。 inline-table を使用でき、テーブルスタイルを変更できます

<html><head><style type="text/css">table{border:solid 2px #00aaff;}td{border:solid 2px #ccff00;padding:5px;}</style></head><body>淡忘~浅思<table>    <tr>        <td>A</td><td>B</td><td>C</td><td>D</td>    </tr>    <tr>        <td>E</td><td>F</td><td>G</td><td>H</td>    </tr>    <tr>        <td>I</td><td>J</td><td>K</td><td>L</td>    </tr></table>你好</body></html>

ログイン後にコピー

テキストの折り返し効果が出てきます: http://jsfiddle.net/Web_Code/pt0j3b6n/4 /embedded/result/

テーブル関連の型概要

Element

Type

Descriptiontabletableこの要素は、前後に改行を入れてブロックレベルのテーブルとして表示されますテーブル。 tabelinline-table この要素は、表の前後に改行が入ったインライン表として表示されます。 trtable-rowこの要素はテーブルの行として表示されますtdtable-cell この要素はテーブルのセルとして表示されますth テーブル- cellこの要素は表のセルとして表示されますtbodytable-row-groupこの要素は1つ以上の行のグループとして表示されますtheadtable-header - groupこの要素は 1 つ以上の行のグループとして表示されますtfoottable-footer-groupこの要素は 1 つ以上の行のグループとして表示されますcol table-columnこの要素はセルの列として表示されますcolgrouptable-column-groupこの要素は 1 つ以上の列のグループとして表示されますcaption table-captionこの要素は表のタイトルとして表示されます: 複数の要素をリストとして表示し、要素の先頭にリストマークを追加できるタイプですすべての div は list-item タイプに設定され、list-style-type はマークを白丸として指定するために使用されます












	3. リスト項目型

table{display:inline-table;border:solid 3px #00ffaa;}

ログイン後にコピー

効果: http://jsfiddle. net/Web_Code/pt0j3b6n/5/embedded/result/

4. Run-in型とcompact型

：要素がrun-inまたはcompact型で指定された場合、要素の後にブロック型要素がある場合要素の場合、run-in 型要素はブロック型要素に含まれ、コンパクト型は

ブロック要素の左側に配置されます。これら 2 つの属性は人気がありません。 run-in に関するデモ: http://www.zhangxinxu.com/study/201203/css-run-in.html

5. none タイプ

: display の値を none に指定すると、要素は次のようになります。変更された場合は表示されません。 PS: Visibility:hidden とは異なり、display:none を持つ要素は元のスペースを占有しませんが、visibility は引き続き元のスペースを占有します。

初公開記事: http://www.ido321.com/1300.html