CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (2)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (2)

高洛峰

Feb 22, 2017 pm 01:34 PM

HTMLタグの分類

タグの分類について話すとき、初心者として、初めてタグを使用するとき、幅、高さ、水平方向の中央揃えなど、一部の属性が一部のタグで機能しないことに気づくでしょう。実際、この属性の使用は、ブロックレベルのタグで使用された場合にのみ機能します。個人的に初心者が見落としやすい点だと思うので書いてみました！

まず、HTMLタグは、表示に応じてブロックレベルタグ、インラインタグ、インラインブロックタグに分けて紹介します。

ブロックレベルタグ

特徴：は専用の行を占有し、高さ、幅、行の高さ、上下の余白を設定できる属性値幅が指定されていない場合は、ブロックレベルの要素がデフォルトでブラウザの幅 (100%) に設定されます。一般的なブロックレベルのタグは次のとおりです:

、h シリーズ、

、

インラインラベル

特徴: 複数のラベルが存在可能インラインラベルの高さ、幅、行を直接設定することはできません。高さと上下の余白は、幅と高さをサポートするコンテンツに完全に依存します。典型的なインラインタグは次のとおりです: 、、、、、、、、

インラインブロックタグ:

特徴: インラインレベルとブロックレベルの利点を組み合わせることで、幅と高さの属性値に影響を与えるだけでなく、複数のラベルを 1 行に表示することもできます。 典型的なインラインタグには以下が含まれます: 、

1. ブロックレベルのラベルをインラインラベルに変換します: 2.ブロックレベルのタグ：display:block;

以下の例を参照してください:

1: インラインタグをブロックレベルのタグに変換します

<!DOCTYPE html>
<html>
    <head>
        <title>行内标签转块级标签</title>
        <style type="text/css">
            a{
                width: 200px;
                height: 200px;
                background-color: red;
                display: block; 
            }
        </style>
    </head>
    <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
        <a href="https://www.baidu.com">百度</a>
    </body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>

実行結果は次のとおりです。赤い部分をクリックすると Baidu にジャンプします。リンク範囲の拡大を実現できます。

2:
インラインタグをインラインブロックタグに変換します

CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (2) インラインブロックレベルタグとブロックレベルタグの違いは上で述べましたが、もう一度強調します: ブロックレベルタグインラインブロックレベルタグ長さと幅は設定できますが、ブロックレベルタグを設定すると、自動的に折り返されます。この行には他に何も配置できません。インラインブロックレベルタグは複数配置できます。同じ行のインラインタグについて、具体的に説明します。

<html>
    <head>
        <title>块级和行内块级</title>
        <style type="text/css">
            a{
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;  
            }
            p{
            width:100px;
            height:100px;
           background-color: red;
           margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
           }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
        <a href="https://www.baidu.com">百度一下</a>
        <p>我是p1</p>   <!--这个是一般的块级标签，会上下分行-->
        <p>我是p2</p>
    </body>
</html>

実行結果:

 1 nbsp;html> 2  3      4         <title>块级标签转行内标签</title> 5         <style> 6             p{ 7                 width: 100px; 8                 height: 100px; 9                 background-color: red;10                 display: inline;11             }12         </style>13     14     15          <p>谷歌</p>  <!--按道理p是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->16          <p>http://www.php.cn</p>17     18

CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (2)

効果は次のとおりです:

CSS ブロックレベルのタグ、インラインタグ、およびインラインブロックタグの変換 (2)

最初に、ブロックレベルのタグ、インラインタグ、インラインブロックレベルのタグについて書きます。読んだ後、皆さんにさらにアドバイスをいただければ幸いです。

CSS ブロックレベルタグ、インラインタグ、およびインラインブロックタグ変換 (2) の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。

声明

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

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo

CSSカウンター：自動番号の包括的なガイドMay 07, 2025 pm 03:45 PM

csScounterSareSareusedTomageautomaticinginginwebdesigns.1）それらは、コンテンツ、リスト、および積極的なものを使用することができます

スクロール駆動型のアニメーションを使用したモダンなスクロールシャドウMay 07, 2025 am 10:34 AM

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

画像マップを再検討しますMay 07, 2025 am 09:40 AM

簡単に復習してみましょう。画像マップはHTML 3.2に戻ります。ここで、最初にサーバー側マップを使用してから、マップとエリア要素を使用して画像上でクリック可能な領域を定義したクライアント側マップをマップしました。

開発者：すべての開発者の調査May 07, 2025 am 09:30 AM

State of Devsの調査は現在、参加に対して開かれており、以前の調査とは異なり、コードを除くすべてをカバーしています：キャリア、職場だけでなく、健康、趣味などもあります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。