CSS 3のディスプレイ:ボックスタイプの詳細

19286 ワード

ディsplay

CSSでは、displayプロパティを使用してボックスのタイプを定義します.全体的に、ボックスタイプはinlineとblockの2種類に分けられます.divのデフォルトがblockの場合、spanのデフォルトはInlineです.デフォルトの表現はdisplayで変更できます.

<!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/
dispalyを使用して、上記のdivスタイルとspanスタイルに次のルールを追加します.

//div   

display:inline;

//span   

display:block;

効果は図のようです:http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/
ではdisplayの値はこの2つしかありませんか?それは間違っています.ディスプレイの異なる値は、異なるボックスタイプを示します.
1、inline-blockタイプ:blockボックスタイプに属するが、表示時にinlineクラスボックスタイプの特徴がある.並列表示のデフォルトの位置合わせは、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には違いがあり、前者はblockに属しているので、幅の広い属性がありますが、後者はありません.
2、inline-tableタイプ:表関連タイプであり、IE 8+およびその他のメインブラウザがサポートしている.より多くの表の関連タイプは後述する.
まず、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/3/embedded/result/
文字が表を囲む効果を作るには、inline-tableを使ってtableのスタイルを修正することができます.

table{

display:inline-table;

border:solid 3px #00ffaa;

}

文字の折り返し効果が出てきました:http://jsfiddle.net/Web_Code/pt0j3b6n/4/embedded/result/
表関連タイプ要約
要素
所属タイプ
説明
table
table
この要素はブロックレベルの表として表示され、表の前後に改行文字が付きます.
tabel
inline-table
この要素はインライン表として表示され、表の前後に改行が表示されます.
tr
table-row
この要素は表の行として表示されます.
td
table-cell
この要素は表のセルとして表示されます.
th
table-cell
この要素は表のセルとして表示されます.
tbody
table-row-group
この要素は1つ以上の行のグループとして表示されます.
thead
table-header-group
この要素は1つ以上の行のグループとして表示されます.
tfoot
table-footer-group
この要素は1つ以上の行のグループとして表示されます.
col
table-column
この要素はセル列として表示されます.
colgroup
table-column-group
この要素は1つ以上の列のグループとして表示されます.
caption
table-caption
この要素は表の見出しとして表示されます
3、list-itemタイプ:このタイプでは、複数の要素をリストとして表示し、要素の先頭にリストのタグを追加できます.
例のすべてのdivをlist-itemタイプに設定し、list-style-typeでタグを中空円に指定します.

<html>

<head>

<style type="text/css">

div{

    display:list-item;

    list-style-type:circle;

    margin-left:20px;

}

</style>

</head>

<body>

    <div>div1</div>

    <div>div2</div>

    <div>div3</div>

    <div>div4</div>

</body>

</html>

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

4、run-inタイプとcompactタイプ:要素がrun-inまたはcompactタイプに指定されている場合、要素の後ろにblockタイプの要素がある場合、run-inタイプの要素はblockタイプの要素の内部に含まれ、compactタイプは

block要素の左側.この2つの属性は普及していない.run-inに関するdemo: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
上一篇:CSS:知らないかもしれない7つの職場

reactまたはcssは、複数行のテキストが省略記号を超えていることを実現します.

【CSS】css 3スクロールバースタイルの変更