CSSで行要素をブロック要素に変更する方法

青灯夜游
リリース: 2023-01-07 11:47:13
オリジナル
4840 人が閲覧しました

CSS では、display 属性を使用して行要素をブロック要素に変換できます。この属性は、要素が生成するボックスのタイプを指定するために使用されます。「display:block;」を追加するだけです。 " スタイルを行要素に追加します。ブロック要素に変更できます。

CSSで行要素をブロック要素に変更する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

span などの行要素のサイズは変更できません

div などのブロック要素のみサイズを変更できます

CSSで行要素をブロック要素に変更する方法

nbsp;html>



    <meta>
    <meta>
    <!-- <link rel="stylesheet" href="style.css">    -->
    <style>
       div {
           width: 100px;
           height: 100px;
           background-color: pink;
       }

        a {
           width: 100px;
           height: 100px;
           background-color: pink;
       }
    </style>



    <div>块元素</div>
    <a>行元素</a>


ログイン後にコピー

CSSで行要素をブロック要素に変更する方法

それでは、行要素をブロック要素に変換しますか?

CSS では、display: block

CSSで行要素をブロック要素に変更する方法

nbsp;html>



    <meta>
    <meta>
    <!-- <link rel="stylesheet" href="style.css">    -->
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        a {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: block
        }
    </style>



    <div>块元素</div>
    <a>行元素</a>


ログイン後にコピー

CSSで行要素をブロック要素に変更する方法 # を通じて行要素をブロック要素に変換できます。

##推奨される学習:

CSS ビデオ チュートリアル

以上がCSSで行要素をブロック要素に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!