CSS レイアウト プロパティは要素の非表示と表示を制御します

この記事では、css に関する関連知識を提供します。主に、表示、可視性、オーバーフロー、不透明度など、要素の表示と非表示に関連する問題を紹介します。一緒にそれについて話しましょう。それがみんなに役立つことを願っています。

(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)

CSS で提供要素を表示または非表示にできるプロパティは、display、visibility、overflow、および opacity です。

1.display 属性

display 属性は、要素の表示方法を設定するために使用されます。

表示: なし; 非表示オブジェクト

表示: ブロック; ブロックレベルの要素に変換することに加えて、要素を表示することも意味します。

#表示によって要素が非表示になると、要素は元の位置を占めなくなります

例は次のとおりです。次のとおりです:

display: none 隐藏对象
 
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

は元の位置 を占めなくなります。 (人がいなくなると、お金もなくなります)

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .peppa {
            /* display: none; */
            display: block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .george {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>


    <div>佩奇</div>
    <div>乔治</div>

2.visibility 可視性

要素を非表示にした後の可視性、引き続き元の位置 を占めます。

#visibility: 表示; 要素は表示されます
visibility: hidden; 要素は非表示です

overflow 属性が指定されている場合、コンテンツが要素の境界ボックスからオーバーフローした場合 (指定された高さと幅を超えた場合) はどうなりますか。

オーバーフロー: 表示; コンテンツの切り取りやスクロール バーの追加は行われません

##overflow: hidden
• ; オブジェクトサイズを超える内容は表示せず、超過した部分を非表示にします。

#overflow: スクロール; コンテンツを超過したかどうかに関係なく、スクロール バーは常に表示されます。

#overflow: auto; スクロール バーは指定された制限を超えて表示され、スクロール バーは表示されません指定された制限を超えていない場合。

通常の状況では、送信部分がレイアウトに影響を与えるため、オーバーフローしたコンテンツを表示することはできません。

配置されたボックスがある場合は、冗長な部分が非表示になるため、overflow:hidden を使用する場合は注意してください。

#概要は次のとおりです:

属性値

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        .peppa{
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条，不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto溢出的时候才显示滚动条，不溢出不显示滚动条 */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>


    <div>
        《小猪佩奇》（Peppa Pig）是英国动画公司Astley Baker Davies与Entertainment One制作的原创欧洲儿童系列电视动画 [11]  [13]  ，由内维尔·阿斯特利、马克·贝克、菲尔·霍尔与乔里斯·范胡尔岑执导 [14]  ，于2004年5月31日在英国电视五台首播 [15]  ，2015年6月，《小猪佩奇》引进中国大陆，并在中央电视台少儿频道首播 [17]  
    </div>

以上がCSS レイアウト プロパティは要素の非表示と表示を制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。