htmlタグの2種類とは何ですか?-フロントエンドQ&A-php.cn

htmlタグの2種類とは何ですか?

angryTom

リリース： 2019-07-23 15:19:05

オリジナル

10807 人が閲覧しました

htmlタグの2種類とは何ですか?

一般的には、インライン要素に分かれています。 Block 要素と inline 要素は、たとえば、2 つの inline 要素が同じ行にある場合、、などのように分岐しないことを意味します。幅と高さはサポートされません。属性なので、インライン要素の高さと幅は、そのコンテンツの高さと幅と同じになります。ブロックの場合、2 つのブロック要素を同じ行に配置できない場合は、

... などのように折り返されることを意味しますが、ブロックされます。要素は幅をサポートし、高さ属性はインライン要素ではサポートされません。もちろん、CSS を使用してインラインをブロックに、またはブロックをインラインに変更することもできます。

1. インライン要素

最も一般的に使用されるインライン要素はspanであり、その他の要素はフォントを変更する特定の関数の下でのみ使用されます。 b> タグと タグ、および _{タグと ^{タグは、同様の移動属性の助けを借りずに直接正方形効果を作成でき、非常に実用的です。}}

インライン要素の特性: (1)幅、高さの設定は無効です。

(2)マージンの設定は左右方向のみ有効で、上方向は無効です。パディング設定は上下左右の両方向に有効で、スペースが拡張されます

(3) 行折り返しは自動的には発生しません

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>测试案例</title>
        <style type="text/css">
            span {
                width: 120px;
                height: 120px;
                margin: 1000px 20px;
                padding: 50px 40px;
                background: lightblue;
            }
        </style>
    </head>
    <body>
        <i>不会自动换行</i>
        <span>行内元素</span>
    </body>

</html>

ログイン後にコピー

レンダリング

2. ブロック要素

代表的なブロック要素は div です。、その他、p、nav、side、ヘッダー、フッター、セクション、記事、ul-li、アドレスなどはすべて div を使用して実装できます。ただし、プログラマーがコードを解釈しやすくするために、コードを読みやすくし、エラーをチェックしやすくするために、一般に特定のセマンティックタグが使用されます。

ブロック要素の特徴: (1) 幅と高さを識別できる機能

(2) 上下左右のマージンとパディングが有効

( 3) 自動的に行を折り返すことができます

(4) 複数のブロック要素のタグをまとめて記述し、デフォルトの配置は上から下へ

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>测试案例</title>
        <style type="text/css">
            div {
                width: 120px;
                height: 120px;
                margin: 50px 50px;
                padding: 50px 40px;
                background: lightblue;
            }
        </style>
    </head>
    <body>
        <i>自动换行</i>
        <div>块状元素</div>
        <div>块状元素</div>
    </body>

</html>

ログイン後にコピー

レンダリング