従来のHTML5タグの分類と表示について詳しく解説_html/css_WEB-ITnose

目次 [1] 機能 [2] 表示 block inline inline-block none list-item Table 要素

前の単語

従来、HTML タグはブロック レベル、インライン レベル、インライン ブロックに分割されていました

機能

ブロックレベル

[1] 幅が設定されていない場合、幅は1行いっぱいになります

[2] 1行排他

[3] 幅と高さをサポート

インラインレベル

[1] コンテンツサポート オープン幅

[2] 非排他的な一行

[3] 幅と高さはサポートされません

[4] コードの改行はスペースに解析されます

インラインブロック

[1] 幅が設定されていない場合、コンテンツは Open width をサポートします

[2] 非排他行

[3] width と height をサポート

[4] コードの改行はスペースに解析されます

ディスプレイ

ディスプレイ:ブロック

< ;dl>

& lt;figcaption>

f32b48428a809b51f04d3228cdf461fa
100db36a723c770d327fc0aef2ce13b1
e92c374c75427fd7cfc32824b1eebb36
5c0e96d12fc7501cef2ae2efde646ee0 (すべてのブラウザでサポートされているわけではありません)
9b8d7b889acba92c978f783c55ba01dc(Firefox でのみサポートされています)
c787b9a589a3ece771e842a6176cf8e9
c34106e0b4e09414b63b2ea253ff83d6
41b2470cb51360a68ac8070cf2059ba1
5a07473c87748fb1bf73f23d45547ab8
e388a4556c0f65e1904146cc1a846bee
2f8332c8dcfd5c7dec030a070bf652c3
631fb227578dfffda61e1fa4d04b7d25
ff6d136ddc5fdfeffaf53ff6ee95f185

display:inline

3499910bf9dac5ae3c52d5ede7383485

77fab4a1cfaff550e2dd382ae42ba848(一部のブラウザではサポートされていません)
88f336217b3880082bb52d49b5de60a5
b7f90f73cad438258bf67e62f79b2113

lt;input>
aa983b9eb8086376f1f6481364a02e5a
49c6123c49c6be380cb91db06cd3bfa9
273238ce9338fbb04bee6997e5552b95
6ecb87e5318a36c03c59e25d55f43372
2e0846f767a87375fef4dd2ccee14e0e
3f1c4e4b6b16bbbd69b2ee476dc4f83a
e02da388656c3265154666b7c71a8ddc
c9ccee2e6ea535a969eb3f532ad9fe89

display:list- item (ブロックレベル要素の 3 つの特性を持つ)

25edfb22a4f469ecb59f1190150159c6

テーブル要素の表示

table{display: table;}thead{display: table-header-group;}tbody{display: table-row-group;}tfoot{display: table-footer-group;}tr{display: table-row;}td,th{display: table-cell;}col{display: table-column;}colgroup{display: table-column-group;}caption{display: table-caption;}